Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
Websockets Bring Light At The End Of The Tunnel
- 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