Node .js multi room chat example

1. System Design

For a multi-room chat system, the primary goal is to enable users to create multiple chat rooms and send and receive messages across different rooms. To achieve this functionality, we commonly employ Node.js alongside the WebSocket protocol, which facilitates real-time, bidirectional communication between the server and clients.

The following are the basic steps to implement a multi-room chat system:

Initialize the project: Use the Node.js environment to initialize the project and install required packages.
Set up the WebSocket server: Choose an appropriate library (such as Socket.IO) to establish WebSocket connections.
Room management: Implement functionality for users to create rooms, join, and leave rooms.
Message broadcasting: Implement message broadcasting within rooms.

2. Technology Stack

Node.js: A server-side JavaScript runtime for handling backend logic.
Express: A web application framework for Node.js, used for quickly setting up servers.
Socket.IO: A WebSocket library that facilitates real-time, bidirectional, and event-based communication.

3. Code Implementation

a. Initialize the project and install dependencies

bash
mkdir chat-app
cd chat-app
npm init -y
npm install express socket.io

b. Create the server

javascript
// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.send("Chat Server is running");
});

io.on('connection', (socket) => {
    console.log("A user connected");

    socket.on('joinRoom', ({ username, room }) => {
        socket.join(room);
        socket.to(room).emit('message', `${username} has joined the room.`);
    });

    socket.on('chatMessage', ({ room, message }) => {
        io.to(room).emit('message', message);
    });

    socket.on('disconnect', () => {
        io.emit('message', 'A user has disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

c. Client implementation (HTML/JavaScript)

html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        function joinRoom() {
            const username = document.getElementById('username').value;
            const room = document.getElementById('room').value;
            socket.emit('joinRoom', { username, room });
        }

        function sendMessage() {
            const room = document.getElementById('room').value;
            const message = document.getElementById('message').value;
            socket.emit('chatMessage', { room, message });
        }

        socket.on('message', (message) => {
            const messages = document.getElementById('messages');
            const messageElement = document.createElement('li');
            messageElement.textContent = message;
            messages.appendChild(messageElement);
        });
    </script>
</head>
<body>
    <input type="text" id="username" placeholder="Username">
    <input type="text" id="room" placeholder="Room">
    <button onclick="joinRoom()">Join Room</button>
    <input type="text" id="message" placeholder="Message">
    <button onclick="sendMessage()">Send Message</button>
    <ul id="messages"></ul>
</body>
</html>

This simple example demonstrates how to use Node.js and Socket.IO to create a basic multi-room chat application. You can add more features as needed, such as user authentication, persistent storage for chat history, or more complex room management functionality.

2024年7月5日 13:39 回复