-1

我正在开发一个聊天应用程序，但我在使用 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);
  });

然后 WHich 进入一个自定义钩子并添加到消息数组中。

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(...) 等等。但我做错了。

有人可以帮忙吗？

非常感谢提前！！:-)

4

1 回答 1

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

});
于 2020-01-14T00:13:16.730 回答