Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
www.spiria.com Websockets Bring Light at the End of the Tunnel PresentedBy JOEL LORD MidwestJs August 11th,2016
@joel__lord #midwestjs JOEL LORD About me,eh? • Javascript Junkie • Tinkerer • Technology enthusiast
@joel__lord #midwestjs
@joel__lord #midwestjs JOEL LORD About me,eh? • Javascript Junkie • Tinkerer • Technology enthusiast
@joel__lord #midwestjs Agenda • What exists and what they provide • Performance • Pros and Cons • Real world cases • The A...
@joel__lord #midwestjs Agenda • What exists and what they provide • Performance • Pros and Cons • Real world cases • The A...
What Are They? WEBSOCKETS
@joel__lord #midwestjs WebSocket is a protocol providing full-duplex communications channels over a single TCP connection....
@joel__lord #midwestjs Typical real-time NORMAL HTTP REQUESTS
@joel__lord #midwestjs Typical real-time POLLING
@joel__lord #midwestjs Typical real-time LONG-POLLING
@joel__lord #midwestjs Typical real-time WEBSOCKETS
Typical real-time WHAT ABOUT SERVER-SIDE EVENTS?
@joel__lord #midwestjs Performance GIMME BENCHMARKS ! Time (in milliseconds) taken to process N messages for a constant pa...
@joel__lord #midwestjs Performance GIMME BENCHMARKS ! Time to process a fixed number of messages with varying payload size.
@joel__lord #midwestjs Performance GIMME BENCHMARKS ! Run your own tests Thor: https://github.com/observing/thor Websocket...
Pros and Cons
@joel__lord #midwestjs PROS Bi-directional data transfers Fast Low bandwith Detects connection and disconnection
@joel__lord #midwestjs CONS …
@joel__lord #midwestjs CONS Lose the caching capabilities built in XHR and HTTP Architectural changes in the application
@joel__lord #midwestjs WebSockets in the Wild REAL WORLD CASES • Real time synchronization of data amongst a group of user...
@joel__lord #midwestjs Using WebSockets with HTML5 ESTABLISHING A CONNECTION var connection = new WebSocket('ws://somedoma...
@joel__lord #midwestjs Using WebSockets with HTML5 EVENTS connection.onopen = function(e) { console.log("Connected"); }; c...
@joel__lord #midwestjs Using WebSockets with HTML5 SENDING DATA TO THE SERVER //Strings connection.send('this is a string'...
@joel__lord #midwestjs Getting Started VARIOUS IMPLEMENTATIONS • PubNub or Pusher (cloud) • Ratchet (PHP) • Jetty (Java) •...
@joel__lord #midwestjs HerecomesSocket.io ! WHAT’S SO COOL ABOUT IT? • Server and client-side implementation • Falls back ...
@joel__lord #midwestjs HerecomesSocket.io ! CLIENT SIDE <body> <input type="text" id="textField" /> <button type="button" ...
@joel__lord #midwestjs HerecomesSocket.io ! SERVER SIDE //Express server setup var express = require("express"); var app =...
IT’S CODING TIME! LET’S GET SERIOUS
QUESTIONS?
DOCUMENT CONFIDENTIEL, TOUT DROIT RÉSERVÉ PRESENTED BY That’s all folks ! JOEL LORD August11th, 2016 TWITTER: @JOEL__LORD ...
Upcoming SlideShare
Loading in …5
×

Websockets Bring Light At The End Of The Tunnel

144 views

Published on

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.

Published in: Engineering
no profile picture user

  • Be the first to comment

Websockets Bring Light At The End Of The Tunnel

  1. 1. www.spiria.com Websockets Bring Light at the End of the Tunnel PresentedBy JOEL LORD MidwestJs August 11th,2016
  2. 2. @joel__lord #midwestjs JOEL LORD About me,eh? • Javascript Junkie • Tinkerer • Technology enthusiast
  3. 3. @joel__lord #midwestjs
  4. 4. @joel__lord #midwestjs JOEL LORD About me,eh? • Javascript Junkie • Tinkerer • Technology enthusiast
  5. 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. 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. 7. What Are They? WEBSOCKETS
  8. 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. 9. @joel__lord #midwestjs Typical real-time NORMAL HTTP REQUESTS
  10. 10. @joel__lord #midwestjs Typical real-time POLLING
  11. 11. @joel__lord #midwestjs Typical real-time LONG-POLLING
  12. 12. @joel__lord #midwestjs Typical real-time WEBSOCKETS
  13. 13. Typical real-time WHAT ABOUT SERVER-SIDE EVENTS?
  14. 14. @joel__lord #midwestjs Performance GIMME BENCHMARKS ! Time (in milliseconds) taken to process N messages for a constant payload
  15. 15. @joel__lord #midwestjs Performance GIMME BENCHMARKS ! Time to process a fixed number of messages with varying payload size.
  16. 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. 17. Pros and Cons
  18. 18. @joel__lord #midwestjs PROS Bi-directional data transfers Fast Low bandwith Detects connection and disconnection
  19. 19. @joel__lord #midwestjs CONS …
  20. 20. @joel__lord #midwestjs CONS Lose the caching capabilities built in XHR and HTTP Architectural changes in the application
  21. 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. 22. @joel__lord #midwestjs Using WebSockets with HTML5 ESTABLISHING A CONNECTION var connection = new WebSocket('ws://somedomain/path/')
  23. 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. 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. 25. @joel__lord #midwestjs Getting Started VARIOUS IMPLEMENTATIONS • PubNub or Pusher (cloud) • Ratchet (PHP) • Jetty (Java) • socket.io (node.js)
  26. 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. 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. 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. 29. IT’S CODING TIME! LET’S GET SERIOUS
  30. 30. QUESTIONS?
  31. 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

×