/
socket-sync.html
66 lines (57 loc) · 17.7 KB
/
socket-sync.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html> <html> <head> <title>socket-sync.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="index.html"> index.js </a> <a class="source" href="socket-sync.html"> socket-sync.js </a> <a class="source" href="socket.html"> socket.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> socket-sync.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">Backbone</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'backbone'</span><span class="p">),</span>
<span class="nx">_</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'underscore'</span><span class="p">),</span>
<span class="nx">socket</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./socket'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>requestId counter to insure sync message are
paired correctly</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>stolen from Backbone
let you safely get the value of the property
applying function for value, if function provided</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">getValue</span> <span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="nx">prop</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">object</span> <span class="o">&&</span> <span class="nx">object</span><span class="p">[</span><span class="nx">prop</span><span class="p">]))</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">object</span><span class="p">[</span><span class="nx">prop</span><span class="p">])</span> <span class="o">?</span> <span class="nx">object</span><span class="p">[</span><span class="nx">prop</span><span class="p">]()</span> <span class="o">:</span> <span class="nx">object</span><span class="p">[</span><span class="nx">prop</span><span class="p">];</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>mockey patch this flag so that we can distinguish between Model and
Collection for the server
when the socket sync happens, the server can know collection
vs singleton</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">isCollection</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">modelRegistryById</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">function</span> <span class="nx">registerModelForUpdates</span><span class="p">(</span><span class="nx">model</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'registering model:'</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">modelRegistryById</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">==</span> <span class="kc">undefined</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>hold a reference to the model
TODO: add unsubscribe, dangling ref</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelRegistryById</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">model</span><span class="p">];</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>add to the list of models by registerd to this id</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">modelRegistryById</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">],</span> <span class="nx">model</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">){</span>
<span class="nx">modelRegistryById</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">updateAllModels</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">models</span> <span class="o">=</span> <span class="nx">modelRegistryById</span><span class="p">[</span><span class="nx">id</span><span class="p">];</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'instance change notified'</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">attrs</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>TODO options.timeout?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">params</span> <span class="o">=</span> <span class="nx">getValue</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="s1">'params'</span><span class="p">)</span> <span class="o">||</span> <span class="p">{},</span>
<span class="nx">controller</span> <span class="o">=</span> <span class="nx">getValue</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="s1">'controller'</span><span class="p">),</span>
<span class="nx">requestId</span> <span class="o">=</span> <span class="nx">counter</span><span class="o">++</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">syncRequest</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">requestId</span><span class="o">:</span> <span class="nx">requestId</span><span class="p">,</span>
<span class="nx">controller</span><span class="o">:</span> <span class="nx">controller</span><span class="p">,</span>
<span class="nx">method</span><span class="o">:</span> <span class="nx">method</span><span class="p">,</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span>
<span class="nx">params</span><span class="o">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">params</span><span class="p">),</span> <span class="nx">options</span><span class="p">)</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>replace collection read and index to disambiguate singleton and
collection</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">isCollection</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>map 'read' on collection to 'index'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">syncRequest</span><span class="p">.</span><span class="nx">method</span> <span class="o">=</span> <span class="s1">'index'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">syncRequest</span><span class="p">.</span><span class="nx">method</span> <span class="o">==</span> <span class="s1">'delete'</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>map 'delete' to 'destroy' since 'delete' is a keyword</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">syncRequest</span><span class="p">.</span><span class="nx">method</span> <span class="o">=</span> <span class="s1">'destroy'</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'syncRequest'</span><span class="p">,</span> <span class="nx">syncRequest</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>TODO: need to handle errors</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">socket</span><span class="p">.</span><span class="nx">once</span><span class="p">(</span><span class="s1">'syncResponse-'</span><span class="o">+</span> <span class="nx">requestId</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>side-effect model attrs first to deal with initial id setting</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'sycn response with update'</span><span class="p">);</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">success</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>make sure we only hook callback once per model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">registerModelForUpdates</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>when sync is called an implicit subscription
for server changes is established
set up automated subsciption from server
which will trigger 'change' event</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'instanceChange'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attrs</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'client recvd instanceChange message'</span><span class="p">);</span>
<span class="nx">updateAllModels</span><span class="p">(</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">)</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">};</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>