node.js - 如何分别部署 Express Server 和 React App，通过 WebSocket/WebSocketServer 连接

Question

我正在构建一个国际象棋应用程序来在线对战其他人。

我有一个 Express 服务器，其中服务器的布局如下：

const PORT = process.env.PORT || 3001
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`))

const { Server } = require('ws')
const wss = new Server({ server })

这是部署到 Heroku

我还有一个部署到 Netlify 的 React 应用程序，其中包含：

export default function Board() {
    const connection = new WebSocket("ws://heroku-domain.com")

    useEffect(() => {
        connection.onopen = () => {
            console.log('connection established')
        }

        connection.onmessage = (message) => {
            // does stuff
        }
     }, [])

    return (
        {content}
    )
}

我已经在 localhost 上测试了 WebSocket 连接，React App 在 3000 上运行，服务器在 3001 上运行，并将 React App 中的连接替换为

const connection = new WebSocket(document.location.origin.replace(/^http/, 'ws').replace('3000', '3001'))

效果很好。

我遇到的问题是，一旦我部署了它们，就能够将客户端指向服务器上的正确源。如果我需要包括new WebSocket(`ws://heroku-domain.com:${PORT}`)，如果是这样，我如何获得正确的端口号，因为它是由 Heroku 动态提供的。

我的想法是在服务器上创建一个 api 路由以检索正确的端口号，然后将其植入 WebSocket arg 中。

还有比这更干净的方法吗？

标签： node.jsreactjsexpressherokuwebsocket