More and more, people seem to be obsessed with real-time data. But what does real-time mean in the world of REST servers and one-way communication? Most modern web applications are now either displaying a snapshot of data at a given time or use a polling mechanism to update series of data at a given interval.In this talk, you will learn about the power of WebSockets and how they can (and should!) be used in your modern web applications. In these 45 minutes, I will go through the process of building a Node server that can push data to multiple clients in real-time. You will see how this can be easy using the socket.io library.

1. www.spiria.com
Websockets Bring Light at the End of
the Tunnel
PresentedBy
JOEL LORD
MidwestJs
August 11th,2016

2. @joel__lord
#midwestjs
JOEL LORD
About me,eh?
• Javascript Junkie
• Tinkerer
• Technology enthusiast

3. @joel__lord
#midwestjs

4. @joel__lord
#midwestjs
JOEL LORD
About me,eh?
• Javascript Junkie
• Tinkerer
• Technology enthusiast

5. @joel__lord
#midwestjs
Agenda
• What exists and what they provide
• Performance
• Pros and Cons
• Real world cases
• The API
• Intro to socket.io
• Live demos !

6. @joel__lord
#midwestjs
Agenda
• What exists and what they provide
• Performance
• Pros and Cons
• Real world cases
• The API
• Intro to socket.io
• Live demos !

7. What Are They?
WEBSOCKETS

8. @joel__lord
#midwestjs
WebSocket is a protocol providing full-duplex
communications channels over a single TCP
connection.
The WebSocket protocol was standardized by the IETF as RFC 6455
in 2011, and the WebSocketAPI in Web IDL is being standardized by
the W3C.

9. @joel__lord
#midwestjs
Typical real-time
NORMAL HTTP REQUESTS

10. @joel__lord
#midwestjs
Typical real-time
POLLING

11. @joel__lord
#midwestjs
Typical real-time
LONG-POLLING

12. @joel__lord
#midwestjs
Typical real-time
WEBSOCKETS

13. Typical real-time
WHAT ABOUT SERVER-SIDE EVENTS?

14. @joel__lord
#midwestjs
Performance
GIMME BENCHMARKS !
Time (in milliseconds) taken to process N messages for a constant payload

15. @joel__lord
#midwestjs
Performance
GIMME BENCHMARKS !
Time to process a fixed number of messages with varying payload size.

16. @joel__lord
#midwestjs
Performance
GIMME BENCHMARKS !
Run your own tests
Thor: https://github.com/observing/thor
Websocket-bench: https://github.com/M6Web/websocket-bench

17. Pros and Cons

18. @joel__lord
#midwestjs
PROS Bi-directional data transfers
Fast
Low bandwith
Detects connection and disconnection

19. @joel__lord
#midwestjs
CONS …

20. @joel__lord
#midwestjs
CONS Lose the caching capabilities built in XHR and HTTP
Architectural changes in the application

21. @joel__lord
#midwestjs
WebSockets in the Wild
REAL WORLD CASES
• Real time synchronization of data amongst a group of users (trello.com)
• Live feeds (Twitter stream)
• Long server processes and providing ETAs to users
• Multiplayer HTML5 games
• Chat clients (Slack)

22. @joel__lord
#midwestjs
Using WebSockets with HTML5
ESTABLISHING A CONNECTION
var connection = new WebSocket('ws://somedomain/path/')

23. @joel__lord
#midwestjs
Using WebSockets with HTML5
EVENTS
connection.onopen = function(e) {
console.log("Connected");
};
connection.onmessage = function(e) {
console.log( "Received: " + e.data);
};
connection.onclose = function(e) {
console.log("Connection closed");
};

24. @joel__lord
#midwestjs
Using WebSockets with HTML5
SENDING DATA TO THE SERVER
//Strings
connection.send('this is a string');
//Array Buffers
var image = aCanvas.getImageData(0, 0, 640, 480);
var binary = new Uint8Array(image.data.length);
for (var i = 0; i < image.data.length; i++) {
binary[i] = image.data[i];
}
connection.send(binary.buffer);
//Blobs
var myFile = document.querySelector('input[type="file"]').files[0];
connection.send(myFile);
//JSON objects ?
var jsonObject = JSON.stringify({"data": "value"});
connection.sent(jsonObject);

25. @joel__lord
#midwestjs
Getting Started
VARIOUS IMPLEMENTATIONS
• PubNub or Pusher (cloud)
• Ratchet (PHP)
• Jetty (Java)
• socket.io (node.js)

26. @joel__lord
#midwestjs
HerecomesSocket.io !
WHAT’S SO COOL ABOUT IT?
• Server and client-side implementation
• Falls back to long polling when necessary (IE 9 😱)
• Adds features like heartbeats, timeouts, and disconnection support not provided in
WebSocket API
• Easy stuff !

27. @joel__lord
#midwestjs
HerecomesSocket.io !
CLIENT SIDE
<body>
<input type="text" id="textField" />
<button type="button" id="sendMsg">Send</button>
<textarea id="msgBox"></textarea>
</body>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
document.getElementById("sendMsg").onclick = function() {
socket.emit("messageFromClient", {
text: document.getElementById("textField").value
});
};
socket.on("messageFromServer", function(data) {
document.getElementById("msgBox").value += data.text;
});
</script>

28. @joel__lord
#midwestjs
HerecomesSocket.io !
SERVER SIDE
//Express server setup
var express = require("express");
var app = express();
var server = require("http").createServer(app);
var port = 8888;
server.listen(port, function () {
console.log("Server started on port " + port);
});
app.use(express.static(__dirname + "/../"));
//Socket setup
var io = require("socket.io")(server);
io.on("connection", function (socket) {
socket.on("messageFromClient", function (data) {
socket.broadcast("messageFromServer", data);
});
});

29. IT’S CODING TIME!
LET’S GET SERIOUS

30. QUESTIONS?

31. DOCUMENT CONFIDENTIEL, TOUT DROIT RÉSERVÉ
PRESENTED BY
That’s all folks !
JOEL LORD
August11th, 2016
TWITTER: @JOEL__LORD
GITHUB: HTTP://GITHUB.COM/JOELLORD