WebSockets: Embracing the real-time Web

Transcript

1. WEBSOCKETS Embracing the real-time Web Rob Hawkes
3. Created by Phil Banks (@emirpprime)
5. What are WebSockets? Nothing to do with plugs
6. Why use WebSockets? They’re pretty cool
7. Multiplayer Web gaming Communicating between players
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
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"); }); });
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
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