使用 React-Router 维护 WebSocket 连接

Question

在我的 React App 中，我在主页建立了一个 websocket 连接，当用户导航到另一个路由时，连接仍然存在，但如果他们在地址栏中手动打开该路由，则不会建立连接。我只需要在每条路线上建立连接吗？ React-Router 是否通过不同的路由将我的 websocket 对象保持在范围内，以便我可以做到这一点？

Answer 1

这是一个基于 react-router 的基本入门代码的工作示例。重要的是要确保 websocket 是在 App 本身中创建和打开的，而不是在任何特定的路径中。这样，无论应用程序以哪种方式打开，即在任何路由/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');
});