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



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

我知道我的服务器上的广播部分是错误的,但我尝试了很多东西:

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

有人可以帮忙吗?

提前非常感谢!! :-(

实际上,您可以使用称为命名空间的套接字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');
});
});

最新更新