Как я могу получить доступ к create-реагировать на приложение по внешней сети

Question

Я создал простое приложение create-реакции-приложение, которое открывает подключение через веб-сокет к столь же простому эхо-серверу веб-сокетов в python.

В моей локальной сети все работает нормально, однако я также хотел бы попробоватьподключиться снаружи моей локальной сети.Для этого я перенаправил порт 3000 на своем маршрутизаторе на компьютер, на котором запущено приложение create-реагировать-приложение, и протестировал его, подключив отдельный компьютер через точку доступа на моем смартфоне к ip-адресу моего маршрутизатора на порту 3000.

Это не происходит без правильного подключения к эхо-серверу python.Я могу подключиться из внешней сети к приложению create-реагировать (отображается логотип по умолчанию и страница отображается правильно), однако проблема заключается в использовании приложения реакции для подключения к эхо-серверу Python.

Любые идеи о том, куда идти отсюда?

Вот соответствующий код в App.js:

// Address and port of the python websocket server
const URL = 'ws://localhost:8765'

class EchoWebsocket extends Component {
  ws = new WebSocket(URL);

  componentDidMount() {
    // Callback function when connected to websocket server
    this.ws.onopen = () => {
      // on connecting, do nothing but log it to the console
      console.log('Opening new websocket @' + URL);
      console.log('connected')
      console.log('Websocket readyState = ', this.ws.readyState);
    }

    console.log('Websocket readyState = ', this.ws.readyState);

    // Callback function when connection to websocket server is closed
    this.ws.onclose = () => {
      console.log('disconnected')
      console.log('Websocket readyState = ', this.ws.readyState);

      // automatically try to reconnect on connection loss
      console.log('Opening new websocket @' + URL);
    }

    // Callback function to handle websocket error
    this.ws.onerror = event => {
      console.log("WebSocket Error: " , event);
    }
  }

  render() {
    return(
      <div></div>
    );
  }
}

Я также упоминаю <EchoWebsocket /> позже в App.js

Вот эхо-сервер python websocket:

#!/usr/bin/env python

import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        await websocket.send(message)

asyncio.get_event_loop().run_until_complete(
    websockets.serve(echo, '', 8765))
asyncio.get_event_loop().run_forever()

Answer 1

Изменение IP-адреса в App.js на IP-адрес маршрутизатора и переадресация порта 8765 на маршрутизаторе на компьютер с эхо-сервером websocket позволяет этому коду работать как в локальной сети, так и из внешней сети.