I'm exploring socket.io and trying to understand the details of the basic interaction between client and server side. Could someone give me specific commenting and explanation of this basic socket.io program below. I appreciate the help and of course if you give me a good answer I'll rate you up!
Server Side
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
Client Side
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
Server side:
The first line starts by binding socket.io on port 80.
Then you write the handler for each connection io.sockets.on('connection', function (socket) {
. In that handler socket
contains information about the connected client. socket.emit
sends a realtime response to the frontend on the channel news
with the JSON object { hello: 'world' }
.
socket.on
is listening for all the messages received from that client that are transmitted on the 'my other event' channel.
Client side:
You start by including the socket.io JavaScript source and connecting the client to the socket.io server on localhost, port 80. Then the client listens for the messages broadcasted on the channel 'news', then logs that message and broadcasts a message back to the server with an object that has the 'my' property set to 'data'.
Here is my best shot at helping you get your feet wet...
First thing is first.. Have to setup your server side file...
var http = require('http');
var app = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end();
});
var io = require('socket.io').listen(app);
io.set('log level', 1); // keep logging to only the essentials
io.set('transports', ['websocket']); // this will only allow clients that support web sockets
io.sockets.on('connection', function(socket) { // when a socket connects and publishes a "connection" message Think of this like pub/sub here.. The connection event happens any time a client connects.
socket.on('GetSession', function(){
socket.emit('SessionID', {
SessionID : socket.id //socket.id = the socket ID that is auto generated. So what we are doing here is when a client connects we will send back to them their session ID. I use this as a simple way to verify that the connection is successful on the client side.
});
socket.on('SendMessage', function(msg){ // So here is an example of that pub/sub I am talking about. We are going to publish to anything listening on "CreateRoom" a message.
socket.emit('Message', msg); // Here we take anyone listening on the message channel and send them whatever was emitted.
});
});
app.listen(3000);
Next lets take a look at a client...
var socket = io.connect('http://localhost:3000');
function GetInfo(){
socket.emit('GetSession', ''); // The client is now initiating the request we setup earlier to get its socket.id from the server.
}
socket.on('SessionID', function(msg) {
socket.emit('SendMessage', msg + ' Has Connected'); // When the server returns the socket.id the client will emit a message to the server for anyone else who is subscribed to the "message" channel. My terminology for these explanations is not accurate but I think that this way of stating things is a lot easier to wrap your head around...
});
socket.on('message', function(msg) {
console.log(msg); // here the client is listening on the "message" channel. Whenever the server sends a message to this channel the client will write the data to the console.
});
Hope this helps you see. I think its easy to get started with socket.io if you think of it as a pub/sub application (at first, because there are a lot more features).