Nodejs socket.io 多房间聊天室

Node.js Socket.io 多房间聊天室

在Node.js中使用Socket.io创建一个多房间的聊天室是一个非常有趣且实用的功能。通过不同的URL来区分不同的房间，并且在用户进入房间后建立Socket连接，这样就可以实现房间之间的隔离。

如何传递房间号？

当你希望在用户进入房间时传递房间号并将其与特定的Socket连接关联起来，你可以通过客户端发送一个包含房间号的事件来实现这一点。服务器端则监听这个事件，并将该Socket连接添加到相应的房间集合中。

示例代码

首先，确保你已经安装了Socket.io库：

npm install socket.io

接下来，我们创建一个简单的服务器端代码来处理多房间聊天：

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);

let rooms = {};

io.on('connection', (socket) => {
    console.log('New client connected');

    // 监听加入房间的事件
    socket.on('joinRoom', ({ username, room }) => {
        if (!rooms[room]) {
            rooms[room] = [];
        }
        
        socket.join(room);
        rooms[room].push({ id: socket.id, username });
        console.log(`${username} joined room ${room}`);
        io.to(room).emit('message', { user: 'admin', message: `${username} has joined the chat.` });

        // 广播消息给当前房间内的所有用户
        socket.on('sendMessage', ({ message }) => {
            io.to(room).emit('message', { user: username, message });
        });

        // 用户离开房间时的处理
        socket.on('disconnect', () => {
            const roomIndex = rooms[room].findIndex(user => user.id === socket.id);
            if (roomIndex !== -1) {
                const leftUser = rooms[room][roomIndex];
                rooms[room].splice(roomIndex, 1);
                console.log(`${leftUser.username} left room ${room}`);
                io.to(room).emit('message', { user: 'admin', message: `${leftUser.username} has left the chat.` });
            }
        });
    });
});

server.listen(3000, () => console.log('Server is running on port 3000'));

client.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-Room Chat</title>
</head>
<body>
    <input type="text" id="username" placeholder="Enter your name">
    <input type="text" id="room" placeholder="Enter room name">
    <button onclick="joinRoom()">Join Room</button>
    <div id="chatBox" style="height: 300px; overflow-y: scroll;"></div>
    <input type="text" id="messageInput" placeholder="Type a message">
    <button onclick="sendMessage()">Send Message</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket;
        function joinRoom() {
            const username = document.getElementById('username').value;
            const room = document.getElementById('room').value;

            socket = io();
            socket.emit('joinRoom', { username, room });
        }

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

        socket.on('message', (data) => {
            const chatBox = document.getElementById('chatBox');
            chatBox.innerHTML += `<p><strong>${data.user}:</strong> ${data.message}</p>`;
        });
    </script>
</body>
</html>

解释

server.js: 服务器监听用户的连接，并处理用户加入房间、发送消息以及离开房间的逻辑。
client.js: 客户端负责用户输入（用户名、房间名）并通过Socket.io与服务器通信。

通过这种方式，你可以轻松地创建一个多房间聊天应用，每个房间都有自己的独立空间，用户可以在不同的房间之间自由切换。

bupafengyu 2楼

http://www.jianshu.com/p/40d8bc17529f

itying888 3楼

api有rooms直接用就可以

sinazl 4楼

我自己用过两个办法一个是登录用http请求进来之后用http发请求还有一个是在socket认证的时候多一部操作有点类似三次握手但我们进行两次第一次进入公关空间然后服务器响应返回一个welcome然后用户发送房间号并开始监听这个房间号这样服务器也拿到了房间号可以接受信息并广播了自豪地采用 CNodeJS ionic

yuanlaile 5楼

可以收发文件就好了

sinazl 6楼

3楼正解，官方网站也有示例代码啊。

ionicwang 7楼

在Node.js中使用socket.io实现多房间聊天室时，可以通过传递房间号来区分不同的房间，并将用户的socket连接加入相应的房间。以下是一个简单的示例代码，展示了如何实现这一功能。

示例代码

安装依赖

首先，确保你已经安装了socket.io库：
```
npm install express socket.io
```

服务器端代码 (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);

// 存储房间的映射
const rooms = {};

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

  socket.on('joinRoom', (roomName) => {
    if (!rooms[roomName]) {
      rooms[roomName] = [];
    }
    rooms[roomName].push(socket.id);
    socket.join(roomName);
    console.log(`User ${socket.id} joined room: ${roomName}`);
  });

  socket.on('sendMessage', (data) => {
    const { room, message } = data;
    io.to(room).emit('receiveMessage', { from: socket.id, message });
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected:', socket.id);
    for (const room in rooms) {
      const index = rooms[room].indexOf(socket.id);
      if (index > -1) {
        rooms[room].splice(index, 1);
      }
    }
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端代码 (client.js)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Chat</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <input type="text" id="roomName" placeholder="Enter Room Name">
  <button onclick="joinRoom()">Join Room</button>
  <div id="messages"></div>
  <input type="text" id="message" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>

  <script>
    const socket = io();

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

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

    socket.on('receiveMessage', (data) => {
      const messagesDiv = document.getElementById('messages');
      messagesDiv.innerHTML += `<p><strong>${data.from}</strong>: ${data.message}</p>`;
    });
  </script>
</body>
</html>

解释

服务器端
- 创建一个Express应用并启动HTTP服务器。
- 使用socket.io处理WebSocket连接。
- 当用户连接时，监听joinRoom事件来加入指定的房间，并将用户添加到该房间的列表中。
- 用户发送消息时，通过sendMessage事件将消息广播给该房间内的所有用户。
- 当用户断开连接时，从房间列表中移除该用户。
客户端
- 提供输入框让用户输入房间名，并点击按钮加入房间。
- 提供输入框让用户输入消息，并点击按钮发送消息。
- 监听来自服务器的消息，并显示在页面上。

通过这种方式，你可以轻松地实现多房间聊天室的功能。