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

【问题标题】：How can I access create-react-app over external network如何通过外部网络访问 create-react-app
【发布时间】：2019-06-29 13:58:15
【问题描述】：

我创建了一个简单的 create-react-app，它在 python 中打开一个与同样简单的 websocket 回显服务器的 websocket 连接。

在我的本地网络上一切正常，但我也想尝试从本地网络外部进行连接。为此，我将路由器上的 3000 端口转发到运行 create-react-app 应用程序的计算机，并通过智能手机上的热点将另一台计算机连接到我路由器的 3000 端口 IP 地址进行测试。

如果没有正确连接到 python websocket 回显服务器，这将失败。我可以从外部网络连接到 create-react-app （显示默认徽标并且页面正确显示）但是问题是使用 react 应用程序连接到 python echo 服务器时。

关于从这里去哪里有什么想法吗？

这里是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>
    );
  }
}

我稍后在 App.js 中也引用了<EchoWebsocket />

这里是 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()

【问题讨论】：

您的 websocket 连接在浏览器中运行 - 本地主机地址错误

标签： node.js python-3.x reactjs networking websocket

【解决方案1】：

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

【讨论】：