Socket.io is a trending library that allows bidirectional communication between client and server. It allows event-based communication between the client and server with very less code. It works on every platform, a browser with good speed and reliability. Node.JS is the perfect technology for real-time applications like chat applications and expressjs is the most popular web framework in Node.JS.
Create an express application named chatApp
“`
$ express chatApp
create : chatApp
create : chatApp/package.json
create : chatApp/app.js
create : chatApp/public
create : chatApp/public/stylesheets
create : chatApp/public/stylesheets/style.css
create : chatApp/public/images
create : chatApp/routes
create : chatApp/routes/index.js
create : chatApp/routes/users.js
create : chatApp/views
create : chatApp/views/index.jade
create : chatApp/views/layout.jade
create : chatApp/views/error.jade
create : chatApp/bin
create : chatApp/bin/www
create : chatApp/public/javascripts
install dependencies:
$ cd chatApp && npm install
run the app:
$ DEBUG=chatApp ./bin/www
“`
Move to the application folder.
“`
$ cd chatApp/
“`
Just check the files created inside
“`
$ ls
“`
Now we need to install the dependencies. Dependencies are listed in the package.json. The current content of package.json file is
“`
{
“name”: “chatApp”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “node ./bin/www”
},
“dependencies”: {
“express”: “~4.9.0”,
“body-parser”: “~1.8.1”,
“cookie-parser”: “~1.3.3”,
“morgan”: “~1.3.0”,
“serve-favicon”: “~2.1.3”,
“debug”: “~2.0.0”,
“jade”: “~1.6.0”
}
}
“`
To install the dependencies use the following command.
“`
$ npm install
“`
Now if you check the app.js file you can find lots of code. Remove everything and add the following code
var app = require(‘express’)();
var http = require(‘http’).Server(app);
http.listen(3000, function(){
console.log(‘listening on port:3000’);
});
Run the application using
“`
$ node app.js
“`
listening on port:3000
Create an index page with the following code and save the file with name index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat App NodeJS+Socketio+ExpressJS</title>
</head>
<body>
Hello world
</body>
</html>
Now in the app.js we need to set the router for the index.html. For this add the following code inside the app.js
app.get(‘/’, function(req, res){
res.sendfile(‘index.html’);
});
$ node app.js
listening on port:3000
Now check the URL http://localhost:3000/
Now we need to install the socket.io. You can install socket.io using the following command
$ npm install –save socket.io
Now check the package.json and you can find that the socket.io is added to it with the version.
{
“name”: “chat”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “node ./bin/www”
},
“dependencies”: {
“body-parser”: “~1.8.1”,
“cookie-parser”: “~1.3.3”,
“debug”: “~2.0.0”,
“express”: “~4.9.0”,
“jade”: “~1.6.0”,
“morgan”: “~1.3.0”,
“serve-favicon”: “~2.1.3”,
“socket.io”: “^1.3.5”
}
}
Add socket.io into HTML code using
<script src=”https://cdn.socket.io/socket.io-1.2.0.js”></script>
and update index.html with the following code
<script type=”text/javascript”>
var socket = io();
</script>
Update app.js with the following code
io.on(‘connection’, function(socket){
console.log(‘New client is connected to the server’);
});
Now update index.html with input box and send button
<!DOCTYPE html>
<html>
<head>
<title>Chat App NodeJS+Socketio+ExpressJS</title>
</head>
<body>
<ul id=”messages”></ul>
<form action=””>
<input id=”m” autocomplete=”off” /><button>Send</button>
</form>
<script src=”https://cdn.socket.io/socket.io-1.2.0.js”></script>
<script src=”http://code.jquery.com/jquery-1.11.1.js”></script>
<script type=”text/javascript”>
var socket = io();
var name = window.prompt(“What is your name?”);
socket.emit(‘login’, name);
$(‘form’).submit(function(){
socket.emit(‘sendMsg’,{by:name, msg: $(‘#m’).val()});
$(‘#m’).val(”);
return false;
});
socket.on(‘newUser’, function(name){
$(‘#messages’).append($(‘<li>’).text(name +” is online”));
});
socket.on(‘getMsg’, function(res){
$(‘#messages’).append($(‘<li>’).text(res.by +”: “+res.msg ));
});
</script>
</body>
</html>
Here we are creating a socket connection and emitting the message that the user type in the text box. We are getting the name of the user using the prompt. then sending a login event to server.
Now we need to listen to these events in server and handle them properly. So open the app.js file and update the io.connection function as:
io.on(‘connection’, function(socket){
console.log(‘New client is connected to the server’);
//listening to the sendMsg from client.
socket.on(‘sendMsg’, function(msg){
console.log(‘message: ‘ + msg);
//emiting the getMsg event to all the sockets that is connected.
io.emit(‘getMsg’, msg);
});
//Listening to the login event.
socket.on(“login”,function(name) {
//emitting the newUser event to all the clients
io.emit(‘newUser’, name);
});
});
Now in the command line type the following code. This will run our application
$ node app.js
Now open your browser and go to http://localhost:3000/ and enjoy the chat
Have questions? Contact the app development experts at InApp to learn more.
