How to Configure Socket.IO with Demo-Chat App in Node.js ?
For making a chat app, it is required that the server sends data to the client but the client should also respond back to the server. This can be done by making use of the Websockets. A WebSocket is a kind of communication pipe opened in two directions.
- Express.js: It is a framework based on Node.js.
- Socket.io: It enables real-time bidirectional event-based communication. It works on every platform, browser, or device, focusing equally on reliability and speed. Socket.IO is built on top of the WebSockets API (Client-side) and Node.js. It is one of the most dependent upon the library at npm.
Setting up the Environment: The very first step is to start npm. So, create a new repository and initialize npm using the following commands:
$ mkdir chatApp $ cd chatApp $ npm init
Now, the next step is to install npm packages which will be required in building our chat application.
- express: The web application framework for Node.js.
- nodemon:(optional) It is used to restart our server. If you don’t want to install it, simply restart server by writing node app.js in the terminal.
- socket.io: The package that manages Websocket.
Just run the following commands in your terminal to install the above-mentioned packages:
$ npm install --save express $ npm install --save socket.io $ npm install --save ejs $ npm install --save nodemon
Steps to implement code:
Step 1: Create app.js
If you run http://localhost:3000 in your browser, you can see the message appearing on your screen as shown below:
Now to configure socket.io, we have to first make an object in app.js file as shown below:
Here, the io object will give us access to the socket.io library. The io object is now listening to each connection to our app. Each time a new user is connecting, it will print the following output:
New user connected
Now for building a window for chat application we will make a html file (actually ejs file) named index.ejs inside views folder. On the other side, public folder will contain css file namely style.css and js file chat.js. It will look like this:
We will now create a route which will render our index.ejs file which opens the window of our chat application.
Now if you will run http://localhost:3000 our chat window will look like this:
Now we will install socket.io on each client which will attempt to connect to our server. To do that, we have to import the socket.io library on the client side:
At the end of your body add these lines:
Now create a js file named chat.js in the public folder.
Step 2: Sending and Receiving Data Now, we will write some code that will enable us to send data as well as receive data from the server.
Changing Username: First of all, we will set a default username as something let’s say “Xyz”. To do so, write down the following code in the app.js and chat.js file.
socket.emit() allows you to emit custom events on the server and client.
Message: For messages we modify our files as shown below:
Th final result of our simple chat app will look like this:
A Little Advancement: A little more we can do is add a jQuery event listener on typing and send a socket event named typing.
It will simply display if someone is typing a message. Write the following code in chat.js and app.js as shown below: