Hey Everyone this is the first tutorial on Node.js and today i will show you how to make an easiest websocket using socket.io and Node.js.

Well a WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.

Socket.io which is a popular module for node.js which allows you to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms.

So Let’s start making our Websocket. So for this you require node.js and modules named http,express and socket.io. express is fast minimalist web framework for the node js and i have already told you about socket.io.

So this is what my html page looks like.

<h1>Welcome to the socket io websoket!</h1>
<input type="text" id="sender" onchange="send(this.value)" placeholder="Send a Message">
<div id="results"></div>

Here is an input and i have attached an event handler ‘onchange’,  so whenever the value changes we send the value. Here comes the app.js

var app = require('express')();
var http = require('http').Server(app).listen(80);
var io = require('socket.io')(http);
console.log('[+] Server Started!');
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html');
});

This allows us to start a server and deliver the index.html file when the user hits http://localhost. “req” and “res” are two parameters for request and response. My server is listening on port 80. Now we use the socket.io  This allows us to send message to the socket/User. which is same for the server and the user.

socket.emit('event',data);

And this allows us to run a function on a specific event.

socket.on('event',function);

Now this is what our app.js looks like

var app = require('express')();
var http = require('http').Server(app).listen(80);
var io = require('socket.io')(http);
console.log('[+] Server Started!');
app.get('/',function(req,res){
 res.sendFile(__dirname+'/index.html');
});
io.on('connection',function(socket){
 console.log('[+] A User is Connected!');
 socket.on('message',function(data){
 console.log('[+] Recieved : '+data);
 socket.emit('sendres',data);
 });
 socket.on('disconnect',function(){
 console.log('[+] A user is disconnected!');
 });
});

Now the app.js is complete. Now let’s head to index.html. Script part

var socket = io().connect('http://localhost:80');
 var append = "";
function send(data){
 socket.emit('message',data);
 document.getElementById("sender").value = "";
};
 socket.on('sendres',function(data){
 append+= '<br>[+]'+data;
 document.getElementById('results').innerHTML=append; 
 });

var socket = io().connect('address');
Allows to connect to the server.

Now this is what our index.html looks like

<script src="socket.io/socket.io.js"></script>
<script>
 var socket = io().connect('http://localhost:80');
 var append = "";
function send(data){
 socket.emit('message',data);
 document.getElementById("sender").value = "";
};
 socket.on('sendres',function(data){
 append+= '<br>[+]'+data;
 document.getElementById('results').innerHTML=append;
 
 });
</script>

<h1>Welcome to the socket io websoket!</h1>
<input type="text" id="sender" onchange="send(this.value)" placeholder="Send a Message">
<div id="results"></div>

Here we have included the client side js file for socket.io.

Now you are ready with the your websocket.

Download The Sample Project.

Watch a Video Tutorial :

Advertisements