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>
)
}
useEffect(() => {
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 !`} />)
setPlayer2(data.player)
})
return () => {socket.off(PokeBattleSocketEvents.GAME_PLAYER_JOINED);}
}, [socket]);
export const SocketProvider = ({children}) => {
const [socket] = useState(() => io(import.meta.env.VITE_API_ENDPOINT));
// ...
};
但请注意,在开发中,清理功能也将在安装时称为。在这种情况下,您可以选择其他钩子,例如使用。