Как развернуть сервер Express и приложение React отдельно, подключенные через 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

У меня также есть приложение React, развернутое на Netlify, которое содержит:

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

Я протестировал соединение WebSocket на localhost с приложением React на 3000, сервер, работающий на 3001 и заменяющий соединение в приложении React на

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

, и он прекрасно работал.

У меня проблемы с тем, как только я их развернул, будучи возможность указать клиенту правильный источник на сервере. Если мне нужно включить new WebSocket(`ws://heroku-domain.com:${PORT}`), и если да, то как я могу получить правильный номер порта, если он динамически предоставляется Heroku.

Я думал о том, чтобы создать на сервере маршрут API для получения правильного номера порта. , а затем имплантировать, что в аргументе WebSocket.

Есть ли более чистый способ сделать это, чем этот?