使用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

您可以创建一个有两个用户的房间。每次你想开始私人聊天的时候。我只是使用了如下代码来实现这一点。

让我们假设有一个具有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的socket.io特性向发送方和接收方发送消息，如下所示：

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