24kycj
83 lines
4.7 KiB
Markdown
83 lines
4.7 KiB
Markdown
# 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，连接时**优先使用该配置**，因此只要用户填写的地址在浏览器侧可达（本机/内网/公网），就可以正常连接。
|