Verified Commit 514282e8 authored by Aral Balkan's avatar Aral Balkan
Browse files

Fix and improve the WebSocket examples

parent b0581f53
......@@ -158,13 +158,13 @@ module<span class="token punctuation">.</span><span class="token function-variab
<p>In addition to static routes and dynamic HTTPS routes, you can also specify WebSocket (WSS) routes in DotJS. You can also mix them as you please.</p>
<p>For example, to create <a href='https://source.ind.ie/site.js/app/tree/master/examples/wss-basic-chat'>a very basic chat app</a>:</p>
<p>For example, to create a very basic chat app:</p>
<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">webSocket<span class="token punctuation">,</span> request</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">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 string">'/chat'</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>
<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>
......@@ -175,14 +175,16 @@ module<span class="token punctuation">.</span><span class="token function-variab
<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>
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>
<p>To test <a href='https://source.ind.ie/site.js/app/tree/master/examples/wss-basic-chat'>this example</a> with a web interface, do the following and then visit <a href='https://localhost'>https://localhost</a></p>
<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/tree/master/examples/wss-basic-chat'>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>
<pre><code>git <span class='token keyword'>clone</span> <span class='token string'>https://source.ind.ie/site.js/app</span></code>
<code>cd <span class='token string'>app</span></code>
<code>bin/site.js <span class='token string'>example/wss-basic-chat</span></code></pre>
<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>
......
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