什么是 websocket 在反应中重新连接的最佳实践？答案

【问题标题】：What is best practice to websocket reconnect in react?什么是 websocket 在反应中重新连接的最佳实践？
【发布时间】：2019-10-26 10:02:51
【问题描述】：

我已经通过票证轮询反应应用程序（票证是 websocket 连接链接的一部分）。然后我将 websocket 对象传递给另一个组件，因为只有这个（另一个）组件应该使 .send() 用户登录或注销后，我需要为新连接获取新票，因为服务器具有登录用户的专用数据。我应该如何组织我的代码来完成这个任务？

我尝试在登录/注销后重新分配 ws 对象，但得到“每次渲染后从 React Hook 内部分配给 'ws' 变量的分配”错误我无法将 ws 赋值存储在 useEffect 挂钩中，因为这样我就无法将其作为道具传递正如你所见，我虽然在使用 Redux

const App = () => {
  const { ticket, isLoggedIn } = useSelector(state => state);
  const dispatch = useDispatch();

  useEffect(() => {
    const requestTicket = () => {
      fetch('http://some/api/websocket', {
        method: 'POST'
      })
        .then(response => response.json())
        .then(ticket => {
          dispatch(setTicket(ticket));
        });
    };
    requestTicket();
  }, [dispatch]);

  let ws = new WebSocket('ws://socket/' + ticket);

  useEffect(() => {
    fetch('http://some/api/websocket', {
      method: 'POST'
    })
      .then(response => response.json())
      .then(ticket => {
        ws = new WebSocket('ws://socket/' + ticket);
      });
  }, [isLoggedIn, ws]);

  ws.onmessage = e => {
    dispatch(setData(JSON.parse(e.data)));
  };

  return <Child ws={ws} />;
};

【问题讨论】：

标签： javascript reactjs redux websocket react-hooks

【解决方案1】：

将 WebSocket 连接和 onmessage 包装在一个函数中。检查WebSocket是否关闭，回调函数。也可以使用 setTimeout。示例：

function connect(){
  //WebSocket Connection
  //WebSocket onmessage
}
conn.onclose = evt => {
console.log('Socket is closed.Reconnect will be attempted in 10 second.', evt.reason);
    setTimeout(() => connect(), 10000);
};

【讨论】：

1. 中不会定义 WebSocket 2. 服务器不关闭 WebSocket。我刚开始连接新网址

【解决方案2】：

我就是这样用的

function connect() {
  var ws = new WebSocket('ws://localhost:8080');
  ws.onopen = function() {
    // subscribe to some channels
    ws.send(JSON.stringify({
        //.... some message the I must send when I connect ....
    }));
  };

  ws.onmessage = function(e) {
    console.log('Message:', e.data);
  };

  ws.onclose = function(e) {
    console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
    setTimeout(function() {
      connect();
    }, 1000);
  };

  ws.onerror = function(err) {
    console.error('Socket encountered error: ', err.message, 'Closing socket');
    ws.close();
  };
}

connect();

【讨论】：