Files
SoonWorkerD/docs/WEBSOCKET_DEPLOY.md
T
2026-05-12 21:42:42 +08:00

4.7 KiB
Raw Blame History

WebSocket 与网页端部署说明

问题说明

程序通过 WebSocket 与后端服务通信(设备状态、作业列表、系统配置等)。该服务在桌面端场景下是 Windows 本机运行的服务(默认 ws://127.0.0.1:10010)。

网页端打包部署后能否连接,取决于“浏览器连的是谁”:

  • 网页运行在用户浏览器里,new WebSocket("ws://127.0.0.1:10010") 会连接的是当前用户所在设备的 127.0.0.1,而不是你放网页的那台服务器。
  • 因此:
    • 用户和 Windows 服务在同一台电脑:例如在本机浏览器打开部署在本机的页面,用 ws://127.0.0.1:10010 可以连到本机服务,可以连接
    • 用户和 Windows 服务不在同一台电脑:例如网页部署在服务器 A,用户在手机或另一台电脑 B 打开,此时 127.0.0.1 指向的是 B,连不到 A 上的服务,无法连接

所以:把程序打包放到网页端后,只有在“能访问到 WebSocket 服务”的情况下才可以连接;默认写死 127.0.0.1 时,只适合“网页和服务在同一台机器”或“用户本机也跑了该服务”的场景。


已做改造:可配置 WebSocket 地址

为支持不同部署方式,已做两点改动:

1. 连接时优先读“用户配置”

  • 连接 WebSocket 时优先使用本地存储中的 WS_SOCKET_APIlocalStorage)。
  • 若未配置,再使用构建时注入的 process.env.VUE_APP_SOCKET_API(默认 ws://127.0.0.1:10010)。

因此同一套网页包可以:

  • 部署在服务器上,由用户在登录页填写“实际要连的 WebSocket 地址”;
  • 或由部署方在构建时通过环境变量写死一个公网/内网地址。

2. 登录页可填写并保存地址

  • 登录页增加 “设置 WebSocket 服务地址”(可展开/收起)。
  • 用户可输入例如:
    • ws://127.0.0.1:10010(本机服务)
    • ws://192.168.1.100:10010(内网某台机器上的服务)
    • wss://your-domain.com/ws(通过域名 + HTTPS 的 WSS 服务)
  • 失焦或保存后写入 localStorage,下次进入或刷新后,连接会使用该地址。

这样网页端打包部署后,只要用户(或管理员)在登录页把地址改成“实际可访问的 WebSocket 服务地址”,就可以正常连接。


常见部署方式与是否可连接

部署方式 网页访问方式 WebSocket 地址建议 能否连接
网页和 Windows 服务都在同一台电脑 本机浏览器打开(如 http://localhost:9081 或 file:// ws://127.0.0.1:10010(默认即可) 可以
网页在服务器,服务仍在用户本机 用户在本机浏览器打开网站 在登录页设为 ws://127.0.0.1:10010(本机须已运行该服务) 可以(仅限本机也跑服务时)
网页在服务器,服务在内网另一台机器 用户在内网任意电脑打开网站 在登录页设为 ws://内网机器IP:10010(或该机域名) 可以(需网络可达、无策略拦截)
网页在公网,服务在公网服务器 任意设备打开网站 构建时设 VUE_APP_SOCKET_API=wss://api.xxx.com/ws,或在登录页填写该地址 可以(需后端提供 wss 与跨域策略)

使用步骤(网页端部署后)

  1. 打开登录页,点击 “设置 WebSocket 服务地址”
  2. 填入实际可访问的地址,例如:
    • 本机:ws://127.0.0.1:10010
    • 内网机器:ws://192.168.1.100:10010
    • 公网:wss://your-api.com/ws
  3. 失焦后会自动保存到当前浏览器;之后登录或刷新页面,会使用该地址连接。
  4. 若更换环境(换电脑/换网络),在同一浏览器重新打开登录页,修改并保存新地址即可。

构建时写死地址(可选)

若部署环境固定(例如始终连同一台服务器),可在构建网页时注入默认地址,减少用户手动填写:

  • 开发/测试:在 config/dev.env.js 中设置 VUE_APP_SOCKET_API
  • 生产:在 config/prod.env.js 或 CI 中设置 VUE_APP_SOCKET_API(如 wss://api.xxx.com/ws)。

未在登录页保存过地址时,会使用该默认值;保存过后以登录页配置为准。


总结

  • 默认 ws://127.0.0.1:10010 只适合“浏览器所在机器 = 运行 WebSocket 服务的机器”的情况。
  • 网页端打包部署后:通过登录页可配置 WebSocket 地址并写入 localStorage,连接时优先使用该配置,因此只要用户填写的地址在浏览器侧可达(本机/内网/公网),就可以正常连接。