本文共 1680 字，大约阅读时间需要 5 分钟。

SpringBoot + Vue 整合 WebSocket 实现前后端消息推送

场景

在 SpringBoot + Vue 的整合 WebSocket 实现消息推送的基础上，除了给前端页面进行数据推送，还需要对 Android 端进行数据推送。在特殊业务场景下，Android 端会经常性断网和关机，而 SpringBoot 后台部署在 Windows 服务器上。由于频繁的断网和关机，导致与后台 jar 包的 TCP 连接数不会关闭。当终端过多且累计一段时间后，TCP 连接数会超过最大连接数（默认 8000），导致服务提示拒绝连接。

在 Windows 服务器上，除了使用命令查看连接数外，还可以借助第三方工具（如 Cports 端口扫描工具）来筛选指定端口的连接。例如，可以在筛选器中输入 include both:tcp:7777，以筛选 7777 端口的连接。

实现

1. 模拟异常连接

可以通过 Android 模拟器以及 WebSocket 测试软件来模拟异常关闭连接（断网）的场景。首先建立多个连接，可以看到连接数会逐渐增多。当网络突然断开时，连接数不会立即关闭。待网络恢复后，连接数会持续增加。这时候可以通过 Cports 工具关闭连接或重启后台 jar 包以断开连接。

2. Nginx 配置 WebSocket 代理

Nginx 配置 WebSocket 代理需要参考官方文档。Nginx 从版本 1.3.13 开始支持 WebSocket 协议的代理，具体实现方式如下：

核心配置

map $http_upgrade $connection_upgrade {    default upgrade;    '' close;}

WebSocket 代理配置

location /websocket/ {    proxy_pass http://websocket;    proxy_http_version 1.1;    proxy_read_timeout 10s;    proxy_send_timeout 10s;    proxy_set_header Upgrade $http_upgrade;    proxy_set_header Connection $connection_upgrade;}

完整配置文件示例

upstream websocket {    server 10.229.36.139:7777;}map $http_upgrade $connection_upgrade {    default upgrade;    '' close;}server {    listen 88;    server_name localhost;    location / {        root html;        index index.html index.htm;    }    location /websocket/ {        proxy_pass http://websocket;        proxy_http_version 1.1;        proxy_read_timeout 10s;        proxy_send_timeout 10s;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection $connection_upgrade;    }}

3. 启动 Nginx

配置完成后，WebSocket 可以通过 88 端口进行连接。并且设置了 10 秒的超时时间，超过 10 秒没有消息传输就会关闭连接。

总结

通过上述配置，可以实现 WebSocket 的消息推送功能。前端页面和 Android 端都能正常接收数据。在特殊场景下，通过重启服务或关闭连接，可以有效管理 WebSocket 连接数，避免连接过载问题。

转载地址：http://bhcfk.baihongyu.com/