Many modern websites and applications are focused on building better relationships with their clients or users through real-time communication. Only some people want to go through the stress of reaching out to customer care via phone or waiting to get feedback after sending an email, which is why many businesses have incorporated live chat app features into their websites/apps. Live chat apps also work on social media platforms where users can communicate with each other in real-time. In case you’ve ever thought about what goes into creating a live-chat platform, this article covers the guidelines for creating a simple chat platform using three central tech stacks: Node.js, WebSocket, and Socket.io.
Node.JS is one of the most popular open-source, cross-platform technologies that can power microservice designs, desktops, IoT, and online applications. The platform uses JavaScript code that can run outside a browser and work as a front-end and back-end language.
Most modern web apps/websites require some form of real-time communication for chatting with other users or getting quick responses regarding the platform. To save time and improve communication, many websites/applications utilize a real-time chat platform where information can flow continuously from the client to the server and vice-versa.
In response to the need for a chat platform, the HTML5 WebSocket Protocol was created to exchange messages and information in real-time.
Based on that context, the article aims to provide a guideline for creating a sample real-time chat platform or application using Node.js, WebSocket, and Socket.io.
Understanding the Tech Stack: Node.js, WebSocket & Socket.io
At Fetchly Labs, developers use Node.js to work on different projects based on a client's preferences and the nature of the project itself. When creating a chat platform, this popular run-time environment creates the back end of a real-time chat app, including creating rooms and managing users within those rooms.
Node.js works by producing non-simultaneous codes implemented by servers such as PHP, Ruby, or Python, and it uses events to achieve the back-end creation. Node.js also has a unique package manager called npm, which is easy to install, update, and delete.
Conversely, WebSocket is a transmission platform for developing synchronized communication between the web server and the client. In this case, a client sends a request to the server, and the server responds by sending back information to the client based on the request. Both the server and client can send data in WebSockets, which makes it a two-way communication process.
Socket.io is the JavaScript library built using the WebSocket API to enable live communication between the web server and the client/user. It is a library that allows easier use of WebSockets.
How to Create a Simple Live Chat Platform using Node.js
Initialize the App
To initialize the app, begin with the server code. Open a new terminal and create a folder named chat-app.
Save the folder in the root directory and enter the npm init or yarn init command in the terminal to initialize the project or app.
Create the Server Side of the Chat App
It’s important to note that the WebSocket specification defines an API and creates “socket” connections between a web browser and a server. Simply put, this API allows users to send messages to a server and receive feedback without requesting a response from the server.
Apart from using the WebSocket API to implement the real-time capabilities of the chat platform, we can also use its library, called Ws, a pure WebSocket implementation for Node.js. Ws is relatively easy to use and works fast.
Creating the server side of the chat application will be done in a file called
index.js.
Here’s how the file name would be saved: chat-app/index.js.
How the Server Side Works
- Create an HTTP server and move all requests to a special handler to serve all the static files from the public directory. This is necessary to access the client-side resources of the chat app, such as JavaScript, HTML, and CSS files.
- The next step would be to create a new aspect of the WebSocket server and attach it to the existing HTTP server. Pay attention to incoming WebSocket client connections by including an event listener for the connection event.
- Whenever a new client connects to your server, you can see the incoming messages, and when a new message pops up, it can be broadcasted to all the connected users.
- The broadcast() function is more like a repetition towards all known clients, where all connected users are called to use the send() function. This is the beauty of Node.js, and though the server that was just created might seem basic, it still does the job well.
Creating the Client-Side of the Chat App
In this case, another compact and simple fragment of code, essentially a little HTML and some basic JavaScript code, will be used. The page can be created in a file named public/index.html, and this is how it’ll be written: chat-app/index.html.
At this point, you can include some styles in a folder called index.css, located in the public directory, to improve how the app looks. Following the same pattern as the others, the folder will be saved like this: chat-app/index.css
The HTML page for the chat app is just a piece of straight-up web development. Therefore, it doesn’t require so many comments. Native WebSocket object is used to create a connection to the Node.js server, and the client can start looking out for messages from the server as they are displayed in new div elements as they pop up.
It’s important to note that the messages received from the server are binary data, so a JavaScript Object called FileReader can be used to read the contents of raw data. Conversely, clients send messages to the server via a simple textbox and a button found within a form.
How to Run the Application
After creating the server and client side of the chat app, you can try to run it immediately. Simply Launch the server using this command: node index.js 8080
Next, open several browser tabs or run two different browsers, and point them towards
http://localhost:8081 to start chatting.
To improve your app by launching multiple scenarios, start another server on another port:
node index.js 8081
The result should showcase two different users connected to two separate servers and be able to exchange chat messages.
Closing Remarks
The steps above should help anyone trying to create a simple chat platform. However, it’s important to practice regularly to get it right.
*This is not the official Fetchly opinion but the opinion of the writer who is employed by Fetchly*