jfinn
/
jsyncdb_flask


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
  <head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />


<script class="win_keys2 win_keys_glob_attrs" src="/ign/j9/dbg/glob_attrs.js?c=00x"></script>


<script src="/ign/libs/jquery-3.5.1.min.js"></script>

<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>


<script class="rld" src="/ign/indx/jsyncdb/jsync_dep.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_ord.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_ws.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_sto.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_init.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_test.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_demo.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             


<script class="rld" src="/ign/indx/jsyncdb/jsync_test2.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<!-- 
 -->

<!-- <script class="rld" src="/jsync_lib.js"></script> -->
<!-- <script class="rld" src="/jsync_demo.js"></script> -->
<!-- <script class="rld z1" src="jsync_demo.js"></script> -->


<style type="text/css">


</style>
 <!-- <link  class="rld" rel="stylesheet" href="/jsync_demo.css"> -->
 <!-- <link  class="rld" rel="stylesheet" href="jsync_demo.css"> -->
 <link  class="rld" rel="stylesheet" href="/ign/indx/jsyncdb/jsync_demo.css">


<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script src="/ign/j7/rldjs/rldjs5.js?v=139"></script>
<script class="rld rrld" src="/ign/rls.js?<!--#echo var='rtqs'-->"></script>
<script class="rld rrld_u" src="/ign/rls_u.js?<!--#echo var='rtqs'-->"></script>

<script type="text/javascript">

window.nginx_v1 = {
  "target_server_name":`<!--#echo var="target_server_name"-->`,
  "ssl_server_name":`<!--#echo var="ssl_server_name"-->`,

    ssl_certificate: `/etc/letsencrypt/live/<!--#echo var="target_server_name"-->/fullchain.pem`,
    ssl_certificate_key: `/etc/letsencrypt/live/<!--#echo var="target_server_name"-->/privkey.pem`,

}


  function hide_demo(argument) {
    clog("hide_demo")
    $(".show_demo").removeClass("show_demo").addClass("hide_demo")

  }
  function show_demo(argument) {
    clog("show_demo")
    // body...
    $(".hide_demo").removeClass("hide_demo").addClass("show_demo")
  }
</script>

</head>
<body>

<div id="root_div">
  <span class="iblock_2"></span>
  <span class="iblock_1"></span>
</div>
<div class="json_container hide_demo">
  <button class="demo_hide_btn" onclick="hide_demo()">hide demo</button>
  <button class="demo_show_btn" onclick="show_demo()">show demo</button><br>
  <!-- <div class="db_disp"></div> -->
  <code class="db_disp"></code>
</div>
<div id="oops_i_lied"><div class="code_container">
in this demo the global variable msto_prx is the root of the database.
we will use the global variable msto because it is a little nicer (has shortcuts to the parts you have exclusive write permissions to).

<b>open devtools on two pages connected to the same database to begin</b>
to get a copy of the datastructure without the Proxies:
<code>jc(msto)</code><div class="hidden-boundary"></div>

 set values<code>

msto.key = "value"<div class="hidden-boundary"></div>

  msto.example = {
    str:"these are supported data types",
    number:12.7,
    bool:true,
    arr:["val0",1,{z:1},["a","b"]],
    obj:{d:"there is a max depth of 15"},
    str2:"null isn't fully supported yet and can break things",
  }
</code>
  you can paste this shorter statement to avoid newlines in your devtools history :)

<code>msto.example={str:"str_val",bool:true,number:12.7,arr:["val0",1,{z:2},["a","b"]],obj:{d:"depth 2?"},str2:"another string"}</code><div class="hidden-boundary"></div>
get values
  <code>
msto.example.arr[0]<div class="hidden-boundary"></div>
// "val0"

msto.example.arr[2]<div class="hidden-boundary"></div>
// {z:2}</code>
the datastructure should have syncronized msto & msto_prx on both webpages 
<span class="db_desc">
values can be strings, numbers, booleans, objects or arrays
null and undefined are not supported yet
local changes are immediate
and deletes are local only (for now)
after a value is set is pushed to everyone else who is connected

msto.ws_channels and msto.participants are write protected 
msto.my_data links to the path you have write access to as does msto.my_channel
participants and channels write only data are automatically deleted after they leave
the data is not persistent it exists in the webpages of those connected
if everyone leaves a room the datastructure is destroyed


</span></div></div>

</body>
</html>