如何通过外部网络访问 create-react-app

Question

I have created a simple create-react-app which opens a websocket connection to an equally simple websocket echo server in python.

Everything works fine on my local network, however I'd also like to try to connect from outside my local network. To accomplish this I've forwarded port 3000 on my router to the computer running the create-react-app application and tested by connecting a separate computer through the hotspot on my smartphone to the ip address of my router at port 3000.

This fails without properly connecting to the python websocket echo server. I can connect from an external network to the create-react-app (the default logo is displayed and the page is displayed properly) however the issue is when using the react app to connect to the python echo server.

Any ideas on where to go from here?

Here is the relevant code in 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>
    );
  }
}

I also reference <EchoWebsocket /> later in App.js

Here is the python websocket echo server:

#!/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

将 App.js 中的 ip 地址更改为路由器的 ip 地址，并将路由器中的 8765 端口转发到运行 websocket 回显服务器的计算机，这样这段代码就可以在本地网络和外部网络上工作。