ReactJs + Electron - 套接字连接仅在重新加载后工作答案

【问题标题】：ReactJs + Electron - Socket connection only working after reloadReactJs + Electron - 套接字连接仅在重新加载后工作
【发布时间】：2020-08-05 12:18:42
【问题描述】：

我正在使用 react 和 electron 进行一个小项目，该应用程序连接到英雄联盟套接字，该套接字使用此库 (https://league-connect.supergrecko.dev/docs/api) 从游戏中读取数据。

为了让电子和内部工作的库做出反应，我使用：

window.ipcRenderer = require("electron").ipcRenderer;
window.league_connect = require("league-connect");

然后我使用 window.league_connect 在反应中使用它。然后在一个组件中创建一个套接字并开始监听一个事件。

window.league_connect.connect(this.props.lcuConnector.connection)
      .then((socket) => {
        this.socket = socket;
        console.log("conected to socket");
        this.subscribeChampSelection();
      })
      .catch((err) => {
        console.log(err);
      });

它可以工作，但是当我打开套接字时，它不会监听任何消息，直到应用程序重新加载一次，然后一切正常。失败的另一件事是当我关闭套接字然后再次连接时，它会做同样的事情，我需要再次重新加载才能使其工作。

日志中没有错误，套接字已创建，一切看起来都很好，但只有在您重新加载页面时才有效。

发生这种情况有什么原因吗？感谢您的宝贵时间，如果我拼错了一些单词，我很抱歉，我的英语不太好。

【问题讨论】：

标签： reactjs sockets electron

【解决方案1】：

我发现任何仅在 node 上工作的库都不能很好地与 react 一起工作。但是电子确实如此，所以我在电子中制作了一些处理程序，它们从渲染器进程（可通过电子反应访问）调用主进程中的函数（无法从反应中访问）。

window.ipcRenderer = require("electron").ipcRenderer;

然后 electron 异步响应响应或执行我需要的任何代码，唯一的问题是您需要为需要调用的每个函数创建一个处理程序。

electron.js

ipc.handle("CHECK_READY_FOR_MATCH", checkReadyForMatch);

反应组件

const electron = window.electron;
electron.ipcRenderer.invoke(
            "CHECK_READY_FOR_MATCH",
            params
          );

【讨论】：