本文将介绍如何利用 Context API 和 Socket.IO 构建一个在线聊天应用，并实现在特定房间内显示当前活跃用户列表的功能。重点讲解如何在 React 组件中使用 Socket.IO 接收用户信息，并结合 Context API 中的房间信息，过滤并渲染当前房间的用户列表。
前提条件
在开始之前，请确保您已具备以下基础知识：
- React 基础
- Context API 的使用
- Socket.IO 的基本概念和使用
实现步骤
-
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 ( <RoomContext.Provider value={{ room, setRoom }}> {children} </RoomContext.Provider> ); };在应用的根组件中包裹 RoomProvider，使所有子组件都可以访问房间信息。
// App.js import { RoomProvider } from './RoomContext'; function App() { return ( <RoomProvider> {/* 应用的其他组件 */} </RoomProvider> ); } export default App; -
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 实例改变时，都会重新注册事件监听。
-
用户列表过滤与渲染：
使用 users.map() 遍历用户数组，并使用条件判断筛选出当前房间的用户。
<div> {users.map((user) => { if (user.room === room) { return ( <p key={user.socketID}>{user.displayName}</p> ); } return null; // 或者返回一个空的 Fragment：<React.Fragment></React.Fragment> 或 <></> })} </div>优化建议：
-
可以使用 Array.filter() 方法先过滤出当前房间的用户，再进行渲染，提高性能。
const filteredUsers = users.filter(user => user.room === room); return ( <div> {filteredUsers.map(user => ( <p key={user.socketID}>{user.displayName}</p> ))} </div> );
-
-
完整代码示例：
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 ( <div> {filteredUsers.map(user => ( <p key={user.socketID}>{user.displayName}</p> ))} </div> ); }; export default ChatMembers;
总结
通过以上步骤，我们成功地实现了基于 Context API 和 Socket.IO 的房间内用户列表展示功能。 关键在于正确使用 useEffect 监听 Socket.IO 事件，并结合 Context API 中的房间信息，对用户列表进行过滤和渲染。记住在组件卸载时移除事件监听，防止内存泄漏。 使用 Array.filter() 优化性能，提高用户体验。 希望本教程能帮助您更好地理解和应用 Context API 和 Socket.IO。
