如何通过 WebSocket 实现服务器向浏览器主动推送消息-H5教程-PHP中文网

websocket通过一次http握手升级为持久tcp连接，实现服务器主动推送；客户端用new websocket()发起请求，服务端返回101状态码完成升级，之后双方可随时双向通信。

如何通过 websocket 实现服务器向浏览器主动推送消息

WebSocket 能让服务器在连接建立后，不等浏览器发请求就直接把消息送过去。核心在于它不是 HTTP 那种“问一句答一句”的模式，而是一次握手成功，就维持一个长连接，双方随时可发数据。

先完成握手，再建立持久通道

客户端用 new WebSocket('ws://...') 发起一个 HTTP 请求，头里带 Upgrade: websocket；服务端识别后返回 101 Switching Protocols，连接就从 HTTP 升级成 WebSocket。之后 TCP 连接一直开着，不再反复建连拆连。

浏览器兼容性较好，现代主流浏览器（Chrome、Firefox、Edge、Safari）都原生支持 ws/wss
服务端一旦拿到 Session 或连接实例，就能随时调用 sendText() 或 sendBinary() 推送内容
连接断开时会触发 onclose 事件，服务端也能监听 @OnClose 做清理

Spring Boot 中快速集成

用 Spring 的 spring-boot-starter-websocket 依赖，配合 STOMP 协议或原生 WebSocket 注解，几行代码就能搭好基础推送能力。

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

加依赖：在 pom.xml 中引入 spring-boot-starter-websocket
配端点：写一个 @ServerEndpoint("/notify") 类，用 @OnOpen/@OnMessage/@OnClose 标注生命周期方法
广播或定向：维护一个 ConcurrentHashMap<string session></string> 存在线用户，按用户名或 ID 精准推送；或遍历所有 session 实现群发

前端接收和响应要简单可靠

浏览器端只需监听 onmessage 事件，拿到字符串或 JSON 就能更新 DOM，比如刷新未读数、弹提示框、加聊天气泡。

连接成功后，websocket.onopen = () => { console.log('已连上') }
收到消息：websocket.onmessage = e => { const data = JSON.parse(e.data); updateBadge(data.count) }
异常处理别漏掉：websocket.onerror 和自动重连逻辑建议加上，避免闪断失联

注意实际部署的几个关键点

开发时 ws://localhost:8080 没问题，上线后常遇到跨域、反向代理、SSL 等问题，得提前对齐。

Nginx 需显式开启 WebSocket 支持：配置 proxy_http_version 1.1 和 proxy_set_header Upgrade $http_upgrade
生产环境要用 wss://，证书必须有效，否则浏览器会直接拒绝连接
单机部署时连接数有上限，高并发场景建议结合 Redis + Topic 做集群间消息中转