使用 MERN 堆栈和 socket.io 进行私人聊天

Question

我正在使用 MERN 堆栈和 socket.io 开发一个私人聊天应用程序。

我能够成功地向特定用户发送私人消息，但无法包含消息发件人以显示给两个用户。

客户

export default function Chat({ users }) {
    const [activeUser, setActiveUser] = useState('');
    const [currentUser, setCurrentUser] = useState(null);
    const [filteredList, setFilteredList] = useState([]);
    const [message, setMessage] = useState('');
    const [chats, setChats] = useState([]);

    useEffect(() => {
        const jwt = isAuthenticated().user;
        setCurrentUser(jwt);
        config.socket;
        config.socket.on('isOnline', (data) => {
            console.log(data);
        });
    }, []);

    useEffect(() => {
        const list = users.filter(user => currentUser ? user._id !== currentUser._id : user._id);
        setFilteredList(list);
    }, [currentUser]);

    useEffect(() => {
        config.socket.on('chat', (data) => {
            setChats([...chats, data]);
        });
    }, []);

    const changeActiveUser = (e, user) => {
        e.preventDefault();
        console.log(`changeActiveUser ${JSON.stringify(user)}`);
        setActiveUser(user);
    };

    const handleClick = e => {
        e.preventDefault();
        const msg = {
            socketId: activeUser.socketId,
            to: activeUser._id,
            toUser: activeUser.username,
            message: message,
            from: currentUser._id
        }
        // config.socket.emit('join', {id: activeUser.socketId, username: activeUser.username})
        console.log(`Private MSG ${JSON.stringify(msg)}`);
        config.socket.emit('private', msg);
        setMessage('');
    }


    return (
        <>
            <div className='container'>
                <div className='row'>
                    <div className='col-3 leftSide'>
                        {filteredList.map((user) => (
                            <li key={user._id} className={`list ${user._id === activeUser._id ? 'active' : ''}`} onClick={e => changeActiveUser(e, user)}>
                                <img className='userImg' src={user.gender === 'Female' ? '/female.jpg' : '/male.jpg'} /> {user.name} <small>&nbsp;({user.username})&nbsp;<span>{user.online ? 'online' : 'offline'}</span></small>
                            </li>
                        ))}
                    </div>
                    <div className='col-9 rightSide'>
                        <div className='row'>
                            <div className='col rightTop'>
                                <h1>{activeUser.username ? `${activeUser.username} (${activeUser._id})` : 'Start a chat!'}</h1>
                                <ul>
                                    {chats && chats.map((chat, i) => (
                                        <li key={i}>
                                            <span>{activeUser._id === chat.from ? <span style={{ float: 'left' }}>{`${activeUser.username}: ${chat.message}`}</span> : <span style={{ float: 'right' }}>{`Me: ${chat.message}`}</span>}</span>
                                            {/* <div>{activeUser._id === chat.to ? <div style={{ float: 'right' }}>{`Me: ${chat.message}`}</div> : ''}</div> */}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <hr />
                        {activeUser && (
                            <div className='row rightBottomContainer'>
                                <div className='rightBottomInput'>
                                    <input value={message} type='text' onChange={(e) => setMessage(e.target.value)} placeholder=' Enter your chat...' />
                                </div>
                                <div className='rightBottomButton'>
                                    <button onClick={(e) => handleClick(e)} type='submit'>Send</button>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}

服务器

const users = {};

io.on('connection', (socket) => {
  console.log(`${socket.id} connected`);

  socket.on('signin', (data) => {
    users[data.username] = data.socketId;
    socket.emit('isOnline', { userId: data.userId, online: true });
  });

  console.log(`USERS: ${JSON.stringify(users)}`);

  // socket.on('join', (data) => {
  //   console.log(`JOIN: ${JSON.stringify(data)}`);
  //   socket.join(data.id);
  // });

  socket.on('private', (msg) => {
    console.log(`users[msg.toUser] ${users[msg.toUser]} === msg.socketId ${msg.socketId}`);
    if (users[msg.toUser] === msg.socketId) {
      console.log(msg);
      io.to(msg.socketId).emit('chat', msg);
    }
  });

  socket.on('disconnect', () => {
    console.log(`${socket.id} disconnected`);
  });
});

我需要帮助来包含发件人以及要显示给两个用户的消息。而且我还想正确附加消息，因为上面的代码覆盖了之前的消息。

Answer 1

您可以创建一个包含 2 个用户的房间。每次您想开始私人聊天时。我只是使用类似下面的代码来实现它。

假设我们有一个id = 1 的用户想要向id = 2 的用户发送一条消息。所以我们创建了一个房间名称1-2，所以当第一个用户想向第二个用户发送消息时，你必须在客户端初始化socket.io时将1-2添加到查询中：

socket = socketIOClient(ENDPOINT, {
  query: {
    room: "1-2",
  },
});

现在您在服务器上知道用户想要连接到哪个房间。因此您可以使用以下代码将房间添加到您的套接字：

io.use(async function(socket, next) {
    socket.room = socket.handshake.query.room;
    return next();
}

所以现在你可以使用 socket.io 的room 功能将消息发送给发送者和接收者，如下所示：

socket.on('private', (msg) => {
    socket.broadcast
    .to(socket.room)
    .emit("chat", msg)
});

整个服务器代码将是这样的：

io.use(function(socket, next) {
    socket.room = socket.handshake.query.room;
    return next();
})
.on("connection", function(socket) {
    socket.on('private', (msg) => {
        socket.broadcast
        .to(socket.room)
        .emit("chat", msg)
    });
}