Build A Messaging App Using Socket.io and Node.js

Socket.io is a tool that enables realtime communication between the server and client. It is a JavaScript library with both a client side for the browser and a server side for Node.js. Today I will teach you how to use Socket.io and Node.js to build a simple messaging application. I will go over every step in depth, but it will be helpful if you already have a basic understanding of manipulating the DOM with vanilla JavaScript, using node as a runtime, and some very basic HTML and CSS.

The Set Up

npm init -y

Then we can install socket.io, and nodemon. Nodemon will allow our server to restart whenever code is changed, making debugging and tracking progress much easier. We can install them both with one command as follows:

npm install socket.io nodemon

These are the only dependencies we will need for this project.

Build the View

Writing out an HTML DOC is fine too

Inside of our HTML we need a few important pieces of code. First of all, we need to create our form element that will act as our message input. Secondly, we will need to include two script tags, one for the server and one for the JavaScript we are going to write.

Our basic HTML

Let’s open a live server to view our HTML page to make sure it is working so far. On mac, the default command for running the live server in VScode is Command+L then Command+O. If this is not working for you, look to the settings on the bottom left of your VScode window for the settings gear. Click on the settings gear, go to command palette, and search for the Live Server: Open with Live Server command. The page in the browser should look like this:

The text in the browser tab is changed in the ‘title’ tag of line 6 in our html

Creating the Server File

const io = require('socket.io')(3000)
// creates a server by passing the port number
io.on('connection', socket => {
socket.emit('message', 'Hi There!')
});
//this function is called every time someone loads the site
//each user has their own socket

Now that the server is created and can sends or ‘emits’ a message when user connects to the site, we have to connect our client side to that server. We will create a new file main.js and include the following code:

const socket = io('http://localhost:3000)socket.on('message', data => {
console.log(data)
})
//here 'message' represents the message event name we defined
//in our socket.emit() function

Now if we go to our browser where our Live Server is running, we can check the browser console and see that our message has been sent!

The message we defined in server.js was sent to the browser

Grabbing Message Data

const form = document.querySelector('.msg-form')
const formContainer = document.querySelector('.msg-container')
const messageInput = document.querySelector('.msg-input')

We will then add an event listener to the form submission that will emit an event from the socket and send it whatever message we have typed in the form input. So far, our main.js file should look like this:

Display the Message on the Browser

main.js file
server.js

Once we have this set up, we will be able to send messages back and forth from two different browser tabs!

Adding Users

We create a user, and we emit the user to the server on line 9. On our server, we want to create an event handler for the ‘new-user’ event that creates a new user and notifies the group when they join.

Now when we message back and forth we see the name of who we are messaging as well as both of our messages, just like a text conversation.

The end result of our basic application

On Styling

With a little added CSS file your chat app can look like this:

Perhaps not a work worthy of the Guggenheim, but it a little easier to look at and clearer who is sending the messages and who is receiving.

Going Forward

View the Finished Project Here:

Resources:

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer