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

With source code and live demo

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://pixochi.github.io/socket.io-react-hooks-chat-client-v2/

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…