backend-development.github.io/slides_node_websockets.html at master · backend-development/backend-development.github.io · GitHub

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Slides for
        Websockets with Node — Ruby on Rails Guides
    </title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbo-track="reload">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
    <link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbo-track="reload">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="stylesheets/reset.css">
		<link rel="stylesheet" href="stylesheets/reveal.css">
		<link rel="stylesheet" href="stylesheets/myslide.css" id="theme">
    <link rel="stylesheet" href="stylesheets/code.css">
    <script src="javascripts/clipboard.js" data-turbo-track="reload"></script>
    <script src="javascripts/slides.js" data-turbo-track="reload"></script>

</head>

<body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
            <h1>Websockets with Node</h1><p>While HTTP only allows requests from the client sent to the server,
websockets offer a permanent connection between client and server.
With socket.io you can use websockets in node.</p><p>By referring to this guide, you will be able to:</p>
<ul>
<li>Build a chat app in node</li>
<li>Incorporate &quot;server push&quot; functionality in your app</li>
</ul>

          <p><small>Slides - use arrow keys to navigate, esc to return to page view, f for fullscreen</small></p>

        </section>
        <section><a class='slide_break' href='node_websockets.html#slide-0'>▻</a>
<h2 id="websockets"><a class="anchorlink" href="#websockets"><span>1</span> Websockets</a></h2><p>Websockets are built on top of HTTP and HTTPS:</p>
<ul>
<li>they reuse the default ports 80 and 443</li>
<li>they start out as a normal HTTP request</li>
<li>they reuse cookies</li>
</ul>
<p>but after the initial request, a websocket turns into
a permanent connection between the server and the client.</p><div class="interstitial code">
<pre><code class="highlight plaintext">GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
</code></pre>
<button class="clipboard-button" data-clipboard-text="GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
">Copy</button>
</div>
<p>Both the client and the server can send messages across
the websocket at any time.  Both the client and the
server should be able to handle incoming messages at any time.</p></section>
<section><a class='slide_break' href='node_websockets.html#slide-1'>▻</a>
<h2 id="warning-leaving-the-restful-area"><a class="anchorlink" href="#warning-leaving-the-restful-area"><span>2</span> Warning: Leaving the restful area</a></h2><p>Up to now we have been building RESTful APIs and classical
web applications that try to be as RESTful as possible.
Using websockets you are building a completely different
type of distributed system.</p><p>See <a href="https://stackoverflow.com/questions/29925955/what-are-the-pitfalls-of-using-websockets-in-place-of-restful-http#answer-29933428">jfriend00(2015) answer on stackoverflow</a> for an in depth comparison.</p></section>
<section><a class='slide_break' href='node_websockets.html#slide-2'>▻</a>
<h2 id="socket-io"><a class="anchorlink" href="#socket-io"><span>3</span> Socket.io</a></h2><p>socket.io
Library for both server and client side JS code
Needs express as a basis</p><div class="interstitial warning"><p>socket.io will automatically host some files needed on the client side under the URL /socket.io/  Do not attempt to change this!</p></div><p>Load in client:</p><div class="interstitial code">
<pre><code class="highlight plaintext">&lt;script src="socket.io/socket.io.js"&gt;&lt;/script&gt;
</code></pre>
<button class="clipboard-button" data-clipboard-text="<script src=&quot;socket.io/socket.io.js&quot;></script>
">Copy</button>
</div>
</section>
<section><a class='slide_break' href='node_websockets.html#slide-3'>▻</a>
<h2 id="overview"><a class="anchorlink" href="#overview"><span>4</span> Overview</a></h2><div class="interstitial code">
<pre><code class="highlight plaintext">const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 5000;

app.use(express.static('public'));

http.listen(port, function(){
  console.log("webserver started");
});

io.on(…)

// export app so we can test it
exports = module.exports = app;

</code></pre>
<button class="clipboard-button" data-clipboard-text="const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 5000;

app.use(express.static('public'));

http.listen(port, function(){
  console.log(&quot;webserver started&quot;);
});

io.on(…)

// export app so we can test it
exports = module.exports = app;

">Copy</button>
</div>
</section>
<section><a class='slide_break' href='node_websockets.html#slide-4'>▻</a>
<h2 id="client"><a class="anchorlink" href="#client"><span>5</span> Client</a></h2><div class="interstitial code">
<pre><code class="highlight plaintext">&lt;ul id="messages"&gt;&lt;/ul&gt;
&lt;form action=""&gt;
  &lt;input id="m" autocomplete="off" /&gt;&lt;button&gt;Send&lt;/button&gt;
&lt;/form&gt;
&lt;script src="https://code.jquery.com/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
&lt;script src="socket.io/socket.io.js"&gt;&lt;/script&gt;
</code></pre>
<button class="clipboard-button" data-clipboard-text="<ul id=&quot;messages&quot;></ul>
<form action=&quot;&quot;>
  <input id=&quot;m&quot; autocomplete=&quot;off&quot; /><button>Send</button>
</form>
<script src=&quot;https://code.jquery.com/jquery-2.2.3.min.js&quot;></script>
<script src=&quot;socket.io/socket.io.js&quot;></script>
">Copy</button>
</div>
<p>Sending messages to the server:</p><div class="interstitial code">
<pre><code class="highlight plaintext">&lt;script&gt;
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
&lt;/script&gt;
</code></pre>
<button class="clipboard-button" data-clipboard-text="<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
</script>
">Copy</button>
</div>
<p>Recieving messages from the server:</p><div class="interstitial code">
<pre><code class="highlight plaintext">  socket.on('chat message', function(msg){
    $('#messages').append($('&lt;li&gt;').text(msg));
  });
</code></pre>
<button class="clipboard-button" data-clipboard-text="  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
">Copy</button>
</div>
</section>
<section><a class='slide_break' href='node_websockets.html#slide-5'>▻</a>
<h2 id="server"><a class="anchorlink" href="#server"><span>6</span> Server</a></h2><div class="interstitial code">
<pre><code class="highlight plaintext">io.on('connection', function(socket){
  console.log('a user connected');

  socket.on('chat message', function(msg){
    console.log(`got message '${msg}', broadcasting to all`);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});
</code></pre>
<button class="clipboard-button" data-clipboard-text="io.on('connection', function(socket){
  console.log('a user connected');

  socket.on('chat message', function(msg){
    console.log(`got message '${msg}', broadcasting to all`);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});
">Copy</button>
</div>
</section>
<section><a class='slide_break' href='node_websockets.html#slide-6'>▻</a>
<h2 id="testing-the-server"><a class="anchorlink" href="#testing-the-server"><span>7</span> Testing the Server</a></h2><div class="interstitial code">
<pre><code class="highlight plaintext">describe("Auction Server",function(){
  it('Should echo chat massages back to user', function(done){
    var client1 = io.connect(socketURL, options);

    client1.on('connect', function(data){
      client1.emit('chat message', 'hello world');
      client1.on('chat message', function(data){
        console.log('got back ' + data);
        data.should.equal('hello world');
        client1.disconnect();
        done();
      });
    });
  });
});

</code></pre>
<button class="clipboard-button" data-clipboard-text="describe(&quot;Auction Server&quot;,function(){
  it('Should echo chat massages back to user', function(done){
    var client1 = io.connect(socketURL, options);

    client1.on('connect', function(data){
      client1.emit('chat message', 'hello world');
      client1.on('chat message', function(data){
        console.log('got back ' + data);
        data.should.equal('hello world');
        client1.disconnect();
        done();
      });
    });
  });
});

">Copy</button>
</div>
</section>
<section><a class='slide_break' href='node_websockets.html#slide-7'>▻</a>
<h2 id="see-also"><a class="anchorlink" href="#see-also"><span>8</span> See Also</a></h2>
<ul>
<li><a href="https://tools.ietf.org/html/rfc6455">RFC 6455</a></li>
</ul>
</div></section>
      </div>
    </div>
    <!-- End slides. -->
    <!-- Required JS files. -->
		<script src="javascripts/reveal.js"></script>
		<script src="javascripts/search.js"></script>
		<script src="javascripts/markdown.js"></script>

    <script>
    // Also available as an ES module, see:
    // https://revealjs.com/initialization/
    Reveal.initialize({
      controls: false,
      progress: true,
      center: false,
      hash: true,

      // The "normal" size of the presentation, aspect ratio will
      // be preserved when the presentation is scaled to fit different
      // resolutions. Can be specified using percentage units.
      width: 1000,
      height: 600,
      disableLayout: false,

      // Factor of the display size that should remain empty around
      // the content
      margin: 0.05,

      // Bounds for smallest/largest possible scale to apply to content
      minScale: 0.2,
      maxScale: 10.0,

      keyboard: {
        27: () => {
          // do something custom when ESC is pressed
          var new_url = window.location.pathname.replace('slides_', '') + window.location.hash.replace('/','slide-');
          window.location = new_url;
        },
        191: 'toggleHelp',
        13: 'next', // go to the next slide when the ENTER key is pressed
      },

      // Learn about plugins: https://revealjs.com/plugins/
      plugins: [ RevealSearch, RevealMarkdown ]
    });
    </script>
</body>

</html>