Socket.IO Cookbook

(1)

Tyson Cadenhead

Quick answers to common problems

Over 40 recipes to help you

create real-time JavaScript

applications using the robust Socket.IO framework

(2)

In this package, you will

In this package, you will find:

find:



The author biography



A preview chapter from the book,

A preview chapter from the book, Chapter 1

Chapter 1 'Wiring It Up'

'Wiring It Up'



A synopsis of the book’s content



(3)

About the Author

Tyson Cadenhead

works as a senior JavaScript engineer at Aloompa in Nashville, works as a senior JavaScript engineer at Aloompa in Nashville, T

Tennessee. He has dedicated his ennessee. He has dedicated his profeprofessional career to building ssional career to building large-scale applications inlarge-scale applications in JavaScript and Node. Tyson addresses audiences at

JavaScript and Node. Tyson addresses audiences at various conferencevarious conferences and s and programmingprogramming meetups on how to build real-time web applications

meetups on how to build real-time web applications with Socket.IO or Meteorwith Socket.IO or Meteor.js. He blogs .js. He blogs onon topics such as JavaScript and

topics such as JavaScript and web technologies atweb technologies at

http://www.tysoncadenhead.com

.. Ty

Tyson lives in the son lives in the greater Nashville area with greater Nashville area with his wife and his wife and two sons, where he enjoystwo sons, where he enjoys gardening, raising chickens, reading philosophy and economics books, and

(4)

Preface

Socket.IO is an excellent library for real-time messaging

Socket.IO is an excellent library for real-time messaging between the client side and between the client side and the serverthe server side. Whether you want to create a chat room in your browser, reload your hybrid mobile

side. Whether you want to create a chat room in your browser, reload your hybrid mobile application, or push fresh data to an

application, or push fresh data to an internal dashboard, this book will show you how to do it.internal dashboard, this book will show you how to do it.

What this book

cov

ers

Chapter 1

Chapter 1,, Wiring It UpWiring It Up, provides a quick introduction to Socket.IO. It tells you how to get up, provides a quick introduction to Socket.IO. It tells you how to get up and running with a Node ser

and running with a Node serverver. This chapter concludes with debugging tips for the server and. This chapter concludes with debugging tips for the server and the client.

the client. Chapter 2

Chapter 2,, Creating Real-Time DashboardsCreating Real-Time Dashboards, talks about how to stream data from the ser, talks about how to stream data from the serverver to the client. It

to the client. It covers how to emit MongoDB data and covers how to emit MongoDB data and how to handle Socket.IO connectionhow to handle Socket.IO connection timeouts.

timeouts. Chapter 3

Chapter 3,, Having Two-Way ConversationsHaving Two-Way Conversations, provides several recipes on how to build a two-way, provides several recipes on how to build a two-way communication. From the quintessential chat room example to a fun recipe on how to create a communication. From the quintessential chat room example to a fun recipe on how to create a real-time tic-tac-toe game, it includes

real-time tic-tac-toe game, it includes several other topics.several other topics. Chapter 4

Chapter 4,, Building a Room with a View Building a Room with a View , explores views and namespaces and , explores views and namespaces and how they can behow they can be used to target your events to speci

used to target your events to speciﬁﬁc consumers.c consumers. Chapter 5

Chapter 5,, Securing Your DataSecuring Your Data, takes a , takes a look at how to look at how to secure the Socket.IO communicationsecure the Socket.IO communication with various forms of authentication, including how to

with various forms of authentication, including how to lock down the HTTP lock down the HTTP referrer and how toreferrer and how to use secure web sockets.

use secure web sockets. Chapter 6

Chapter 6,, Performing a Load Balancing ActPerforming a Load Balancing Act, covers various techniques for load-balancing, covers various techniques for load-balancing Socket.IO, focusing on technologies such as Redis, Memcached, and RabbitMQ.

(5)

Preface Preface Chapter 7

Chapter 7,, Streaming Binary DataStreaming Binary Data, explores topics ranging from emitting images as , explores topics ranging from emitting images as data todata to streaming video and audio.

streaming video and audio. Chapter 8

Chapter 8,, Integrating With Mobile ApplicationsIntegrating With Mobile Applications, talks about , talks about various techniques for usingvarious techniques for using Socket.IO in mobile applications. It al

Socket.IO in mobile applications. It also provides a recipe for how to trigger so provides a recipe for how to trigger hot deployshot deploys from Socket.IO.

(6)

Wiring It Up

In this chapter, we will cover the following recipes: In this chapter, we will cover the following recipes:



 Creating a Node HTTP server with Socket.IOCreating a Node HTTP server with Socket.IO 

 Creating an Express server with Creating an Express server with Socket.IOSocket.IO 

 Using Socket.IO as a cross-browser WebSocketUsing Socket.IO as a cross-browser WebSocket 

 Debugging on the clientDebugging on the client 

 Debugging on the serverDebugging on the server

Introduction

Socket.IO is a powerful tool for creating

Socket.IO is a powerful tool for creating real-time applications with bidirectionalreal-time applications with bidirectional communication betwee

communication between the sern the server side and the ver side and the client side. It client side. It leverages the power ofleverages the power of WebSock

WebSockets along with ets along with several fallbacks, including JSON long polling several fallbacks, including JSON long polling and JSONP longand JSONP long polling through a single uni

polling through a single uniﬁﬁed API. It can ed API. It can be used to create bidirectional interactions,be used to create bidirectional interactions, such as real-time

such as real-time dashboards, chat applications, and dashboards, chat applications, and multiplayer games.multiplayer games.

In my previous jobs, I created several real-time JavaScript dashboards predating the In my previous jobs, I created several real-time JavaScript dashboards predating the Socket.IO library. During that time, I felt the pain of not having a good

Socket.IO library. During that time, I felt the pain of not having a good solution for truesolution for true real-time communication. I found myself using hacks to obtain

real-time communication. I found myself using hacks to obtain new data from the usernew data from the user interface. One method was to pound the server with an Ajax cal

interface. One method was to pound the server with an Ajax cal l every few seconds. Thel every few seconds. The server had no way of knowing whether anything had updated since the last request, so it server had no way of knowing whether anything had updated since the last request, so it would dump all the data into the huge

would dump all the data into the huge JSON object. It was up to the client-side JavaScriptJSON object. It was up to the client-side JavaScript application to search the data and check

application to search the data and check whether there were any updateswhether there were any updates. If there were. If there were updates, the client side was responsible for updating the display as needed. This turned updates, the client side was responsible for updating the display as needed. This turned out to be dif

out to be dif ﬁﬁcult to maintain and a nightmare to debug. When Socket.IO was released, Icult to maintain and a nightmare to debug. When Socket.IO was released, I was blown away

was blown away. Now, I could send . Now, I could send only the pieces of only the pieces of data that hdata that had actually been ad actually been updatedupdated from the server instead of pushing

from the server instead of pushing up everything. Instead of setting an up everything. Instead of setting an interval to make Ajaxinterval to make Ajax calls, I could just send data

calls, I could just send data when new data came in. In short, when new data came in. In short, Socket.IO made my life easierSocket.IO made my life easier..

1

(7)

Wiring It Up Wiring It Up

2 2

Socket.IO is an open source library created by Guillermo Rauch. It is built with

Socket.IO is an open source library created by Guillermo Rauch. It is built with Engine.IO,Engine.IO, which is a lower-level abstraction on top of the WebSocket technology. Socket.IO is used to which is a lower-level abstraction on top of the WebSocket technology. Socket.IO is used to communicate bidirectio

communicate bidirectionally between the server side and the client side nally between the server side and the client side in a syntax thatin a syntax that looks as if

looks as if you are just triggering and you are just triggering and listening to eventslistening to events. The WebSocket API protocol was. The WebSocket API protocol was standardized in 2011

standardized in 2011. It is a. It is aTransTransmission Control mission Control ProtocolProtocol ( (TCPTCP) that only relies on HTTP for) that only relies on HTTP for its initial handshake. After the handshake is complete, the connection is left open so

its initial handshake. After the handshake is complete, the connection is left open so that thethat the server and the client can pass messages back

server and the client can pass messages back and forth as needed.and forth as needed. For reference

For reference, a , a typical WebSocket connection without Socket.IO will look typical WebSocket connection without Socket.IO will look something similar tosomething similar to the following code on the client side:

the following code on the client side:

We are not falling back for browsers that do not support WebSockets. We are not falling back for browsers that do not support WebSockets. if ('Websocket' in window) {

if ('Websocket' in window) { var

var ws ws = = new new WebSocket('ws://localhost:5000/channel');WebSocket('ws://localhost:5000/channel'); ws.onopen = function () {

ws.onopen = function () { ws.send('Hello

ws.send('Hello world');world'); };

};

ws.onmessage = function (e) { ws.onmessage = function (e) { console.log(e.data); console.log(e.data); }; }; ws.onclose = function () { ws.onclose = function () { console.warn('WebSocket

console.warn('WebSocket disconnected');disconnected'); }

} } else { } else {

throw

throw new new Error('This Error('This browser browser does does not not support support websockets');websockets'); }

}

Downloading the example code Downloading the example code

You can d

You can download the example codeownload the example codeﬁﬁles from your account atles from your account at

http://www.packtpub.com

for all the Packt Publishing books for all the Packt Publishing books you have purchased. If you purchased this book e

you have purchased. If you purchased this book elsewhere, you canlsewhere, you can visit

visit

http://www.packtpub.com/support

and register to and register to have the

(8)

Chapter 1 Chapter 1 Socket.IO goes a step beyond just providing an easy-to-use and more robust API

Socket.IO goes a step beyond just providing an easy-to-use and more robust API on topon top of WebSockets. It also provides the ability to

of WebSockets. It also provides the ability to seamlessly use other real-time protocols ifseamlessly use other real-time protocols if WebSock

WebSockets are not available. For exampleets are not available. For example, it will , it will fall back on JSON long fall back on JSON long polling in thepolling in the absence of WebSocket support. Long polling is

absence of WebSocket support. Long polling is essentially a trick essentially a trick to emulate the WebSocketto emulate the WebSocket behavior in browsers that don't support

behavior in browsers that don't support WebSockWebSockets. After a ets. After a long polling request is made, long polling request is made, itit is held onto by the server instead of immediately responding as a traditional HTTP request is held onto by the server instead of immediately responding as a traditional HTTP request would. When data becomes available, the long polling request is resolved, closing the loop would. When data becomes available, the long polling request is resolved, closing the loop of the long request cycle. At this point, a

of the long request cycle. At this point, a new long polling request will typically be made.new long polling request will typically be made. This gives the

This gives the illusion of the continuous connection that WebSockets provides. Althoughillusion of the continuous connection that WebSockets provides. Although long polling is less than

long polling is less than ideal in the landscape of ideal in the landscape of modern technologymodern technology, it is a , it is a perfect fallbackperfect fallback when needed. When you send a

when needed. When you send a message with Socket.IO, the API for WebSockets and longmessage with Socket.IO, the API for WebSockets and long polling are identical,

polling are identical, so you don't have to deal so you don't have to deal with the mental overhead of with the mental overhead of integrating twointegrating two syntactically different technologies.

syntactically different technologies.

Although there are Socket.IO implementations in many server-side languages, we will use Although there are Socket.IO implementations in many server-side languages, we will use Node.js in this book. With

Node.js in this book. With Node.js, we can write JavaScript on the server side, which givesNode.js, we can write JavaScript on the server side, which gives us a single syntax on the

us a single syntax on the server and client.server and client.

In this chapter, we will create a Node server with Socket.IO and obtain some very basic In this chapter, we will create a Node server with Socket.IO and obtain some very basic cross-bro

cross-browser messaging working. We will also wser messaging working. We will also look at debugging look at debugging tools that make workingtools that make working with Socket.IO even easi

with Socket.IO even easier.er.

Creating a Node HTTP

ser

ver with Sock

et.IO

In order to get Socket.IO running, we need to have at

In order to get Socket.IO running, we need to have at least one client and least one client and one server set upone server set up to talk to each other. In this recipe, we will set up a

to talk to each other. In this recipe, we will set up a basic Node HTTP server with the built-inbasic Node HTTP server with the built-in Node

Node

http

mo module.dule.

Getting ready

To get started with Socket.IO, you will need

To get started with Socket.IO, you will need to install Node.js. This to install Node.js. This can be downloaded fromcan be downloaded from

https://nodejs.org/

.There is a download link on the Node.js .There is a download link on the Node.js website, or you can get onewebsite, or you can get one of the binaries at

of the binaries at

https://nodejs.org/download/

.. Once Node.js is installed,

Once Node.js is installed, you will need to navigate to the you will need to navigate to the directory where your project isdirectory where your project is located and create a new NPM

located and create a new NPM package by enteringpackage by entering

npm init

in your console. in your console.

Now, you will need to install Socket.IO. You can use NPM to install Socket.IO by entering Now, you will need to install Socket.IO. You can use NPM to install Socket.IO by entering

npm

install socket.io --save

(9)

Wiring It Up Wiring It Up 4 4

How to do it…

To create a Node HTTP server with Socket.IO, follow these steps: To create a Node HTTP server with Socket.IO, follow these steps:

1.

1. Create Create a a newnewﬁﬁle calledle called

server.js

. This will be . This will be your server-side code:your server-side code:

var http = require('http'), var http = require('http'),

socketIO

socketIO = = require('socket.io'),require('socket.io'), fs fs = = require('fs'),require('fs'), server, server, io; io;

server = http.createServer(function (req, res) { server = http.createServer(function (req, res) {

fs.readFile(__dirname

fs.readFile(__dirname + + '/index.html', '/index.html', function function (err, (err, data) data) {{ res.writeHead(200); res.writeHead(200); res.end(data); res.end(data); }); }); }); }); server.listen(5000); server.listen(5000); io = socketIO(server); io = socketIO(server);

io.on('connection', function (socket) { io.on('connection', function (socket) { socket.emit('greeting-from-server', socket.emit('greeting-from-server', {{

greeting:

greeting: 'Hello 'Hello Client'Client' });

});

socket.on('greeting-from-client',

socket.on('greeting-from-client', function function (message) (message) {{ console.log(message); console.log(message); }); }); }); }); 2.

2. You You may may see see thatthat

server.js

will read a will read aﬁﬁle calledle called

index.html

. You'll need to. You'll need to create this as well, as shown in the

create this as well, as shown in the following code:following code:

<!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <head> </head> </head> <body> <body> <script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script> <script> <script> var

var socket socket = = io('http://localhost:5000');io('http://localhost:5000'); socket.on('greeting-from-server',

socket.on('greeting-from-server', functionfunction (message) {

(10)

Chapter 1 Chapter 1 document.body.appendChild( document.body.appendChild( document.createTextNode(message.greeting) document.createTextNode(message.greeting) ); ); socket.emit('greeting-from-client', socket.emit('greeting-from-client', {{ greeting:

greeting: 'Hello 'Hello Server'Server' }); }); }); }); </script> </script> </body> </body> </html> </html> 3.

3. With With your your twotwoﬁﬁles in place, you an starles in place, you an start your server by enteringt your server by entering

node server

on on your terminal from the same directory where your

your terminal from the same directory where your ﬁﬁles are. This will start a newles are. This will start a new Node server on port

Node server on port

5000

. Node can listen on any port, but . Node can listen on any port, but we will speciwe will speciﬁﬁcallycally tell it to listen on port

tell it to listen on port

5000

in our in our

server.js

ﬁﬁle. If you navigate tole. If you navigate to

http://

localhost:5000

, you should see a message that says, you should see a message that says Hello ClientHello Client in your browser: in your browser:

4.

4. YoYou should u should also see also see a message a message on yoon your terur terminal with minal with an object an object that contains that contains aa message that says

message that says'Hello Server''Hello Server'::

Congratulations! Y

(11)

How it works…

The browser displays a message that

The browser displays a message that originated on the server, whereas the server displays aoriginated on the server, whereas the server displays a message that originated on the

message that originated on the client. These messages are both client. These messages are both relayed by Socket.IO.relayed by Socket.IO. The client side also initializes a

The client side also initializes a function, but in the client's case, we need to pass a function, but in the client's case, we need to pass a stringstring containing the server and port number if

containing the server and port number if the server is not running on portthe server is not running on port

80

. In our case, we. In our case, we will run the server on port

will run the server on port

5000

, so we need to pass, so we need to pass

http://localhost:5000

in the io in the io function.

function. The

The

/socket.io/socket.io.js

ﬁﬁle is served dynamically by Socket.IO, so you don't needle is served dynamically by Socket.IO, so you don't need to manually add this

to manually add thisﬁﬁle anywhere. As long as le anywhere. As long as your server and Socket.IO are set up your server and Socket.IO are set up correctlycorrectly,, the script will be present. There is

the script will be present. There is also a CDN available to host youralso a CDN available to host your

socket.io.js

ﬁﬁle. Thele. The current version can be found at

current version can be found at

http://socket.io/download

.. The

The

io.on('connection')

method in method in the server-side code listens for any new client-sidethe server-side code listens for any new client-side socket connectio

socket connections. When the client loads a ns. When the client loads a page with Socket.IO on the client side, a newpage with Socket.IO on the client side, a new connection will be created here.

connection will be created here.

When the server gets a new socket connection, it will emit a message to every available When the server gets a new socket connection, it will emit a message to every available socket that says

socket that saysHello ClientHello Client. When the client gets this . When the client gets this message, it will render it to the DOM.message, it will render it to the DOM. It also emits a message of i

It also emits a message of its own that the server will listen for.ts own that the server will listen for.

There's more…

Although all the examples in this book use Node.js

Although all the examples in this book use Node.js on the server side, there are server-sideon the server side, there are server-side libraries for many other languages, including, PHP, C#, Ruby, Python, and so on. Whatever your libraries for many other languages, including, PHP, C#, Ruby, Python, and so on. Whatever your server-side language of choice happens to be, there is likely to be a

server-side language of choice happens to be, there is likely to be a library to interface withlibrary to interface with Socket.IO o

Socket.IO on your server.n your server.

Creating an Express

ser

ver with Sock

et.IO

Express is probably the most

Express is probably the most widely used Node application widely used Node application frameworframework available. Numerousk available. Numerous MVC framewo

MVC frameworks are written based on Express, but it can also rks are written based on Express, but it can also be used on its own. Express isbe used on its own. Express is simple,

simple,ﬂﬂexible, and unopinionated, which makes it a exible, and unopinionated, which makes it a pleasure to work with.pleasure to work with. Socket.IO can be used based on the Express server just as

Socket.IO can be used based on the Express server just as easily as it can easily as it can run on a standardrun on a standard Node HTTP server. In this section, we

Node HTTP server. In this section, we willwillﬁﬁre the Express server and ensure that it can re the Express server and ensure that it can talk totalk to the client sid

(12)

Chapter 1 Chapter 1

Getting ready

The Express framework runs on Node, so you

The Express framework runs on Node, so you will need to have Node installed will need to have Node installed on youron your machine. Refer to the previous recipe for instructions on how to install Node

machine. Refer to the previous recipe for instructions on how to install Node and Socket.IO.and Socket.IO. In addition to Node and Socket.IO, you will also need to install the

In addition to Node and Socket.IO, you will also need to install the Express npm package.Express npm package. Express can be installed

Express can be installed by enteringby entering

npm install express --save

o on your termn your terminal.inal.

How to do it…

Follow these steps to create an Express server using

Follow these steps to create an Express server using Socket.IO:Socket.IO: 1.

1. You You will need will need to to create a create a new new server-sidserver-side e JavaScriptJavaScript ﬁﬁle calledle called

server.js

. It will. It will contain all of

contain all of your server instantiation and handle your Socket.IO messaging. Theyour server instantiation and handle your Socket.IO messaging. The

server.js

ﬁﬁle will look similar to the le will look similar to the following code:following code:

var express = require('express'), var express = require('express'),

app

app = = express(),express(), http

http = = require('http'),require('http'), socketIO

socketIO = = require('socket.io'),require('socket.io'), server,

server, io;io;

app.get('/', function (req, res) { app.get('/', function (req, res) {

res.sendFile(__dirname + '/index.html'); res.sendFile(__dirname + '/index.html'); }); }); server = http.Server(app); server = http.Server(app); server.listen(5000); server.listen(5000); io = socketIO(server); io = socketIO(server);

io.on('connection', function (socket) { io.on('connection', function (socket) { socket.emit('greeting-from-server', socket.emit('greeting-from-server', {{

greeting:

greeting: 'Hello 'Hello Client'Client' });

});

socket.on('greeting-from-client',

socket.on('greeting-from-client', function function (message) (message) {{ console.log(message); console.log(message); }); }); }); });

(13)

8 8

2. The

server.js

fifile will serve a static HTMLle will serve a static HTMLfifile called le called index when the user navigatesindex when the user navigates to the root directory of

to the root directory of the server. The HTMLthe server. The HTMLﬁﬁle will handle the le will handle the client-side Socket.IOclient-side Socket.IO messaging. It will look similar to the following code:

messaging. It will look similar to the following code:

<!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <head> </head> </head> <body> <body> <script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script> <script> <script> var

var socket socket = = io('http://localhost:5000');io('http://localhost:5000'); socket.on('greeting-from-server',

socket.on('greeting-from-server', functionfunction (message) { (message) { document.body.appendChild( document.body.appendChild( document.createTextNode(message.greeting) document.createTextNode(message.greeting) ); ); socket.emit('greeting-from-client', socket.emit('greeting-from-client', {{ greeting:

greeting: 'Hello 'Hello Server'Server' }); }); }); }); </script> </script> </body> </body> </html> </html> 3.

3. Once Once both both of of youryourﬁﬁles are created, you can start your server by enteringles are created, you can start your server by entering

node

server

on your terminal. on your terminal. 4.

4. After the After the server stserver starts, you arts, you should be should be able to able to navigate navigate toto

http://localhost:5000

and see a message that says

(14)

Chapter 1 Chapter 1 5.

5. There There should should be be a a message message that that sayssays'Hello Server''Hello Server'on your terminal:on your terminal:

Awesome! Now you've got Socket.IO r

Awesome! Now you've got Socket.IO running on Express.unning on Express.

How it works…

Express is a collection of HTTP utilities and

Express is a collection of HTTP utilities and middleware that make it easier to use Node as amiddleware that make it easier to use Node as a web server. Although Express provide

web server. Although Express provides a s a robust API that isn't robust API that isn't available out of the available out of the box from thebox from the built-in Node HTTP module, using

built-in Node HTTP module, using Express with Socket.IO is still Express with Socket.IO is still very similar.very similar. We created a new Express server with

We created a new Express server with

var app = express()

. We passed this to the. We passed this to the

http.Server()

method. By passing our Express app as method. By passing our Express app as thetheﬁﬁrst argument to the HTTPrst argument to the HTTP server, we told Node that we wanted to use Express as our handler for HTTP requests. server, we told Node that we wanted to use Express as our handler for HTTP requests. Next, we passed the HTTP server directly to the

Next, we passed the HTTP server directly to the

SocketIO

method exactly as we would have if method exactly as we would have if we were using a nonExpress HTTP server. Socket.IO took the server instance to listen for new we were using a nonExpress HTTP server. Socket.IO took the server instance to listen for new socket connection

socket connections on it. s on it. The new connections came from the client side The new connections came from the client side when we navigatedwhen we navigated to the page in our browser.

to the page in our browser.

Using Socket

.IO as

a cross-br

owser

WebSocket

The native WebSocket impleme

The native WebSocket implementation in browsers is much less ntation in browsers is much less robust than what Socket.robust than what Socket. IO offers. Sending a WebSocket message from the client only requires the data as a single IO offers. Sending a WebSocket message from the client only requires the data as a single argument. This means that you have to format your WebSocket data in such a way that you argument. This means that you have to format your WebSocket data in such a way that you can easily determine what it

can easily determine what it is for.is for.

If you want to emulate the ease of sending a message without a topic, you can use the If you want to emulate the ease of sending a message without a topic, you can use the

socket.send()

(15)

10 10

The bene

The beneﬁﬁts of using ts of using the Socket.IO syntax for this type of the Socket.IO syntax for this type of interaction oveinteraction over plain WebSocketsr plain WebSockets are numerous. They include the built-in fallbacks

are numerous. They include the built-in fallbacks for browsers that don't support WebSockets.for browsers that don't support WebSockets. The bene

The benefifits also include a single ts also include a single uniunifified syntax that is easier ed syntax that is easier to read and maintain.to read and maintain.

Getting ready

To get started with Socket.IO as a cross-browser WebSocket, you will need to have Node, To get started with Socket.IO as a cross-browser WebSocket, you will need to have Node, Express, and Socket.IO installed. If

Express, and Socket.IO installed. If you have not installed them yet, refer to the previousyou have not installed them yet, refer to the previous recipe:

recipe: Creating an Express server with Socket.IOCreating an Express server with Socket.IO..

How to do it…

Follow these instructions to use Socket.IO as a cross-browser WebSocket: Follow these instructions to use Socket.IO as a cross-browser WebSocket:

1.

1. First, First, you'll you'll need need to to set set up up your your server-sideserver-side

server.js

ﬁﬁle as follows:le as follows:

var io = require('socket.io')(5000), var io = require('socket.io')(5000),

sockets

sockets = = [];[];

io.on('connection', function (socket) { io.on('connection', function (socket) { sockets.push(socket);

sockets.push(socket); socket.on('message',

socket.on('message', function function (message) (message) {{ for

for (var (var i i = = 0; 0; i i < < sockets.length; sockets.length; i++) i++) {{ sockets[i].send(message); sockets[i].send(message); } } }); }); socket.on('disconnect',

socket.on('disconnect', function function () () {{ console.log('The

console.log('The socket socket disconnected');disconnected'); });

}); }); });

2.

2. Next, Next, you'll you'll have have to to create create a a client-sideclient-side

index.html

ﬁﬁle with the following code:le with the following code:

<!doctype html> <!doctype html> <html> <html> <head></head> <head></head> <body> <body> <form id="my-form"> <form id="my-form">

<p>

(16)

Chapter 1 Chapter 1 </p> </p> </form> </form> <div id="messages"></div> <div id="messages"></div> <script <script src="http://localhost:5000/socket.io/socket.io.js"></script src="http://localhost:5000/socket.io/socket.io.js"></script > > <script> <script> var

var socket socket = = io('http://localhost:5000');io('http://localhost:5000'); socket.on('connect',

socket.on('connect', function function () () {{ document

document

.getElementById('my-form') .getElementById('my-form')

.addEventListener('submit',

.addEventListener('submit', function function (e) (e) {{ e.preventDefault(); e.preventDefault(); socket.send(document.getElementById('message').value); socket.send(document.getElementById('message').value); }); }); socket.on('message',

socket.on('message', function function (message) (message) {{ var

var messageNode messageNode == document.createTextNode(message), document.createTextNode(message), messageElement messageElement == document.createElement('p'); document.createElement('p'); messageElement.appendChild(messageNode); messageElement.appendChild(messageNode); document.getElementById('messages').appendChild(messageElem document.getElementById('messages').appendChild(messageElem ent); ent); }); }); }); }); </script> </script> </body> </body> </html> </html> 3.

3. In our eIn our example, we xample, we have a have a simple fosimple form that allows rm that allows the user tthe user to post a mo post a message thatessage that will be sent to all

(17)

12 12

4.

4. If If you you start start your your server server withwith

node server

and open your and open your

index.html

ﬁﬁle byle by navigating to

navigating to

http://5000/index.html

in your browser, you should see the form in your browser, you should see the form on the index page:

on the index page:

5.

5. If you poIf you post a message st a message to the fto the form, it shouorm, it should send it tld send it to the servero the server, and the server, and the server should broadcast it to all the available clients, as

should broadcast it to all the available clients, as shown in the following screenshotshown in the following screenshot::

How it works…

The

socket.send(...)

method is a shor method is a shor tcut fortcut for

socket.emit('m

socket.emit('message',

essage', ...)

...)

. We. We will take a look at this topic in

will take a look at this topic in Chapter 3Chapter 3,, Having Two-Way ConversationsHaving Two-Way Conversations. This is the reason. This is the reason when the server listens for a message topic, it gets called when the cl

when the server listens for a message topic, it gets called when the cl ient callsient calls

socket.

send()

(18)

Chapter 1 Chapter 1 Our server stores an array of all the topics that

Our server stores an array of all the topics that connect to it. We will loop through all theconnect to it. We will loop through all the connected sockets to send the message when it

connected sockets to send the message when it comes. We will also explore better ways tocomes. We will also explore better ways to manage the connected sockets in the next chapter.

manage the connected sockets in the next chapter. The client side aids the

The client side aids the duty of sending the data from the form to the server. It also listens forduty of sending the data from the form to the server. It also listens for new messages from the server to add to the list of available messages in o

new messages from the server to add to the list of available messages in our UI underneathur UI underneath the form.

the form.

There's more…

We will keep an array of all the connected sockets so that we will be able to easily send We will keep an array of all the connected sockets so that we will be able to easily send data to all of them as needed. However, keeping an array of all the connected sockets can data to all of them as needed. However, keeping an array of all the connected sockets can be a little more tedious than just pushing the sockets to the array when they connect. For be a little more tedious than just pushing the sockets to the array when they connect. For example, if a user leaves the page, the socket will disconnect, but it will

example, if a user leaves the page, the socket will disconnect, but it will still be included instill be included in the static array.

the static array. Fortunately

Fortunately, we will , we will be able to be able to tap into the socket disconnect event by callingtap into the socket disconnect event by calling

socket.

on('disconnect')

. Using this method, we can remove the socket from our array and avoid. Using this method, we can remove the socket from our array and avoid sending messages to an

sending messages to an abandoned socket connection.abandoned socket connection. Here is an example of how

Here is an example of how the disconnect event can be used to manage dropped connections:the disconnect event can be used to manage dropped connections:

var io = require('socket.io')(5000), var io = require('socket.io')(5000),

sockets

sockets = = [];[];

io.on('connection', function (socket) { io.on('connection', function (socket) { sockets.push(socket);

sockets.push(socket); socket.on('disconnect',

socket.on('disconnect', function function () () {{ for

for (var (var i i = = 0; 0; i i < < sockets.length; sockets.length; i++) i++) {{ if

if (sockets[i].id (sockets[i].id === === socket.id) socket.id) {{ sockets

sockets .splice(i, .splice(i, 1);1); }

} } }

console.log('The

console.log('The socket socket disconnected. disconnected. There There are are ' ' ++ sockets.length + ' conn

sockets.length + ' conn ected sockets');ected sockets'); }); }); }); });

Debugging on the client

In the earlier

In the earlier versions of Socket.IO, debugging was extremely simple. This was becauseversions of Socket.IO, debugging was extremely simple. This was because verbose logging was pushed to the

verbose logging was pushed to the developedeveloper console by default. Although r console by default. Although this feature wasthis feature was a great way to dig into issues when they occurred, it could also get

a great way to dig into issues when they occurred, it could also get in the way by logging tooin the way by logging too much when no debugging was needed.

much when no debugging was needed. Now, Sock

Now, Socket.IO gives us the ability to toggle certain et.IO gives us the ability to toggle certain parts of our logging parts of our logging on and off as on and off as needed.needed. In this recipe, we will enable client-side debugging to have a better view of what is

In this recipe, we will enable client-side debugging to have a better view of what is happeninghappening in our

in our Socket.IO communicatioSocket.IO communication.n.

Getting ready

Starting with

Starting with version 1.0, Socket.IO doesn't show any logging by default. Howeverversion 1.0, Socket.IO doesn't show any logging by default. However, it can , it can easilyeasily be turned on. Behind the scenes, it will

be turned on. Behind the scenes, it will use an NPM module calleduse an NPM module called

debug

, which allows, which allows logging to navigate to variou

logging to navigate to various scopes that can be s scopes that can be turned on or off as turned on or off as needed.needed.

How to do it…

To enable debugging on the client side,

To enable debugging on the client side, follow these steps:follow these steps: 1.

1. On the On the client sclient side, log ide, log settings settings are peare persisted rsisted through through HTML5HTML5

localStorage

, so you, so you can turn logging on by setting the value of

can turn logging on by setting the value of

localStorage.debug

.. 2.

2. TTo see all the o see all the logging messages, logging messages, just set the just set the value of debvalue of debug to an ug to an asterisk, as asterisk, as shownshown in the following code:

in the following code:

localStorage.debug = '*'; localStorage.debug = '*';

3.

3. Now that rNow that robust logging is obust logging is turned on, turned on, you can you can open youopen your dever developer tools loper tools and see aand see a rich array of messages that details what

(20)

Chapter 1 Chapter 1

How it works…

The

localStorage

object in the browser is an object with object in the browser is an object with key/vkey/value pairs that is alue pairs that is maintainedmaintained when you refresh the page or leave it entirely. It is useful for persisting data on the client side when you refresh the page or leave it entirely. It is useful for persisting data on the client side in modern

in modern browsers.browsers.

Socket.IO uses the debug NPM

Socket.IO uses the debug NPM module. This views themodule. This views the

localStorage

key to determine key to determine the logging level to be

the logging level to be displayed in the browserdisplayed in the browser. The fact . The fact that the debugging level is that the debugging level is set inset in

localStorage

can be very can be very useful because you can set a debugging type anywhere evenuseful because you can set a debugging type anywhere even in production, and it will only log on

in production, and it will only log on to your machine. Also, you will be able to refresh theto your machine. Also, you will be able to refresh the page and see the Socket.IO logging from the initial page l

page and see the Socket.IO logging from the initial page l oad, which can be really oad, which can be really handy forhandy for debugging events that occur earlier on the page life cycle.

debugging events that occur earlier on the page life cycle.

There's more…

Not only can you set the logging to show everything, you can also listen for only certain log Not only can you set the logging to show everything, you can also listen for only certain log types by setting them up in

types by setting them up in

localStorage

. For example, if you are only interested in XHR. For example, if you are only interested in XHR requests, you can ask to only see messages in the

requests, you can ask to only see messages in the

engine.io-client:polling-xhr

namespace with the following code: namespace with the following code:

localStorage.debug = 'engine.io-client:polling-xhr'; localStorage.debug = 'engine.io-client:polling-xhr';

You

You can also set multiple locan also set multiple log types by separating types by separating them with a comma, as sg them with a comma, as shown in thehown in the following code:

following code:

localStorage.debug = 'client:polling, localStorage.debug = 'client:polling, engine.io-client:socket

client:socket';';

See al

so

The following recipe,

The following recipe, Debugging on the server Debugging on the server ..

Debugging on the server

The same debugging package that is

The same debugging package that is available on the client side is available on the seravailable on the client side is available on the serverver as well.

as well.

The debugging option can

The debugging option can be turned on with be turned on with a Node environmental variaa Node environmental variable.ble.

Getting ready

To get started with debugging on

To get started with debugging on the server side, the server side, you will need to have Node you will need to have Node and Socket.IOand Socket.IO installed and an existing app that uses Socket.IO. To test this out, you can easily use any of installed and an existing app that uses Socket.IO. To test this out, you can easily use any of the apps we built in the

(21)

How to do it…

To get server-side debugging turned on, follow these steps: To get server-side debugging turned on, follow these steps:

1.

1. TTo enable o enable debugging at debugging at the time the time when yowhen you start youu start your serverr server, simply , simply include theinclude the

DEBUG

environmen environmental variable as tal variable as thetheﬁﬁrst argument when you start rst argument when you start your Node server,your Node server, as shown in the

as shown in the following code:following code:

DEBUG=* node server DEBUG=* node server

2.

2. If If you you would would like like to to persist persist thethe

DEBUG

environmen environmental variable without the tal variable without the need toneed to pass it every time you start your Node ser

pass it every time you start your Node serverver, you can export it ahead , you can export it ahead of time usingof time using the following code:

the following code:

export DEBUG=* export DEBUG=*

3.

3. Now, Now, when you when you start your serverstart your server, verbose , verbose logging will be ulogging will be used with the fsed with the following code:ollowing code:

node server node server

4.

4. You You can can always always update update thethe

DEBUG

variable or even remove it completely by setting it variable or even remove it completely by setting it to null, which will

to null, which will suppress logging entirely, as shown in the suppress logging entirely, as shown in the following code:following code:

export DEBUG= export DEBUG=nullnull

How it works…

Node.js environmen

Node.js environmental variables tal variables are available inare available in

process.env

in any running Node in any running Node process.process. They are often used

They are often used to set up server-specito set up server-specifific conc confifigurations, such as database gurations, such as database connectionsconnections and third-party credentials.

and third-party credentials. The great thing

The great thing about using environmenabout using environmental variables to detal variables to defifine the logging verbosity is thatne the logging verbosity is that most cloud-based hosting providers allow you to change environmental variables on the most cloud-based hosting providers allow you to change environmental variables on the flfly,y, so you can easily toggle logging on or of

so you can easily toggle logging on or of f without having to redeploy your code.f without having to redeploy your code.

There's more…

Similar to client-side logging, you can set the logging type to something other than the Similar to client-side logging, you can set the logging type to something other than the wildcard. This allows you to

wildcard. This allows you to only get debugging messages on only get debugging messages on the topic you want to listen to.the topic you want to listen to. For example, listening for XHR requests is as simple as passing it to the environmental For example, listening for XHR requests is as simple as passing it to the environmental variables when you start your Node server with the

variables when you start your Node server with the following code:following code:

DEBUG=socket.io:server node server DEBUG=socket.io:server node server

(22)

Where to buy this book

You can buy Socket.IO Cookbook from the

You can buy Socket.IO Cookbook from the Packt Publishing website

Packt Publishing website

..

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internetmost internet book retailers.

book retailers. Click here

Click here for ordering and shipping details.for ordering and shipping details.

www.PacktPub.com