Vue SocketIO从远程主机连接本地http://myhostname.local失败如何解决

该跨网络连接需求可实现，你当前连接失败的原因如下：

• 你代码中配置的WebSocket连接地址为http://myhostname.local:5000，.local是局域网mDNS协议的专属域名后缀，仅能在与树莓派同属一个局域网的设备上完成解析，公网环境无法识别该地址。
• 你开放的是远程服务器的5000端口，但你的WebSocket服务实际运行在本地树莓派上，公网环境默认无法直接访问局域网内的设备端口，该端口开放配置与当前连接失败问题无关。
• 部署到远程服务器的WebApp为前端应用，代码实际运行在访问者的浏览器环境中，若访问者不在树莓派所在的局域网，自然无法连接到树莓派的本地WS服务。

• 方案1：配置内网穿透
  为树莓派的5000端口配置内网穿透，通过有公网IP的服务器做中转，将树莓派的WS服务暴露到公网，之后将代码中的连接地址替换为穿透后的公网地址即可。可使用frp、ngrok等工具实现，配置时建议开启加密和身份校验，避免服务被恶意访问。
• 方案2：新增远程中转服务
  在已部署WebApp的远程服务器上额外部署一套WebSocket中转服务，树莓派主动向中转服务发起WS长连接并保持在线，用户访问WebApp时也连接到该中转服务，需要向树莓派下发数据时由中转服务完成消息转发即可。该方案无需将树莓派直接暴露到公网，安全性更高。
• 方案3：改用MQTT协议传输
  若仅需要实现远程应用向本地树莓派单向传输数据，可改用MQTT协议，两端都连接到自行部署或第三方的MQTT broker，通过订阅、发布对应主题完成消息传输，更适配物联网场景的低频次小数据量传输需求。

内容的提问来源于stack exchange，提问作者mchev