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.
- 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.
- If Server supports WebSocket, the response confirms possibility of connection upgrade.
- 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
#socketio #chat-app-development #nodejs #react #react-hook
