In Chapter 1, Getting Started with Multiplayer Game Programming, we implemented the first demo game using native HTML5 sockets. Although WebSockets are still totally awesome, they are unfortunately still heavily dependent on the specific browser the player uses.
Today, every modern browser ships with a complete implementation of WebSockets, especially on mobile devices where the world seems to be converging. However, for the possible exception where the user's browser doesn't quite support WebSockets but does support canvas (or whatever other HTML5 API you game uses), Socket.io comes to the rescue.
In short, Socket.io is an open source library that offers a fantastic level of abstraction over sockets. Not only this, Socket.io also makes it super easy to implement the backend service that the frontend socket clients will consume.
To implement the server-side code is as easy as specifying the port on which the connection will be and then implementing callbacks for events in which you're interested.
Now, this book is not a comprehensive guide for those wanting to master every aspect of Socket.io and will not be too descriptive for a lot of features that are offered by the library. However, you might find it useful to know that Socket.io offers amazing client-side support. In other words, if the browser using the socket doesn't implement the WebSockets specification, then Socket.io will fallback to some other technique that can be used to communicate with the server asynchronously. While some of these techniques may be too slow for real-time gaming (for example, Socket.io will eventually fallback to using HTML iFrames to communicate with the server if nothing else is supported by the browser), it is good to know just how powerful the library is.
We will bring Socket.io into our project through NPM. Be sure to stay close to the version used in this book (which is 1.3.5), as some of the methods or configurations might vary.
npm install socket.io --save npm install socket.io-client –save
Again, since we're using the Express framework to ease the effort of creating the Node.js server, we'll integrate Socket.io with Express.
// ch3/snake-ch3/app.js
var express = require('express'),
var io = require('socket.io')();
// ...
var app = express();
app.io = io;
// ...
io.on('connection', function(socket){
console.log('New client connected. Socket ready!'),
});
});The first thing we need to do is require Socket.io together with Express and all your other dependencies for the server script. We then add Socket.io to the Express instance by taking advantage of JavaScript's dynamic nature. We do this because Socket.io is not fully set up yet since we'll need access to the HTTP server that Express uses. In our case, as is the current standard today, we use Express Version 4.9.0 along with express-generator, which generates a file under <project-name>/bin/www where the low-level server setup takes place. This is where we integrate Socket.io into Express, by attaching the same server used by Express into our Socket.io instance.
// ch3/snake-ch3/bin/www
#!/usr/bin/env node
var debug = require('debug')('snake-ch3'),
var app = require('../app'),
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});
app.io.attach(server);The last step is to use the Socket.io library in our client JavaScript. Here, there are only two simple steps that you must be certainly used to by now if you've ever done any JavaScript programming at all.
First, we copy the client-side library into our public directory so that we can include it into our client code. To do this, copy the ch3/snake-ch3/node_modules/socket.io-client/socket.io.js file into ch3/snake-ch3/public/js/socket.io.js. Next, include the library in your HTML file using a script tag.
To start using the socket in your client code, all you need to do is instantiate it by requiring it with the domain where the server is running.
// ch3/snake-ch3/share/app.client.js
var socket = require('socket.io-client')(window.location.origin);
// …
socket.on('connect', function () {
socket.emit(gameEvents.server_listRooms);
});Now, the socket will attempt to connect to your server right away and asynchronously. Once it does this, the connect event will fire and the corresponding callback will be fired as well, and you would know that the socket is ready to be used. From then on you can start emitting events to the other end of the socket.