Question

我已经对票证投票做出了回应（票证是Websocket连接链接的一部分）。然后，我将websocket对象传递给另一个组件，因为只有这个（另一个）组件才能使.send() 用户登录或注销后，我需要获取新的票证以进行新的连接，因为服务器为登录的用户提供了专用数据。如何为该任务组织代码？

我试图在登录/注销后重新分配ws对象，但是在每次渲染后收到“从React Hook useEffect内部对'ws'变量的分配将丢失”错误我无法将ws分配存储在useEffect挂钩中，因为那样我就无法将其作为prop传递我正在使用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} />;
};

Answer 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);
};

Websocket重新连接以响应的最佳实践是什么？

1 个答案: