Build a Real-Time Chat App With React Hooks and Socket.io

With source code and live demo

Jakub Kozak
Jul 13, 2020 · 4 min read
Real-time chat app built with React, NodeJS and Socket.io

If you’d like to jump straight to the point or just want to get an overview of what we’re going to build, you can check out the app in action.

Live demo: https://socket-io-react-hooks-chat.herokuapp.com/

Source code: https://github.com/pixochi/socket.io-react-hooks-chat

1. Overview

We’re going to create a web app for sending messages between multiple users in real time. Client(browser) uses React for user interface and Server runs on NodeJS. To achieve real-time communication, we’ll establish a WebSocket connection between Client and Server with Socket.io.

WebSocket 101

The app uses WebSocket for an instant exchange of messages sent by users. Let’s look at some steps how a WebSocket connection is created.

  1. If Client wants to use WebSocket instead of traditional HTTP, an HTTP GET request must be sent with special headers asking Server for connection upgrade.
  2. If Server supports WebSocket, the response confirms possibility of connection upgrade.
  3. Once the handshake is finished, the connection provides a way for bidirectional communication. Both Client and Server can emit and listen for events until one of them closes the connection.
Upgrade from HTTP to WebSocket

2. Client

We’ll set up the app with Create React App by running just one command:

npx create-react-app socket.io-react-hooks-chat

Then we need to install socket.io-client for creating a WebSocket connection and its management. We also need react-router-dom for support of more than 1 route.

npm install socket.io-client react-router-dom

The app can be started with:

npm start

Routing

App.js handles 2 main routes — Home for creating a chat room and ChatRoom for actually sending and receiving messages. The Home and ChatRoom components will be created in the next step.

New chat room

Home.jsx

Home.jsx contains a text input for a room name. Only users in the same room will be able to chat together.

The green “Join Room” button links to a chat room with the provided room name.

Chat room

ChatRoom.jsx

ChatRoom.jsx is where we create a WebSocket connection and exchange messages with other users in the chat room.

Management of the connection and messages is handled by the useChat React hook that is described in the next step.

useChat hook

When the chat room is opened, we use socket.io-client to create a connection to a local server(yet to be created) running on http://localhost:4000. When creating the connection, roomId is sent as a query parameter in order to group users by room name.

The hook exposes an object containing:

  • messages: an array of received and sent messages
  • sendMessage: a function that emits an event with a new message to the server

The socket also listens for incoming messages. When a new message is received, it is added to the array of all messages.

3. Server

We need only a very simple server setup to forward messages to all users in the same room. The server has to support WebSocket so we’ll install the socket.io package.

npm install socket.io

We start by creating a basic HTTP server that is used for an upgrade to WebSocket. The server listens on port 4000 — that’s what we defined also in useChat.js.

Once the socket is open, it listens for the event we emit in the React app. The message, that is carried by that event, is then forwarded to all users in the same room by emitting another event. The client picks up the event and adds the message to the array of all messages.

Run the server with:

node server.js

If everything is correct, you should see “Listening on port 4000” in your terminal.

The Startup

Get smarter at building your thing. Join The Startup’s +725K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store