WebSockets: Embracing the real-time Web

Transcript

1. WEBSOCKETS
   Embracing the real-time Web
   Rob Hawkes
   

   View Slide

2. View Slide

3. Created by Phil Banks (@emirpprime)
   

   View Slide

4. View Slide

5. What are WebSockets?
   Nothing to do with plugs
   

   View Slide

6. Why use WebSockets?
   They’re pretty cool
   

   View Slide

7. Multiplayer Web gaming
   Communicating between players
   

   View Slide

8. View Slide

9. Live streaming content
   Live and instant updates
   

   View Slide

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

    View Slide

11. Browser support
    Pretty decent, but not ideal
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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);
    };
    

    View Slide

16. var ws = new WebSocket("ws://127.0.0.1:8080");
    ...
    ws.send(“Hello, world!”);
    

    View Slide

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

    View Slide

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

    View Slide

19. View Slide

20. npm install websocket
    

    View Slide

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
    });
    

    View Slide

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");
    });
    });
    

    View Slide

23. View Slide

24. Fallback for old browsers
    Now you can support everyone
    

    View Slide

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

    View Slide

26. Socket.IO is just awesome
    It goes beyond the basics
    

    View Slide

27. WebSockets gotchas
    These tripped me up the first time
    

    View Slide

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

    View Slide

29. View Slide

30. View Slide

31. What WebSockets needs
    The future is bright-ish
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. THANK YOU
    Any questions?
    Rob Hawkes
    @robhawkes
    

    View Slide