Socket.io Programming With Example In Node.js

Nirav Daraniya
7y
3.7k
0
1

Article

Hello everyone. Today I will explain about socket.io in Node JS. Socket.io is used for real time communication between applications. In chat application and some other applications you can use socket.io. Communication between applications using socket.io is very speedy. Socket.io is also used in IOT (Internet of things) for real time object status.

For using the socket.io we have to use ‘socket.io’ module in js file. For understanding we have an example.

First of all you have to install socket.io from npm as shown in the below command.

>> npm install socket.io

For using socket programming you have to have knowledge of creating server in node js, events and callback concepts in node js, so if you are new to this, please read the below articles

Now we ahave an example for understanding socket.io so we have created one chat window using socket.io in Node.JS.

First we create a simple server and start its listening on 8083 port which we have learned in previous articles.

NodeSocketExample.js
1. var http = require('http')
2. var url=require('url')
3. var fs=require('fs')
5. var server= http.createServer(function(request,response){
6. var path = url.parse(request.url).pathname;
8. switch(path) {
9. case '/' :
10. response.writeHead(200,{'Content-Type':'text/html'})
11. response.write('Hello World, Welcome to Socket Programming');
12. response.end();
13. break;
15. default :
16. response.writeHead(404);
17. response.write("opps this doesn't exist - 404");
18. response.end();
19. break;
20. }
22. });
23. server.listen(8083);

Now create one html page which has one textbox for typing a message, one button for sending a message and one list box for displaying a message.

chatexample.html
1. <html>
2. <script src="/socket.io/socket.io.js"></script>
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
4. <head>
5. <title>Socket.IO chat</title>
7. </head>
8. <body>
9. <form action="">
10. <div id="lblMsg"></div>
11. <input id="m" autocomplete="off" /><button>Send</button>
12. <ul id="messages"></ul>
13. </form>
14. </body>
15. </html>

Now we have to add listener to the socket. So create listener which listens to the server. As shown below.
1. var io=require('socket.io')(http);
2. var listener = io.listen(server);
3. listener.sockets.on('connection',function(socket){
4. )};

Now when new user is connected for the first time we are sending one welcome message to it so we are emitting one event as shown below.
1. var io=require('socket.io')(http);
2. var listener = io.listen(server);
3. listener.sockets.on('connection',function(socket)
4. {
5. socket.emit(‘msgWelcome’,{'message':'Hello User wel-come to Chat window !’});
6. )};

Now we have added function to receive this ‘msgWelcome’ event response on html page side.
1. <script type="text/javascript">
3. $(function () {
4. var socket = io();
6. socket.on('msgWelcome’',function(data){
7. $('#lblMsg').text(data.message);
8. });
10. });
11. </script>

Now we are creating another event for sending messages from one user to other users. On button click we are emitting the ‘socket_Data_1’ event as shown below.
1. $(function () {
2. var socket = io();
4. $('form').submit(function(){
5. socket.emit('socket_Data_1', $('#m').val());
6. $('#m').val('');
7. return false;
8. });
10. });

Now on JS side we are receiving this ‘socket_Data_1' event and call the ‘message_1’ event.
1. socket.on('socket_Data_1', function(data){
2. io.emit('message_1',data);
3. });

Then we are receiving this event on html user side and displaying message in list as shown below
1. $(function () {
2. var socket = io();
4. socket.on('message_1', function(msg){
5. $('#messages').append($('<li>').text(msg));
6. });
7. });

Full code - NodeSocketExample.js

var http = require('http');
var url=require('url');
var fs=require('fs');
var io=require('socket.io')(http);
var server= http.createServer(function(request,response){
var path = url.parse(request.url).pathname;
switch(path) {
case '/' :
response.writeHead(200,{'Content-Type':'text/html'})
response.write('Hello World, Welcome to Socket Programming');
response.end();
break;
case '/chatexample.html' :
fs.readFile(__dirname + path,function(error,data){
if(error)
{
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200,{'Content-Type':'text/html'});
response.write(data);
response.end();
}
});
break;
default :
response.writeHead(404);
response.write("opps this doesn't exist - 404");
response.end();
break;
}
});
server.listen(8083);
var listener = io.listen(server);
listener.sockets.on('connection',function(socket){
socket.emit('msgWelcome’',{'message':'Hello User will come to Chat window !'});
socket.on('socket_Data_1', function(data){
io.emit('message_1',data);
});
});

Full code - chatexample.html

<html>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(function () {
var socket = io();
socket.on('msgWelcome’',function(data){
$('#lblMsg').text(data.message);
});
$('form').submit(function(){
socket.emit('socket_Data_1', $('#m').val());
$('#m').val('');
return false;
});
socket.on('message_1', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<form action="">
<div id="lblMsg"></div>
<input id="m" autocomplete="off" /><button>Send</button>
<ul id="messages"></ul>
</form>
</body>
</html>