【问题标题】:Socket IO cannot receive message after joining roomSocket IO 加入房间后无法接收消息
【发布时间】:2020-03-07 07:12:24
【问题描述】:

我正在构建一个应用程序,让您可以加入游戏,然后接收来自游戏中其他玩家的更新。在添加房间功能之前,套接字工作正常,但现在客户端不会收到广播到各自房间的消息。

服务器代码:

io.on('connection', client => {
      // JOIN GAME
      client.on('join-game', ({gameId, playerId}) => {
        console.log(gameId)
        client.join('new-room', () => {
          io.sockets.in('new-room').emit('player-joined-game', 'Is this thing on?);
        })
    });

客户代码:

componentDidMount = () => {
  const socket = socketIOClient('localhost:5000');
  socket.on('player-joined-game', game => {
    console.log(game)
  })
}

服务器收到消息,但客户端没有打印'Is this thing on?'

【问题讨论】:

    标签: reactjs express socket.io react-redux


    【解决方案1】:

    显然,您的客户可能还没有加入任何游戏,因为您的客户没有发出“加入游戏”消息。 加, 您在 url 字符串中错过了“http://”。

    您可以在客户端尝试以下操作吗:

    componentDidMount = () => {
      const socket = socketIOClient('http://localhost:5000');
      socket.on('player-joined-game', game => {
        console.log(game)
      });
      socket.emit('join-game',{gameId:'game1',playerId:'player1'});
    }
    
    
    

    【讨论】:

    • 嘿@dropyourcoffee,感谢您的回复!正如我所说,当我不使用房间时,客户端代码可以正常工作,所以我认为问题不是 url。 “加入游戏”消息由 redux 操作发出,并在服务器中正确接收。此处发出的消息io.sockets.in('new-room').emit('player-joined-game', 'Is this thing on?); 未在客户端中接收。
    • 好的。也许原因是服务器端的js client.join('new-room', () => { io.in('new-room').emit('player-joined-game', 'Is this thing on?); }) 而不是js client.join('new-room', () => { io.sockets.in('new-room').emit('player-joined-game', 'Is this thing on?); }) ??
    • 是的,我已经看到了两种方法,我都尝试了,但都没有成功!
    • 我不是 100% 确定,因为我不知道您是如何实现 redux 操作的,但也许值得怀疑组件是否在触发 redux 操作之前最初安装。
    • 我还尝试将render 中的所有代码移动到无济于事:(
    【解决方案2】:

    原来这是由于每次我将“加入房间”消息从客户端发送到服务器时创建一个新的套接字实例造成的。这意味着每次我加入一个房间时,我都会在房间里添加一个新的插座。这是通过将我的客户端套接字声明移动到一个常量文件并将其拉入我所有的 socketIO 使用来解决的。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-01-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-31
      相关资源
      最近更新 更多