Building Realtime Chat Applications Using Node.js, Websockets And React.js

Creating a real-time chat application is an exciting journey that combines the power of Node.js, WebSockets, and React.js to deliver a seamless, instant messaging experience. This guide will walk you through building a chat app from scratch, focusing on clarity and the latest coding standards. Let’s dive into the world of real-time communication with a hands-on approach.

Prerequisites

Before we start, ensure you have the following installed:

• Node.js (v14 or newer)
• npm or yarn
• Visual Studio Code or your preferred IDE
• Basic understanding of JavaScript, React, and Node.js

Setting Up the Project

First, create a new directory for your project and initialize a new Node.js project:

mkdir real-time-chat
cd real-time-chat
npm init -y

Setting Up the Backend

1. Install Dependencies: We’ll use express for our server framework and ws for WebSocket communication.

npm install express ws

2. Create the Server: Create a file named server.js in your project root:

const express = require("express");
const WebSocket = require("ws");
const http = require("http");

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on("connection", (ws) => {
  console.log("Client connected");
  ws.on("message", (message) => {
    console.log("Received message:", message);
    // Broadcast message to all clients
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

This code sets up a basic WebSocket server that listens for connections, messages, and broadcasts messages to all connected clients.

Setting Up the Frontend

1. Create React App: In a new terminal window, create a React app:

npx create-react-app client
cd client
npm start

2. Install WebSocket Library: While ws is for the server, we’ll use the native WebSocket API available in browsers for the client.

3. Set Up the Chat Interface: Replace the content of src/App.js with:

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const ws = new WebSocket("ws://localhost:3000");

  useEffect(() => {
    ws.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };
  }, []);

  const sendMessage = () => {
    ws.send(inputValue);
    setInputValue("");
  };

  return (
    <div className="App">
      <header className="App-header">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button onClick={sendMessage}>Send</button>
        <div>
          {messages.map((message, index) => (
            <p key={index}>{message}</p>
          ))}
        </div>
      </header>
    </div>
  );
}

export default App;

This React component maintains a list of messages, provides an input for sending new messages, and displays all messages. It connects to the WebSocket server and listens for incoming messages.

Running the Application

1. Start the backend server (in the real-time-chat directory):

node server.js

2. Start the React app (in the real-time-chat/client directory):

npm start

Your real-time chat application is now running! Open multiple browser tabs at http://localhost:3000 to start sending and receiving messages in real-time.

Conclusion

Building a real-time chat application with Node.js, WebSockets, and React.js is a powerful way to learn about real-time web technologies. This guide provided you with the basic knowledge and a simple application structure. Remember, the world of web development is vast and constantly evolving. Experiment with more features like user authentication, message persistence (using databases), or even scaling the WebSocket server. The journey of learning and building never truly ends. Happy coding!

For more detailed insights, check out the original story on JavaScript in Plain English.