WebSockets are a technology for creating real-time, bi-directional communication channels over a single TCP connection. They help build applications that require low-latency, high-frequency communication, such as chat applications, online gaming, and collaborative software. In this tutorial, we will be building a real-time chat application using WebSockets and the Socket.IO library. We will use Node.js as the server-side language and React as the client-side technology. However, the principles discussed in this tutorial can be applied to any language or technology that supports WebSockets. Prerequisites Before we begin, you should have the following prerequisites: Basic understanding of JavaScript Basic understanding of Node.js and React Basic understanding of web development concepts, such as HTTP and HTML Node.js and npm installed on your machine React developer tools installed in your browser (optional, but helpful for debugging) Setting up the Server First, let's create a new directory for our project and navigate to it in the terminal. mkdir real-time-chat-app
cd real-time-chat-app Next, let's create a new Node.js project by running the following command: npm init -y This will create a file in our project directory. package.json Next, we need to install the Socket.IO library, which will handle the WebSocket communication for us. Run the following command to install it: npm install socket.io Now let's create a new file called in the root of our project directory. This will be the entry point for our server-side code. server.js In , we first need to require the and modules: server.js HTTP socket.io const http = require('http');
const io = require('socket.io'); Next, let's create an HTTP server and bind it to a port. We will use port 3000 for this example, but you can choose any available port on your machine. const server = http.createServer((req, res) => { res.end('Server is running!');
});
const port = 3000;
server.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
}); Now if we run the server by running in the terminal and navigate to in the browser, we should see the message "Server is running!". node server.js http://localhost:3000 Next, we need to attach the Socket.IO server to our HTTP server. We do this by calling the method on the object, and passing it to our HTTP server as an argument: listen io const ioServer = io.listen(server); Now that we have set up the server, let's move on to setting up the client-side code. Setting up the Client First, let's create a new directory called in the root of our project directory. This is where we will store the client-side code for our chat application. client Next, let's create a new React project in the directory. Run the following command in the directory: client client npm start Once you have created a new React project in the directory, you should have a and directory inside the directory. client public src client Inside the directory, create a new file called . This will be the root component of our chat application. src App.js First, let's import the required dependencies: import React, { useState, useEffect } from 'react'; import io from 'socket.io-client'; Next, let's create a function called that will handle the WebSocket communication for us. useWebSocket This function will return an object with three properties: : an array of messages that have been received from the server messages : a function that can be called to send a message to the server sendMessage : an error object that will be set if there is an error in the WebSocket connection error Add the following code to : App.js function useWebSocket() {   const [messages, setMessages] = useState([]);   const [error, setError] = useState(null);   useEffect(() => {     const socket = io('http://localhost:3000');     socket.on('connect', () => {       console.log('Connected to server!');     });     socket.on('disconnect', () => {       console.log('Disconnected from server');     });     socket.on('error', (error) => {       setError(error);     });     socket.on('message', (message) => {       setMessages((prevMessages) => [...prevMessages, message]);     });     return () => {       socket.disconnect();     };   }, []);   const sendMessage = (message) => {     if (socket.connected) {       socket.send(message);     }   };   return { messages, sendMessage, error }; } This code uses the hook to set up the WebSocket connection when the component mounts. We are also using the hook to keep track of the and state. useEffect useState messages error The function returns an object that contains the array, the function, and the object. useWebSocket messages sendMessage error Now let's use the function in our component. Add the following code to : useWebSocket App App.js function App() {
   const { messages, sendMessage, error } = useWebSocket();   if (error) {     return <div>Error: {error.message}</div>;   }   return (     <div>       <ul>         {messages.map((message) => (           <li>{message}</li>         ))}       </ul>       <form onSubmit={(event) => {         event.preventDefault();         const messageInput = event.target.elements.message;         sendMessage(messageInput.value);         messageInput.value = '';       }}>         <input name="message" />         <button type="submit">Send</button> function App() {   const { messages, sendMessage, error } = useWebSocket();   if (error) {     return <div>Error: {error.message}</div>;   }   return (     <div>       <ul>         {messages.map((message) => (           <li>{message}</li>         ))}       </ul>       <form onSubmit={(event) => {         event.preventDefault();         const messageInput = event.target.elements.message;         sendMessage(messageInput.value);         messageInput.value = '';       }}>         <input name="message" />         <button type="submit">Send</button>       </form>     </div>   ); }
 export default App; Now let's move on to handling the messages on the server side. Handling Messages on the Server In the file, let's add the following code to handle incoming messages: server.js ioServer.on('connection', (socket) => {   console.log('New client connected');   socket.on('message', (message) => {     console.log(`Received message from client: ${message}`);     ioServer.emit('message', message);   });   socket.on('disconnect', () => {     console.log('Client disconnected');   }); }); In this code, we use the connection event to handle new clients connecting to the server. We are also using the event to handle incoming messages from the client and the event to handle clients that disconnect from the server. message disconnect When a message is received, we simply log it to the console and then emit it back to all connected clients using the method. emit Now, if you start the server by running and navigate to in the browser, you should be able to send messages and see them displayed in real-time. node server.js http://localhost:3000 Conclusion This tutorial taught us how to create a real-time chat application using WebSockets and the Socket.IO library. We have set up a Node.js server and a React client and implemented the WebSocket communication using the hook on the client side and the , , and events on the server side. useWebSocket connection message disconnect You can extend this application in many ways, such as adding user authentication, storing messages in a database, and implementing more advanced features like message editing and deletion. I hope this tutorial has provided a good foundation for you to build on. Helpful Resources Microsoft websockets Basics of Websockets Also published here.

Building a Real-Time Chat Application with Websocket

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Fall Victim to Cyber Scammers

A Guide to Creating Fun User Polls and Surveys With QuickBlox in Your Flutter App

How To Build a Chat Application using Libp2p [A Step By Step Guide]

Building a Private Messaging Chat App with React-Native: An Essential Guide

"Code over a tile"// React - from sass files to Styled-Components.

How To Fall Victim to Cyber Scammers

A Guide to Creating Fun User Polls and Surveys With QuickBlox in Your Flutter App

How To Build a Chat Application using Libp2p [A Step By Step Guide]

Building a Private Messaging Chat App with React-Native: An Essential Guide

"Code over a tile"// React - from sass files to Styled-Components.

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps