在 Socket.IO 聊天室中基于 Context API 显示用户列表

import React, { createContext, useState, useContext } from 'react';

const RoomContext = createContext();

export const RoomProvider = ({ children }) => {
  const [room, setRoom] = useState('');

  const updateRoom = (newRoom) => {
    setRoom(newRoom);
  };

  return (
    <RoomContext.Provider value={{ room, updateRoom }}>
      {children}
    </RoomContext.Provider>
  );
};

export const useRoom = () => useContext(RoomContext);

import { RoomProvider } from './RoomContext';

function App() {
  return (
    <RoomProvider>
      {/* 你的应用 */}
    </RoomProvider>
  );
}

export default App;

import React, { useState, useEffect, useContext } from 'react';
import { useRoom } from './RoomContext';
import { AuthContext } from './AuthContext'; // 假设您有一个 AuthContext

const ChatMembers = ({ socket }) => {
  const currentUser = useContext(AuthContext); // 获取当前用户信息
  const [users, setUsers] = useState([]);
  const { room } = useRoom();

  useEffect(() => {
    // 监听 newUserResponse 事件，更新用户列表
    socket.on("newUserResponse", (data) => {
      setUsers(data);
    });

    // 组件卸载时移除事件监听器
    return () => {
      socket.off("newUserResponse");
    };
  }, [socket, room]); // 依赖项包括 socket 和 room

  return (
    <div>
      {users.map((user) => {
        // 条件渲染：只显示当前房间内的用户
        if (user.room === room) { // 假设服务器返回的用户数据中包含 room 字段
          return (
            <p key={user.socketID}>{user.currentUser.displayName}</p>
          );
        } else {
          return null; // 不显示其他房间的用户
        }
      })}
    </div>
  );
};

export default ChatMembers;

const io = require('socket.io')(http);

let users = [];

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

  socket.on('join_room', (data) => {
    const { room, username } = data;
    socket.join(room);

    // 添加用户到用户列表
    const newUser = {
      socketID: socket.id,
      currentUser: { displayName: username }, // 假设 username 是用户名
      room: room,
    };
    users.push(newUser);

    // 广播更新后的用户列表
    io.to(room).emit('newUserResponse', users.filter(user => user.room === room));

    socket.on('disconnect', () => {
      console.log(`User disconnected: ${socket.id}`);
      // 从用户列表中移除用户
      users = users.filter((user) => user.socketID !== socket.id);
      // 广播更新后的用户列表
      io.to(room).emit('newUserResponse', users.filter(user => user.room === room));
    });
  });
});