Какова лучшая практика для переподключения websocket в реакции? - PullRequest
Новая
       27

Какова лучшая практика для переподключения websocket в реакции?

0 голосов
/ 26 октября 2019

У меня есть приложение реагирования с опросом билетов (билет является частью ссылки для подключения через веб-сокет). Затем я передаю объект websocket другому компоненту, потому что только этот (другой) компонент должен получить .send(). После входа или выхода пользователя мне нужно получить новый билет для нового соединения, потому что на сервере есть специальные данные для зарегистрированных пользователей. Как мне организовать свой код для этой задачи?

Я попытался переназначить объект ws после входа в систему / выхода из системы, но получил «Назначения переменной 'ws” изнутри React Hook. UseEffect будет потеряно после каждого рендеринга ». Я не могу сохранить назначение 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} />;
};

1 Ответ

0 голосов
/ 26 октября 2019

Обернуть соединение WebSocket и сообщение в функцию. проверьте, если 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);
};
...