Polling is the new WebSocket! In this talk I'll scratch the surface about the state of the real-time web the issues that surrounds it and the lessons we have learned from building Socket.IO, and how we apply them to Engine.IO and Socket.IO 1.0
no WebSockets? WebSockets? OMG, dude, polling is so 1995! Why no WebSockets? WebSockets? OMG, dude, polling is so 1995! Why no WebSockets? WebSockets? OMG, dude, polling is so 1995! Why no
{ // Wrap sends in a setTimeout out to allow the // readyState to be correctly set to closed setTimeout(function () { ws.send("Sup AmsterdamJS"); }); }; 14
{ // Wrap sends in a setTimeout out to allow the // readyState to be correctly set to closed. But // Only have this delay on mobile devices if (mobile) return setTimeout(function () { ws.send("Sup AmsterdamJS"); }); ws.send("Sup AmsterdamJS"); }; 15
phones to filter out // WebSockets if ( ~ua.indexOf('mobile') || ~ua.indexOf('android') || ~ua.indexOf('ios') || .. and more .. ) { // Don't use WebSockets } 17
connections. Not only during page load, but also after page load. The issue remains the same. This is fixed in Firefox Nightly (20) all other version are affected. 18
latest RFC specification. FlashSocket Fallback for browser that do not support WebSockets. A Flash file that emulates the WebSocket protocol so you can still bi-directional communication. HTML File Basically it’s a streaming iframe wrapped with some ActiveX magic. Sending data is done through XHR POST. Internet Explorer only, does not do cross domain. XHR Polling Long polling. Cross domain usage depends on the browser. JSONP Polling Injects small scripts in the page for fetching data and uses iframe’s and form posts to send the data to the server. ⇆
installed version to your package.json file. Additionally you can also install the socket.io-client module if you want to connect to server from within node.js. npm install socket.io --save
socket.on('another event', function (data) { // Client emitted a custom event socket.emit('custom event', data); }); socket.on('disconnect', function () { // Socket disconnected }); socket.send('hi there'); // Automatic JSON encoding using a json flag socket.json.send({ foo: 'bar' }); // Broadcast the message/event to every // connected user socket.broadcast.json.send({ foo: 'bar' }); }); Creating: The listen method accepts either a HTTP server instance or it will create one for you with listens on the supplied port number
socket.on('another event', function (data) { // Client emitted a custom event socket.emit('custom event', data); }); socket.on('disconnect', function () { // Socket disconnected }); socket.send('hi there'); // Automatic JSON encoding using a json flag socket.json.send({ foo: 'bar' }); // Broadcast the message/event to every // connected user socket.broadcast.json.send({ foo: 'bar' }); }); Namespaces: the io.sockets points to the default namespace of your socket.io server. One server can have multiple namespaces or “endpoints”.
socket.on('another event', function (data) { // Client emitted a custom event socket.emit('custom event', data); }); socket.on('disconnect', function () { // Socket disconnected }); socket.send('hi there'); // Automatic JSON encoding using a json flag socket.json.send({ foo: 'bar' }); // Broadcast the message/event to every // connected user socket.broadcast.json.send({ foo: 'bar' }); }); Flags: the broadcast and json are instructions to socket.io on how to send this message. But there are more: - json: Automatically JSON encoding - broadcast: Send message to every connected user except your self. - volatile: Send message, we don’t care if it get’s lost in the transaction. - in(<room>): Send the message to everybody that is in this room.
= io.connect('http://domain.com'); socket.on('connect', function () { // Socket connected socket.json.send({ foo: 'bar'}); }); socket.on('custom event', function (data) { // Server emitted a custom event socket.emit('another event', data); }); socket.on('disconnect', function () { // socket disconnected }); socket.send('hi there'); Crossdomain: When you don’t supply it with a URL it will connect to page that loads the socket.io code and supply it with a custom domain to do cross domain connections.
server.on('connection', function (socket) { socket.on('message', function () { // New message from the client }); socket.on('close', function () { // Connection closed }); socket.send('utf 8 string'); });
server.on('connection', function (socket) { socket.on('message', function () { // New message from the client }); socket.on('close', function () { // Connection closed }); socket.send('utf 8 string'); }); MIA: On the server side there are a couple of differences, it misses a lot of “features” that were build in. Like namespaces, rooms, automatic JSON encoding etc. But in return you get a really low level API
{ socket.onmessage = function (data) { // New message from the server }; socket.onclose = function () { // Connection closed }; }; Component: The Engine.IO client is now component based. Component is a small JavaScript framework that brings node style dependencies and requires to the front-end. MIA: Same as on the server side, it misses a lot of features like no events, json encoding, namespaces, authentication etc.