socket房间事件未在React组件中收到 我正在开发一个基于转弯的游戏,并为一个学者项目开发react,fastify和socket.io。 玩家A创建游戏,该游戏使用游戏ID作为房间ID创建套接字室服务器端。他wai ...

问题描述 投票:0回答:0
export function Lobby() { // Other stuff ... const {socket, emitEvent, listenEvent, dropEvent} = useContext(SocketContext) socket.on(PokeBattleSocketEvents.GAME_PLAYER_JOINED, (data: object) => { console.log("player joined", data); toast.custom((t) => <Toast t={t} msg={`Player ${data.player} joined your lobby !`} />) }) return (<></>) }

当玩家B尝试加入游戏时,它将插座事件发送到服务器,以便可以将事件发送到房间,以便播放器A知道玩家B已加入游戏。这是将事件发送到服务器的Reac组件:

export function GameRow(props) { const {socket, emitEvent} = useContext(SocketContext) const navigate = useNavigate() const joinGame = async () => { const response = await gameJoin(props.token, props.userId, props.game.id, PokeBattleGameActions.JOIN); if (response.error) { toast.custom((t) => <Toast t={t} msg={response.error} level={"danger"}/>) } else { socket.emit(PokeBattleSocketEvents.GAME_PLAYER_JOINING, {roomId: props.game.id, userId: props.userId}) navigate("/game/lobby/" + props.game.id) } } return ( <> <tr> <td> {props.game.creator} </td> <td> <Button label={"Join game"} btnWidth={"btn-sm"} click={joinGame} /> </td> </tr> </> ); }

玩家b在将“ game_player_joining”事件发射到服务器的“大厅”之后正确地重定向到“大厅”。
server方面,这一活动受到了良好的接待,但是当它发出活动时。这是服务器端代码:

app.io.on(PokeBattleSocketEvents.CONNECTION, (socket) => { socket.on(PokeBattleSocketEvents.GAME_CREATE_ROOM, async (data) => { const game = await Game.findByPk(data.gameId) socket.join(game.dataValues.id) }) socket.on(PokeBattleSocketEvents.GAME_PLAYER_JOINING, async (data) => { socket.join(data.roomId) console.log("dummy log") socket.to(data.roomId).emit(PokeBattleSocketEvents.GAME_PLAYER_JOINED, { 'player': data.userId, 'gameId': data.roomId }) }) })

但是,播放器A不会收到“ game_player_joined”事件,该事件如您在第一个代码片段中看到的那样在lobby.tsx组件中处理的事件(日志和烤面包机未触发)。
I可以确认播放器的套接字室ID(使用游戏ID)都是相同的,并且服务器应在记录“虚拟日志”消息时发出最后一个事件。

插座是与:

的进口商。

useContext(SocketContext)

我的问题是,玩家A未接收插座房间事件。 我已经检查了类似的问题,但没有运气:

NODE.JS,REECT SOCKET.IO EMIT()不起作用

:问题是关于不向服务器发出的事件,而不是对我的Question

SocketIO,React-未接收从服务器发出的事件:我尝试将socket.on('')放在使用效果中,但没有解决我的问题 - >

export const SocketProvider = ({children}) => { const socket = io(import.meta.env.VITE_API_ENDPOINT); useEffect(() => { socket.on(PokeBattleSocketEvents.TEST_EVENT, (data: object) => { console.log(data) return () => socket.off(PokeBattleSocketEvents.TEST_EVENT) }); socket.on(PokeBattleSocketEvents.GAME_CREATE_ROOM, (data: object) => { console.log(data) }) return () => { socket.off(PokeBattleSocketEvents.TEST_EVENT) socket.off(PokeBattleSocketEvents.GAME_CREATE_ROOM) } }, []); const emitEvent = async (event: string, data: object) => { socket.emit(event, data) } return ( <SocketContext.Provider value={{socket, emitEvent, listenEvent, dropEvent}} > {children} <Outlet/> </SocketContext.Provider> ) }

反应不响应服务器[套接字io]
    :我试图将插座连接置于使用效果中,但是我的应用程序不断重新恢复组件,这些组件却杀死了我的Computeral
  • Socket加入了房间,但没有在房间中收到活动:答案与我的问题无关
  • SocketIO不向房间中的所有用户发出活动:没有valide答案
eDit


但请注意,在开发中,清理功能也将在安装时称为。在这种情况下,您可以选择其他钩子,例如使用。

reactjs typescript socket.io fastify
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.