Websockets 101: using socket.io

About me

@joel__lord

http://github.com/joellord

jlord@macadamian.com

What's that ?

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.

Browser support

Firefox 11+
Chrome 11+
Safari 6+
Opera 12.10
Android Browser 4.4
Internet Explorer 10+

Pros

Bi-directional data transfers
Fast
Low bandwith

Cons

...

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

Websocket libraries

Ratchet (php)
Jetty (Java)
socket.io (node.js)

Using socket.io

Easy stuff !

Server implementation

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

Client implementation

<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>

Code time !

Questions ?

@joel__lord

http://github.com/joellord

jlord@macadamian.com