在 socket.io 中动态创建聊天室

Question

我正在开发一个聊天应用程序，但在使用 socket.io 时遇到了一些问题。

这些东西效果很好而且很快。但是一旦有更多人登录 - 每个人都会看到所有消息并且呈现变得混乱。

我在每条消息中发送一个唯一的 ID，我很乐意创建房间，人们可以在这里聊天（1 对 1）

这首先发生：


  const socketMessage = {
    type: type,
    body: body,
    author: author,
    date: Date.now(),
    id: chatId
  };

    const io = require('socket.io-client');
    const socket = io(process.env.REACT_APP_WS_URL);
    socket.emit('message-sent', socketMessage);

这会转到发生这种情况的服务器：

  socket.on('message-sent', data => {
    socket.broadcast.emit('new-chat-message', data);
  });

然后进入自定义挂钩并添加到消息数组。

export default function useGetChatMessages(_id) {
  const [chatMessages, setChatMessages] = React.useState([]);

  React.useEffect(() => {
    const io = require('socket.io-client');
    const socket = io(process.env.REACT_APP_WS_URL);
    socket.emit('send-chat-id', _id);
    socket.on('chat-messages', data => {
      setChatMessages(data.messages);
    });
    socket.on('new-chat-message', message => {
      setChatMessages(messages => [...messages, message]);
      notification.play();
    });
  }, [_id]);

  return chatMessages;
}

我知道我的服务器上的广播部分是错误的，但我已经尝试了很多东西：

发送带有消息的 chatId，然后在几个阶段执行 socket.join(chatId)。然后 socket.to(chatId).emit(...) 等等。但我做不对。

有人可以帮忙吗？

提前致谢！！ :-)

Answer 1

实际上，您可以使用称为命名空间的套接字 io 功能。

看一个很简单的例子：

在客户端你会做这样的事情：

const socket = io.connect(socket_url, { query: "chatRoomId=123&userId=983912" });

在服务器端是这样的：

io.on('connection', (socket) => {
  const chatRoomId = socket.handshake.query['chatRoomId'];      
  const userId  = socket.handshake.query['userId'];

  const user = find(userId) // Pretend :)

  socket.join(chatRoomId);

  socket.on('new_message', (id, msg) => {
    io.to(chatRoomId).emit(`${user.name} says ${msg}`);
  });

  socket.on('disconnect', () => {
    socket.leave(chatRoomId)
    console.log('user disconnected');
  });

});

在 socket.io 中动态创建聊天室

Create chatrooms dynamically in socket.io

javascript

socket.io

reactjs

wavesurfer.js