Socket.io beginner introduction to sockets in JavaScript.

Lets get started creating a simple application using sockets.

Install the required dependencies. You will need socket.io, express and path. Lets create a folder first.

mkdir socket-tutorial
cd socket-tutorial

Next we initialize the app. Following the default instructions.

npm init

Now we can install express.

npm install express --save

Lets install the other dependencies.

npm install socket.io --save
npm install path --save

In our main app.js files we add our dependencies.

var express = require('express');
var path = require('path');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var port = 8080;

Next we add the call back function on the io object for the a connection event. This will be executed on every connection.

io.on('connection', function(socket) {
  console.log('new connection made');

  socket.emit('message-from-server', {
    greeting: 'Hello from Server'
  });

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

});

Take note of socket.emit and socket.on functions.

To send a message to the connected socket we use socket.emit function and pass a event identifier. This case we use 'message-form-server'.

  socket.emit('message-from-server', {
    greeting: 'Hello from Server'
  });

To receive responses from the socket we use socket.on function and pass in the event identifier. For this we used 'message-from-client‘.

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

We can send responses to the socket any time even while we have received a response from the client as show above.

In app.js we add the server listen function last.

server.listen(port, function() {
  console.log("Listening on port " + port);
});

The view/client side of the app is shown below. We use the jumbotron do display messages from the server.

HTML Template

We run our server by using the command

node app.js

We can enter a message and press the submit button. It will be displayed in the server.

Server output preview

Above we can see the ‘new connection made’ message. This occurs when we navigate to http://localhost:8080. Do this many times to see the message many times.

In the client we can add the socket.io plugin like this

<script src="/socket.io/socket.io.js"&gt;</script&gt;

We don’t need to specify a location when we are using it this way. Remember this is being run using express and node js. If we were using a different server setup we will have to call the socket plugin via an actually location.

Using vanilla JavaScript we get the ids of the elements we want. And open a socket connection.

  var connectBtn = document.getElementById('connectBtn');
  var response = document.getElementById('response');
  var message = document.getElementById('message');
  var submitBtn = document.getElementById('submit');
  var socket = io('http://localhost:8080');

We add a on listener for the event "message-from-server".

    socket.on('message-from-server', function(evt) {
      response.innerHTML = evt.greeting;
    });

Above the text in the jumbotron is updated via evt.greeting which is the response received from the server via the emit function.

We add an event listener on the submit button for the “click” event.

    submitBtn.addEventListener("click",function(event){
      var clientMessage = message.value;
      socket.emit('message-from-client', {
          message: clientMessage
        });
      event.preventDefault();
    });

When we press the submit button we get the text from the input and send it to the server using the emit function via the ‘message-from-client’ event.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s