# 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_API`**（localStorage）。 - 若未配置，再使用构建时注入的 **`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，连接时**优先使用该配置**，因此只要用户填写的地址在浏览器侧可达（本机/内网/公网），就可以正常连接。