基于 Context API 和 Socket.IO 实现房间内用户列表展示

本文将介绍如何利用 Context API 和 Socket.IO 构建一个在线聊天应用，并实现在特定房间内显示当前活跃用户列表的功能。重点讲解如何在 React 组件中使用 Socket.IO 接收用户信息，并结合 Context API 中的房间信息，过滤并渲染当前房间的用户列表。

前提条件

在开始之前，请确保您已具备以下基础知识：

• React 基础
• Context API 的使用
• Socket.IO 的基本概念和使用

实现步骤

1. Context API 设置：

   首先，我们需要使用 Context API 来管理房间信息。创建一个 RoomContext，并在应用中提供该 Context。

   // RoomContext.js
   import React, { createContext, useState } from 'react';
   
   export const RoomContext = createContext();
   
   export const RoomProvider = ({ children }) => {
     const [room, setRoom] = useState('');
   
     return (
       
         {children}
       
     );
   };

   在应用的根组件中包裹 RoomProvider，使所有子组件都可以访问房间信息。

   // App.js
   import { RoomProvider } from './RoomContext';
   
   function App() {
     return (
       
         {/* 应用的其他组件 */}
       
     );
   }
   
   export default App;

2. Socket.IO 事件监听：

   在 ChatMembers 组件中，使用 useEffect 监听 Socket.IO 的 newUserResponse 事件。该事件触发时，会收到包含所有用户信息的数组。

   import React, { useState, useEffect, useContext } from 'react';
   import { RoomContext } from './RoomContext';
   import { AuthContext } from './AuthContext'; // 假设您也有一个 AuthContext
   
   const ChatMembers = ({ socket }) => {
     const currentUser = useContext(AuthContext); // 获取当前用户信息（如果需要）
     const [users, setUsers] = useState([]);
     const { room } = useContext(RoomContext);
   
     useEffect(() => {
       socket.on("newUserResponse", (data) => {
           setUsers(data);
       });
   
       // 组件卸载时移除事件监听
       return () => {
         socket.off("newUserResponse");
       };
     }, [socket]); // socket 依赖项

   注意事项：

   

   智写助手

   智写助手 写得更快，更聪明

   下载
   • 在 useEffect 中返回一个清理函数，使用 socket.off() 移除事件监听，防止内存泄漏。
   • 将 socket 作为 useEffect 的依赖项，确保每次 socket 实例改变时，都会重新注册事件监听。

3. 用户列表过滤与渲染：

   使用 users.map() 遍历用户数组，并使用条件判断筛选出当前房间的用户。

    
   
       {users.map((user) => {
           if (user.room === room) {
             return (
               
   {user.displayName}
             );
           }
           return null; // 或者返回一个空的 Fragment： 或 <>
         })}
     

   优化建议：

   • 可以使用 Array.filter() 方法先过滤出当前房间的用户，再进行渲染，提高性能。

     const filteredUsers = users.filter(user => user.room === room);
     
     return (
       
     
         {filteredUsers.map(user => (
           
     {user.displayName}
         ))}
       
     );

4. 完整代码示例：

   import React, { useState, useEffect, useContext } from 'react';
   import { RoomContext } from './RoomContext';
   import { AuthContext } from './AuthContext'; // 假设您也有一个 AuthContext
   
   const ChatMembers = ({ socket }) => {
     const currentUser = useContext(AuthContext); // 获取当前用户信息（如果需要）
     const [users, setUsers] = useState([]);
     const { room } = useContext(RoomContext);
   
     useEffect(() => {
       socket.on("newUserResponse", (data) => {
           setUsers(data);
       });
   
       // 组件卸载时移除事件监听
       return () => {
         socket.off("newUserResponse");
       };
     }, [socket]); // socket 依赖项
   
     const filteredUsers = users.filter(user => user.room === room);
   
     return (
       
   
         {filteredUsers.map(user => (
           
   {user.displayName}
         ))}
       
     );
   };
   
   export default ChatMembers;

总结

通过以上步骤，我们成功地实现了基于 Context API 和 Socket.IO 的房间内用户列表展示功能。 关键在于正确使用 useEffect 监听 Socket.IO 事件，并结合 Context API 中的房间信息，对用户列表进行过滤和渲染。记住在组件卸载时移除事件监听，防止内存泄漏。 使用 Array.filter() 优化性能，提高用户体验。 希望本教程能帮助您更好地理解和应用 Context API 和 Socket.IO。