Verified Commit 0ba65d06 authored by Aral Balkan's avatar Aral Balkan
Browse files

Update WebSocket sections in preparation for Site.js 12.7.0

parent 1e5e304f
......@@ -162,23 +162,20 @@ module<span class="token punctuation">.</span><span class="token function-variab
<pre><code>mkdir <span class="token keyword">-p</span> <span class="token string">basic-chat</span>/.dynamic/.wss</code>
<code>cat &lt;&lt; <span class="token keyword">EOF</span> > basic-chat/.dynamic/.wss/<span class="token string">chat.js</span></code>
<code class='language-js'>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">currentClient<span class="token punctuation">,</span> request</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
webSocket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token parameter">message</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getWss</span><span class="token punctuation">()</span><span class="token punctuation">.</span>clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">client</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
client<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<code class='language-js'>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">client<span class="token punctuation">,</span> request</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
client<span class="token punctuation">.</span><span class="token function">room</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>setRoom<span class="token punctuation">(</span>request<span class="token punctuation">)</span>
client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token parameter">message</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>broadcast<span class="token punctuation">(</span>client<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">EOF</span></code>
<code>site <span class="token string">basic-chat</span></code></pre>
<p>To test it, open up two web browser windows and enter the following into the web developer (JavaScript) console on both of them:</p>
<pre><code class='language-js'><span class="token keyword">const</span> webSocket <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">'wss://localhost/chat'</span><span class="token punctuation">)</span>
webSocket<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>message<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
webSocket<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span></code></pre>
<pre><code class='language-js'>socket <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">'wss://localhost/chat'</span><span class="token punctuation">)</span>
socket<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token parameter">message</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>message<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
socket<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span></code></pre>
<p>Note that this is a naïve implementation that sends messages to every client, including the one the message originated on. For a demonstration of a basic chat server that has rudimentary client filtering and supports selective broadcast (to create “rooms”), see <a href='https://source.ind.ie/site.js/app/blob/master/examples/wss-basic-chat/.dynamic/.wss/chat.js'>the source code for the Basic Chat example.</a></p>
<p>The broadcast method, by default, has rudimentary client filtering and only sends a message to clients other than the one that originally sent the message and only to clients connected to the same route (or “room”). For a fully-documented version of the above example, see <a href='https://source.ind.ie/site.js/app/blob/master/examples/wss-basic-chat/.dynamic/.wss/chat.js'>the source code for the Basic Chat example.</a></p>
<p>To run that example with a basic web interface, do the following and then visit <a href='https://localhost'>https://localhost</a></p>
......@@ -186,7 +183,7 @@ webSocket<span class="token punctuation">.</span><span class="token function">se
<code>cd <span class='token string'>app</span></code>
<code>site <span class='token string'>examples/wss-basic-chat</span></code></pre>
<p>The WebSocket functionality is from <a href='https://github.com/HenningM/express-ws/pull/122'>a slightly modified version</a> of <a href='https://github.com/HenningM/express-ws'>express-ws</a> (which in turn uses <a href=''>ws</a>). Both of those links have more usage details.</p>
<p>The WebSocket functionality is from <a href='https://github.com/aral/express-ws'>our fork of express-ws</a> (which in turn uses <a href='https://github.com/websockets/ws'>ws</a>). Both of those links have more usage details.</p>
<p>For full details, see the <a href='https://source.ind.ie/site.js/app/blob/master/README.md#dynamic-sites'>Dynamic Sites documentation</a> and view the <a href='https://source.ind.ie/site.js/app/tree/master/examples'>examples</a>.</p>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment