Presentation for a course in Sheridan College's Interactive Media Management program.

1. WebSockets
Julien LaPointe

2. What is a WebSocket?
• Communication protocol used to send / receive data on the Internet
• Like HTTP, but on steroids... WebSockets are wayyy more efficient
• Persistent 2-way connection between browser <--> server
• Easy to build real-time applications:
• Chat
• Notifications
• Online games
• Financial trading
• Data visualization dashboards
• Live maps
• Collaboration apps

3. Half-duplex (like walkie-talkie) Full-duplex (like phone)
Traffic flows in 1 direction at a time Bi-directional traffic flow
HTTP WebSocket
Roger that.
Over and out...
...Who’s Roger? I knooooww
Right??!!!
Like
totalllyyyy
For real??

4. Half-duplex (like walkie-talkie) Full-duplex (like phone)
Traffic flows in 1 direction at a time Bi-directional traffic flow
Connection is typically closes after 1
request / response pair
Connection stays open
1. Request from client to server
2. Response from server to client
Both client and server are
simultaneously “emitting” and
“listening” (.on events)
Headers (1000s of bytes) Uses “frames” (2 bytes)
150ms to establish new TCP connection
for each HTTP message
50ms for message transmission
Polling overhead (constantly sending
messages to check if new data is ready)
No polling overheard (only sends
messages when there is data to send)
HTTP WebSocket

5. Life Before WebSockets...
Are we
there
yet?
Are we
there
yet?Are we
there
yet?
Are we
there
yet?Are we
there
yet?
• Simulate real-time
communication with HTTP
• AJAX: browser sends requests at
regular intervals to check for
updates
but headers cause latency and
polling is very resource intensive
• Comet: server push technique
but complex, non-standardized
implementation
• Streaming: more efficient than
AJAX and Comet
but only 1 direction

6. How do WebSockets work?
Heroku Server
Your Phone
Your Computer
1. Client sends HTTP GET request to URL
(https://socketio-experimentia.herokuapp.com/)

7. How do WebSockets work?
Heroku Server
Your Phone
Your Computer
2. Server responds with requested files, which include
information for connecting to socket server
1. Client sends HTTP GET request to URL
(https://socketio-experimentia.herokuapp.com/)

8. How do WebSockets work?
Heroku Server
Your Phone
Your Computer
2. Server responds with requested files, which include
information for connecting to socket server
1. Client sends HTTP GET request to URL
(https://socketio-experimentia.herokuapp.com/)
3. Client sends HTTP GET request with “Connection:
Upgrade” in the header, server confirms support, and
connection is upgraded to WebSockets
(called the “handshake”) until one side disconnects

9. Is there ANYTHING bad about WebSockets?
• Not all browsers support WebSockets
• Different browsers treat WebSockets differently
Released March 8, 2017
First supported March 2, 2016
Support as of March 8, 2017

10. Socket.io
• 2 JavaScript libraries:
• socket.io-client (front-end)
• socket.io (back-end using NodeJS)
• Cross-browser compatibility by automatically using the best protocol
for the user’s browser
• WebSockets
• Comet
• Flash

11. Socket.io Server Configuration
// add the HTTP server
var http = require('http');
// add Express server framework for NodeJS
var express = require('express');
// add Socket.io server framework
var socketIO = require('socket.io');
// create instance of Express
var app = express();
// create Express HTTP server
var server = http.createServer(app);
// tell Express HTTP server which port to run on
server.listen(8080);
// tell Socket.io to add event listeners to Express HTTP server
var io = socketIO().listen(server);
1. Create HTTP server
2. Add WebSocket support
to HTTP server

12. Socket.io Server Code
// listens for new socket connections from clients
// triggers a callback function when ‘connection’ event occurs
io.sockets.on('connection', function(socket) {
// do stuff (ex. keep track of # of socket connections)
connections.push(socket);
// emit / broadcast custom event and data (payload) to client
io.sockets.emit(’updateStudents', payload);
}
// listen for custom events “emitted” by client
socket.on('join', function(payload) {
var newStudent = {
socketID: this.id,
name: payload.name
}
this.emit('joined', newStudent);
}
1. Listen
2. Emit
1. Listen
2. Emit

13. Socket.io Client Code
// add Socket.io client framework
var io = require(’socket.io-client');
// add Socket.io client framework
this.socket = io('http://localhost:3000');
// listen for socket connection from server
this.socket.on(’connect', function() {
var newStudent = {name: nameFromForm, type: “student”};
// emit custom event with data (newStudent) back to server
this.emit('join', newStudent);
}
// listen for custom events with data (payload) “emitted” by server
this.socket.on('joined', function(payload) {
// do stuff with payload...
}
1. Listen
2. Emit

14. Socket.io Demo
• Socket.io, Express / NodeJS, React, D3, Bootstrap, Webpack
• Lynda.com: Building a Polling App with Socket IO and React.js

15. Questions?
Pick me!
Pick me!
Pick me!
Pick me!
Pick me!
Pick me!
Pick me!
Pick me!

16. Key References
• https://www.lynda.com/Web-Development-tutorials/Building-Polling-
App-Socket-IO-React-js/387145-2.html
• https://socket.io/get-started/chat/
• http://www.jonahnisenson.com/what-are-websockets-and-why-do-i-
need-socket-io/
• https://nodesource.com/blog/understanding-socketio/
• http://enterprisewebbook.com/ch8_websockets.html
• http://blog.teamtreehouse.com/an-introduction-to-websockets
• https://www.pubnub.com/blog/2015-01-05-websockets-vs-rest-api-
understanding-the-difference/