Socket To Me

Written by Hunter Jansen on September 10, 2014

After this past year’s AndroidTO conference, I decided it would be fun to experiment with node and sockets. I had thought of some ways that we could make use of sockets if we ever decided to make the switch to a node backend for our API. The super simple, and little app ‘Socket To Me’ was the result.

I’d actually created this a little while ago using the popular socketing engine socket.io, but was having extreme difficulty in hosting it in the route that I wanted to in conjuction with the ghost blog I had been hosting on my server. As a result, I got frustrated and practically gave up on it. However, with the recent re-mergence of my blogging experiment on github pages, I wiped my ghost blog from existence, freeing up whatever conflicts that was causing.

That said, I’m still not an expert on nginx and still haven’t managed to get exactly the correct configuration set up for that (if anyone happens to want to offer any expertise they might have, then by all means, please). So without further ado, might I introduce:

SocketToMe

###Found at www.calmlycoding.com/sockettome

###Why Make This? There’s an aspect of our application in which users can update certain fields and the updates should instantly be visible to anyone else who has those fields on their page. Our current solution is to poll the server every 15 seconds or so for changes and update the ui accordingly. Sockets would eliminate that delay and allow for instantaneous updates - which could be a boon for us down the road. So, I decided to experiment with a super small use case with a bunch of items with a pair of options. This is essentially our use case but taken down to a very small amount.

###Difficulties Just the initial learning curve of how socket.io actually works and getting the first event firing and triggering listeners. It’s essentially a case of once you’ve figured it out once, it’s pretty easy to go from there and do whatever you need to do and experiment with. Of course, in order to test it across multiple devices, it’d be good to have it running on a network so that you can test outside of just separate browsers.

###Basics So socket.io is essentially built on broadcasters and listeners. Your server or client emits a message, and anything that’s listening reacts to that message accordingly.

Setting up the server to listen for new connections is simple. You start off on the server with:

var io = require('socket.io').listen(server);

and on the client:

var socket = io.connect('http://calmlycoding.com:9876');

And blamo, you’ve got an open connection between your clients and server with both ready to emit or listen for messages!

From there, you can go on to define what happens for different messages. So for instance, when a client connects to the server initially, a default ‘connection’ message is sent - so normally you’d want to handle that message with some logic. Listening for these messages is dead simple, and the code’s the same on both the server and the client (because JavaScript). So to get your initial connection listener set up you can start with:

io.sockets.on('connection', function (socket) {
    //emits and listeners go here
});

And then from there you can listen or emit whatever. So if you wanted to listen for a ‘Whatever’ message, inside that code block you just say:

 socket.on('buttonPressed', function (data) {
    //Logic to do whatever you need to with data
 });

As you can see, each listener’s callback function includes a data value, this is passed in as a value when sending out the message. so if I did the following on a client or server:

    io.sockets.emit('userUpdate', {userCount: activeUsers});

I’d catch this and access the userCount member of the object passed like this:

socket.on('userUpdate', function(data){
   $('#userCount').text(data.userCount);
});

Of course there’s some more to it than that, but those are the basics. From there you can do all SORTS of things. I’ll definitely be experimenting more with it as time goes on, as it’s a pretty nifty functionality, and not hard to get going at all.

I’ve made the source available on github, so check it out and experiment for yourself!

Feel free to fire any questions or comments at me.

Until Next time -Hunter