Create a Chat App Using ReactJs and Socket.IO

Posted on: May 12, 2023

This blog post talks about creating a chat app using ReactJs and Socket.IO. It contains a Home page for users to input their username, users then enter a Chat page where they can see everyone's messages. It is deployed vis Netlify: Chat App

Socket.IO

WebSockets is a web commnucation protocol that enables real-time bi-directional commnucation between web clients and servers over a single TCP connection.

Socket.IO is a library built on top of WebSockets but it also includes other features. For example:

  • Auto-reconnect after disconnected.
  • Has rooms that sockets can join and leave, so messages can be broadcast to users in that room only.
  • Uses WebSockets when available, but also has fallback transports such as Flash and AJAX.
  • The server side solution provided by Socket.IO unifies the client and server side APIs. Thus with Node, a server instance can be pass back to SocketIO for creating connection and event listeners like the way for client side.

Web Client and Web Server

A web client is a computer system that sends requests to web server via HTTP and displays the webpages it receives. It could be a smartphone or a web browser that allows users to interact with the web server. On the other hand, a web server is typically a database server that stores the webpages and responds to the web client requests. Together they enable users to access and view webpages from anywhere in the world.

How to connect Socket.IO to ReactJs Project

Server Side

Firstly we need to create a server.js file to handle our server side.

js
// server.js


// Create a HTTP server using the in-built HTTP module
const server = require("http").createServer();


// Initialise Socket.IO instance by passing in the server instance
const io = require("socket.io")(server, {


  // Declare the origin of your site, or put "*" to allow all sites.
  cors: {
    origin: ["http://localhost:3000", "https://chat-app-a74c75.netlify.app"],
  },
});


// Choose and declare your port number
const PORT = 4000;


io.on("connection", (socket) => {
  console.log(`${socket.id} user just connected!`);


  // Get all messages from connected users
  socket.on("message", (data) => {
    io.emit("messageResponse", data);
  });


  socket.on("disconnect", () => {
    console.log(`${socket.id} disconnected`);
  });
});


server.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

Run node [path-to-server.js-file] in terminal to check if it is connected, you will see Listening on port 4000 is being console logged out.

Client Side

In App.js file, you need to set up client side Socket.IO, make sure you are using the same port number you have declared on server side.

js
import socketIO from "socket.io-client";


const server = "http://localhost:4000";
const socket = socketIO.connect(server);

Issue

It works perfectly locally when server is running, but it does not work on other devices after deployment. I will come back to it when I have found a resolution.