javascript - 使用socket.io,react.js和node.js进行实时通知

标签 javascript node.js reactjs sockets websocket

我正在使用react.jsnode.jsexpress.jssequelize开发一个游戏应用程序。

该应用程序很简单,一个玩家挑战另一个玩家(活跃玩家),并在接受挑战后玩游戏。

我正在尝试使用socket.io创建一个通知系统,但是socket.emit()socket.on()node.js下不起作用。我不知道这是怎么回事?

这是我的代码:

React



在质询按钮上发送此质询请求,请点击:
socket.emit('challenge request', { 
    player1_Name : localStorage.getItem('user-name'),
    player2 : response.data.data.player2_id,
    game : response.data.data.gameId,
    gameOption : response.data.data.gameOptionId,
    challengeStatus : response.data.data.challengeStatus
});     

并尝试从node.js接收此通知:
  socket.on("challenge-notify", function(data) {
    console.log("challenge Notify", data);
    helper(data.player1_Name,data.player2,data.game,data.gameOption);
  });  

Node



此处socket.emit('challenge-notify')函数在socket.on('challenge request')方法下不起作用:
    io.on('connection', function (socket) {
        socket.on('challenge request', function (challengeReq) {
          socket.emit('challenge-notify', { 
            player1_Name : challengeReq.player1_Name,
            player2 : challengeReq.player2,
            game : challengeReq.game,
            gameOption : challengeReq.gameOption,
            challengeStatus : challengeReq.challengeStatus
        });
    });
});

如果我将socket.emit('challenge-notify')方法放在socket.on('challenge request')方法之外,那么当我加载React组件时,我将在控制台获得结果。

但是,每当单击挑战按钮时,我都希望得到这个结果。
我怎样才能做到这一点?

最佳答案

是的,终于找到了解决方案。

我想在socket.emit中使用socket.on来做到这一点,我使用了io.sockets.emit方法,并且效果很好。

socket.on('challenge request', function (challengeReq) {
        io.sockets.emit('challenge-notify', { 
            player1_Name : challengeReq.player1_Name,
            player1: challengeReq.player1,
            player2 : challengeReq.player2,
            game : challengeReq.game,
            gameOption : challengeReq.gameOption,
            challengeStatus : challengeReq.challengeStatus

        });
    });

关于javascript - 使用socket.io,react.js和node.js进行实时通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51171285/

相关文章:

javascript - 如何让 Jest 不向我显示所有跳过的测试的摘要?

javascript - 如何避免Promise链中出现 'headers already sent'?

javascript - MQTT.js 订阅从代理接收多条相同消息

reactjs - React Apollo : One query, 多个参数 - 如何缓存?

javascript - 下一个 js : next auth provider + redux provider

javascript - 网站加载 javascript 后如何解析网站?

javascript - 使用 JavaScript 或 jQuery 传递变量以创建 <h3> 和 <div> 标签

javascript - react 原生 + react 原生路由器通量 : How to apply hideNavBar to only one <Scene/>?

javascript - 使用 className 样式化 react-toolbox 元素

javascript - 来自指令 Controller 的 Angular 调用 Controller 函数