WebSockets: Embracing the real-time Web

E76911cbe088e5b850d966de3fc7435b?s=47 robhawkes
August 23, 2011

WebSockets: Embracing the real-time Web

E76911cbe088e5b850d966de3fc7435b?s=128

robhawkes

August 23, 2011
Tweet

Transcript

  1. WEBSOCKETS Embracing the real-time Web Rob Hawkes

  2. None
  3. Created by Phil Banks (@emirpprime)

  4. None
  5. What are WebSockets? Nothing to do with plugs

  6. Why use WebSockets? They’re pretty cool

  7. Multiplayer Web gaming Communicating between players

  8. None
  9. Live streaming content Live and instant updates

  10. Draft-76, Draft-06 & Draft-07 Knowing the difference is important

  11. Browser support Pretty decent, but not ideal

  12. Using WebSockets is easy You gotta love a simple JavaScript

    API
  13. var ws = new WebSocket("ws://127.0.0.1:8080");

  14. var ws = new MozWebSocket("ws://127.0.0.1:8080");

  15. var ws = new WebSocket("ws://127.0.0.1:8080"); ws.onopen = function() { console.log("Connected

    to WebSocket server"); }; ws.onclose = function() { console.log("Disconnected"); }; ws.onmessage = function(msg) { console.log("Message received: "+msg.data); };
  16. var ws = new WebSocket("ws://127.0.0.1:8080"); ... ws.send(“Hello, world!”);

  17. var ws = new WebSocket("ws://127.0.0.1:8080"); ... ws.close();

  18. WebSockets on the server You need something to connect to

  19. None
  20. npm install websocket

  21. var WebSocketServer = require("websocket").server; var http = require("http"); var server

    = http.createServer(function(request, response) {}); server.listen(8080, function() { console.log("Server is listening on port 8080"); }); var ws = new WebSocketServer({ httpServer: server, autoAcceptConnections: true });
  22. ... ws.on("connect", function(conn) { console.log("Connection accepted"); conn.on("message", function(message) { if

    (message.type === "utf8") { console.log("Received Message: "+message.utf8Data); conn.sendUTF(message.utf8Data); }; }); conn.on("close", function(conn) { console.log("Client "+conn.remoteAddress+" disconnected"); }); });
  23. None
  24. Fallback for old browsers Now you can support everyone

  25. var io = require("socket.io").listen(8080); io.sockets.on("connection", function (socket) { socket.on("message", function

    (data) { socket.emit(data); }); });
  26. Socket.IO is just awesome It goes beyond the basics

  27. WebSockets gotchas These tripped me up the first time

  28. Using external services You don’t always have to roll your

    own
  29. None
  30. None
  31. What WebSockets needs The future is bright-ish

  32. Rawkets.com HTML5 & WebSockets game. Twitter sentiment analysis Delving into

    your soul. RECENT PROJECTS Rawkes.com Personal website and blog MORE COOL STUFF ExplicitWeb.co.uk Web development podcast. Mozilla Technical Evangelist My job ROB HAWKES @robhawkes
  33. DEV DERBY Experimenting with the latest Web technologies Manipulate video

    with canvas DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY Every month This month is HTML5 video Win prizes (like an Android) Next month is all about touch
  34. THANK YOU Any questions? Rob Hawkes @robhawkes