web应用从服务器主动推动数据到客户端的方式

发布于:2025-08-01 ⋅ 阅读:(17) ⋅ 点赞:(0)

html5 websocket

全双工交互
全双工通信:建立持久连接,服务端和客户端可随时互相发送消息
低延迟:适合实时应用(聊天、游戏、股票行情等)
socket协议是与HTTP协议平级的,websocket协议是建立在TCP协议之上的,默认端口是80和443,与HTTP协议兼容,可通过HTTP协议的升级机制来建立websocket连接

  • 工作原理:
    握手,客户端和服务器通过HTTP协议交换信息,以确认彼此支持websocket协议。
    握手成功后,就可在同一个TCP连接上进行数据的双向传输

支持文本和二进制数据的传输
没有同源限制,允许客户端与任何服务器通信,断线检测
new WebSocket(‘wss://example.om/scoket’).onMessage = (event) => { … }

websocket通过flash

HTTP长轮询(Long Polling)

最大兼容性
客户端发送请求,服务端保持连接直到有数据可发送,收到响应后,客户端立即发起新请求

优点:异步请求,客户端易实现错误处理系统和超时管理。实时性较好,能支持大量用户,断线检测

缺点:需服务器端有特殊功能临时挂起连接,但具有一定风险且失去了无状态高并发特点

HTTP流(HTTP streaming)

保持单个HTTP连接开发,服务器端通过同一连接持续发送数据,使用Transfer-Encoding:Chunked

不可见的iframe

不推荐
使用iframe加载一个隐藏网页,利用浏览器一边加载,一边解析执行返回的HTML,通过分次返回script标签来实现消息推送。创建长连接,但服务器开销大,且IE、chrome等浏览器会一直处于loading状态

优点:每次数据传送不会关闭连接,连接只会在通信出现错误时,或连接重建时关闭,断线检查,实时

可跨域

Server-Sent Event(SSE)

简单实时更新
单向通信:服务端向客户端推送,一次请求,N次推送
基于HTTP:比websocket更简单,自动重连

  • 工作原理
    服务器向客户端发送一个持久的连接,可以不断的向客户端发送数据。客户端可实时推送数据到前端,断线检测

支持自定义事件:服务器可发送带自定义事件类型的数据,客户端通过addEventListener监听这这些事件
支持文本数据:默认支持文本数据,如需二进制数据,要编码
兼容性较好,适用于实时通知,实时监控,实时数据展示等
new EventSource(‘/update’).onMessage = (event) => { … }
服务器端设置HTTP响应头,content-type:text/event-stream

短轮询

每个一段时间发起一个请求到后端询问是否有新信息,性能浪费较高

web worker

允许js在后台线程中运行脚本的技术,避免阻塞主线程。运行在与主页分离的环境中,不能直接操作DOM或访问window对象中某些方法和属性。
可用于实现实时通信,如聊天应用中的消息推送