$30 off During Our Annual Pro Sale. View Details »

WebSockets: Embracing the real-time Web

robhawkes
August 23, 2011

WebSockets: Embracing the real-time Web

robhawkes

August 23, 2011
Tweet

More Decks by robhawkes

Other Decks in Programming

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