DEV Community

Cover image for Build a Real-time Chat Application with and Node.js [With Automated Testing]
Pavan Belagatti
Pavan Belagatti

Posted on

Build a Real-time Chat Application with and Node.js [With Automated Testing]

In this tutorial, let's learn how to use Socket.IO and Node.js and create a simple chat application. We will set up a basic Node.js app and install the necessary dependencies. With a basic chat interface and add a simple feature where users can easily send and receive messages with the help of the Socket.IO connection. is a widely used library that helps with real-time communication between web clients and servers. Finally, we will write a simple test with the Mocha framework and automate it through Harness CI.



  • Install Node.js on your machine: You can download and install the latest version of Node.js from the official website:

  • Create a new Node.js project: Open a terminal window and create a new directory for your project. Navigate into the new directory and run the following command to create a new package.json file for your project:

npm init -y
Enter fullscreen mode Exit fullscreen mode
  • Install Run the following command to install in your project:
npm install
Enter fullscreen mode Exit fullscreen mode
  • Create a new Node.js server: Create a new file named server.js in your project directory and add the following code:
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('')(http);

app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);

http.listen(3001, () => {
  console.log('Server started on port 3001');
Enter fullscreen mode Exit fullscreen mode

This code adds an event listener for the message event, which is emitted by the client when the user clicks the send button. The server logs the message to the console and then emits a message event to all connected clients using the io.emit() method.

  • Create a new HTML file: Create a new file named index.html in the public directory and add the following code. It adds an input field and a button to the index.html file to allow users to send messages to the server. Here's an example:
<!DOCTYPE html>
    <title> Tutorial</title>
    <h1> Tutorial</h1>
    <div id="messages"></div>
    <input id="message-input" type="text" placeholder="Type your message here">
    <button id="send-button">Send</button>
    <script src="/"></script>
      const socket = io();
      socket.on('connect', () => {
        console.log('Connected to server');
      socket.on('disconnect', () => {
        console.log('Disconnected from server');
      const messages = document.getElementById('messages');
      const messageInput = document.getElementById('message-input');
      const sendButton = document.getElementById('send-button');
      sendButton.addEventListener('click', () => {
        const message = messageInput.value;
        socket.emit('message', message);
        messageInput.value = '';
      socket.on('message', (message) => {
        const messageElement = document.createElement('div');
        messageElement.innerText = message;
Enter fullscreen mode Exit fullscreen mode
  • Start the server: Run the following command in your terminal to start the server:
node server.js
Enter fullscreen mode Exit fullscreen mode

You should see the output on your terminal below,
Server started on port 3001

And when you open the 3001 on your local, you should see your chat app running.
socket app running

This should be your application folder structure as of now.

|- node_modules/
|- public/
| |- index.html
|- server.js
|- package.json

Add a Test Case to the Chat Application

Since is a real-time framework, it can be a bit challenging to write automated tests for it. However, we can write a simple test to verify that the client and server can communicate with each other and send/receive messages.

Install the mocha testing framework and the chai assertion library by running the following command:

npm install mocha chai --save-dev
Enter fullscreen mode Exit fullscreen mode

[Note: Run the above command in the root of your app]

Make a new folder named test and add a file named test.js in it with the following code.

const assert = require('chai').assert;
const io = require('');
const serverUrl = 'http://localhost:3000';

describe(' test', function() {
  let client1, client2;

  before(function(done) {
    // Connect to the server
    client1 = io.connect(serverUrl);
    client2 = io.connect(serverUrl);

  after(function(done) {
    // Disconnect from the server

  it('Should be able to send and receive messages', function(done) {
    client1.emit('message', 'Hello, world!');
    client2.on('message', function(msg) {
      assert.equal(msg, 'Hello, world!');

Enter fullscreen mode Exit fullscreen mode

Now make sure your app is running.

In another terminal open the application and run the following command to test the application.

npm test
Enter fullscreen mode Exit fullscreen mode

You should see a successful test passing message.
tests passed

Push your application code to a source control management system such as GitHub.

My application code is here - chat-app-tutorial

You can fork it or use your own (the one you pushed to your GitHub) to setup automated tests using a CI tool. We are going to extend this tutorial to show you how you can automate tests.

Automate Tests using a CI tool

Here, we will be using the fastest CI tool, Harness.

Sign in to your free Harness CI module.

Get started with creating your first pipeline
first pipeline

Authenticate with your GitHub account as your application code is present there.
add github

authenticate with GitHub

Select your application repository.
node repo

Next, start configuring the pipeline.
configure pipeline

Select Node.js from the list as our application is written in Node.js. What you will then see is a default yaml configuration for your Node.js application.
default yaml

Continue and click the 'Create the pipeline' button. You will the pipeline dashboard.
create node

Click on the 'Build Node App' stage, you should see the run step added by default with pre-configurations.
nodeapp step

Click the 'Build Node App' step, that is under execution and you will see the default configurations.
default configurations

We want the application to be running before testing it. How to make the application run? We will add a background step to run the server.
background step

Configure the Background step with the commands shown below.

npm install
npm install express --save-dev
node server.js
Enter fullscreen mode Exit fullscreen mode

The screenshot of the same step is shown below
step with commands

Apply changes and add another step to test the application.
test the application

Choose the Run step from the step library.
run step added

Add the following commands to the run step.

npm install
npm test
Enter fullscreen mode Exit fullscreen mode

You can see the screenshot of the run step with commands added.
run step commands added

Apply changes and save the pipeline.

At this point, this is how your pipeline should look like.
pipeline looks

Save everything and run the pipeline.
run pipeline

You should see a successful pipeline execution with test passing.
successful pipeline

You have the pull and push triggers already enabled by default.

So when any developer pushes code to your main branch, the pipeline gets triggered and runs the test. This way the tests can be automated easily.

If you like to learn CI/CD from scratch, I have another tutorial you might like. Take a look.

Top comments (6)

pterpmnta profile image
Pedro Pimienta M.

Great post, I'm going to read better when I reach the section to the course of Node that I doing rigth now.

attilalb profile image

Nice tutorial, easy to follow 😄

tochine profile image
Tochukwu Adams

Great piece!

pavanbelagatti profile image
Pavan Belagatti


stall84 profile image
Michael Stallings • Edited

This is great. Very appropriate timing with recent 'Chat' explosion.
Question though: I'm getting hung up while reading through as to why we install express in the 'Run Server' pipeline phase, and more importantly why we don't add express as a dependency in the project's package.json.
Can anyone give me a good theoretical or "why you would want to" explanation of why we do this for express and not (for instance) also for ?

snowjaguar625 profile image
Soft Coder

Very thanks for this detail instruction.