将连接到现有 websocket 的 js 代码转换为 react js 应用程序

Question

我已经编写了这个 js 代码来连接到我自己的 ruby​​ websocket（两个不同的连接，但只考虑一个。一旦连接，它会等待一条消息，解析它，然后显示一个带有一些逻辑的 div（这部分现在不在范围内） .

   window.onload = function(){
        var documento_da_visionare = '<?php echo $hk; ?>';
        var websocket = new WebSocket('wss://smartscreen.nangapar.com:8443');
        var websocket1 = new WebSocket('wss://smartscreen.nangapar.com:8443');
        var durata = 30;
        websocket.onopen = function(){ 
          //document.title = "VB: " + documento_da_visionare; 
          websocket.send("registra:" + documento_da_visionare);
        } 
        websocket1.onopen = function(){ 
          websocket1.send("registra:allmypage");
        }
        websocket.onmessage = function(evento){
          nome_comando    = evento.data.split(":")[0] 
          valore_comando = evento.data.substr(nome_comando.length + 1); 
          switch (nome_comando){
          //code will continue with the display logics out of scope here

一切正常，但我想在 React 中实现它来学习它。 我已经阅读了很多文章和教程，但我需要在重构这段代码的正确方向上“踢”一下。 我应该从哪里开始？ 我想获得的最重要的改进是在断开连接时重新连接并在客户端断开连接时显示。 任何提示/帮助？

Answer 1

你问了几个问题：

1-如何在断开连接时重新连接并在断开连接时通知用户：

最好是使用 socket.io 库，你必须在两端，服务器和客户端使用它。 它为您处理这两种情况，但是如果您坚持使用纯 websocket，则必须在服务器和客户端之间进行 ping/pong 以了解连接是否存在，一侧触发，ping，另一侧回答用pong，pong侧要检查ping的较大间隔，看是否被ping通。

2- 如何在 React 中做到这一点：

如果你是 reactjs 的新手，路径有点长。 先大体学习reactjs，再学习react中的单向数据流，然后就可以使用一些状态管理，比如MobX。 当您从服务器获取事件时，您更新状态，然后状态将重新渲染事件触发到 UI。