Поддержание соединения WebSocket с React-Router

Question

В своем приложении React я устанавливаю sh соединение веб-сокета на домашней странице, и когда пользователь переходит на другой маршрут, соединение остается, но если они вручную открывают этот маршрут в своей адресной строке, соединение не устанавливается. Нужно ли устанавливать sh соединение на каждом маршруте? Сохраняет ли React-Router мой объект websocket в области видимости через разные маршруты, чтобы я мог это сделать?

Answer 1

Вот рабочий пример того, как это сделать, на основе базового c начального кода реакции-маршрутизатора. Важно убедиться, что веб-сокет создается и открывается в самом приложении, а не на каком-либо конкретном пути. Таким образом, он работает независимо от того, каким образом приложение открыто, т. Е. На любом маршруте / URL, при этом сохраняется связь между маршрутами.

Клиент:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

let ws;
let buffer = [];
const sendWhenOpen = (text) => {
  if (ws.readyState == 1) {
    ws.send(text);
  } else {
    buffer.push(text);
    ws.onopen = () => {
      buffer.forEach( (x) => {
        ws.send(x);
      });
    };
  }
}

export default function App() {
  ws = new WebSocket('ws://localhost:8080/');
  sendWhenOpen('connected!');

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  sendWhenOpen('user opened home');
  return <h2>Home</h2>;
}

function About() {
  sendWhenOpen('user opened about');
  return <h2>About</h2>;
}

function Users() {
  sendWhenOpen('user opened users');
  return <h2>Users</h2>;
}

Сервер:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});