H5数据推送
来源:互联网 发布:e店宝官方下载3.0 mac 编辑:程序博客网 时间:2024/06/05 02:27
WilsonLiu’s blog 首发地址
前言
众所周知,AJAX的出现是前端快速发展的一个标志,同时也是前后端得以分离的重要基础。作为一个C/S网络的web系统,网络通信在发挥着举足轻重的作用。
大部分的场景下,我们是主动触发AJAX去调取后端数据,但是总有那么些场景是后端数据更新了再推送给前端。
本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。
首先,列一个常用可选的技术清单
- websocket
- SSE(Server-Sent Event)
- 轮询(长轮询)
数据推送
数据推送是由服务端选择向客户端发送新数据。
当数据源有新数据时,服务端能立刻将它发送给一个或多个客户端,而不用等客户端来请求。
数据推送有两种替代方案:无更新方案和数据拉取方案。
数据拉取和数据推送的功能目标是一致的:让用户看到最新的数据。但数据推送有一些优势,即更低的延迟。
但是在数据拉取的方式中,权衡会让你很纠结,要缩短延迟就要提高轮询的频次,要节省带宽和连接就要降低轮询的频次。
技术分析
websocket
webSocket是html5新引入的技术,允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无状态协议,协议名为”ws”,
这意味着一个websocket连接地址会是这样的写法:ws://wilsonliu.cn:8080/webSocketServer
。ws不是http,所以传统的web服务器不一定支持,
需要服务器与浏览器同时支持,WebSocket才能正常运行,目前的支持还不普遍,需要特别的web服务器和现代的浏览器。
// 在这里略去服务端实现,着重于比较客户端。 客户端实现可参考[参考链接2]var ws = new WebSocket("ws://localhost:4000"); // 这里新建一个websocket连接,ws此时是一个websocket句柄ws.onopen = function(){ // 常见的前端事件回调 console.log("握手成功");};ws.onmessage = function(e){ // 事件有 open,close,error,message console.log("信息:" + e.data); // 输出后台返回的信息};ws.send("测试")
SSE
SSE 是 HTML5 的 Server-Sent Events
缩写,服务器端发送的事件。网页自动获取服务器端的数据更新。
之前网页获取服务器端更新的数据是需要先想服务器发送情况,确定是否有数据变更,然后获取,而SSE是服务器 一旦有数据更新就主动向网页发送数据。
// 前端 var es = new EventSource("sse.php"); // 建立连接,EventSource只能单向通信,没有send函数 es.addEventListener("message", function(e){ // EventSource有3个事件, open,error,message console.log(e.data); },false);// php<?phpheader("Content-Type: text/event-stream"); while(true){ echo "data:".date("Y-m-d H:i:s")."\n\n"; @ob_flush();@flush(); // 立即将数据返回给客户端,而不是缓冲起来成批发送 sleep(1); }
轮询
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
function poll() { setTimeout(function() { $.get("/path/to/server", function(data, status) { console.log(data); // 发起下一次请求 poll(); }); }, 10000);}
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资源小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。
SSE与websocket的对比
websocket是一种更为复杂的服务端实现技术,但它是真正的双向传输技术,既能从服务端向客户端推送数据,也能从客户端向服务端推送数据。
websocket和SSE的浏览器支持率差不多。
SSE优势。
- 既存基础设施优势:不需要添加任何新组件,也不需要新建虚拟机,弄一个新的IP或新的端口号。
- 服务端更加简洁
- 文本协议,更方便调试
websocket优势
- 双向数据流(使用SSE时,一般通过独立的AJAX请求从客户端向服务端传送数据)
参考资料
- 知乎:WebSocket 是什么原理?为什么可以实现持久连接?
- 细说websocket - php篇
- 传统轮询、长轮询、服务器发送事件与WebSocket
- H5数据推送
- H5+推送插件开发
- H5+个推实现消息推送服务
- H5 Web Notification桌面推送消息
- h5遍历数据
- H5数据存储
- Andriod数据推送方案
- blazeds服务端推送数据
- websocket后台推送数据
- JavaScript数据推送
- Android与H5数据交互
- H5数据本地存储webStore
- Android与H5数据交互
- H5清空数据记录
- H5验证表单数据是否合法
- H5-localStorage数据存储总结
- h5 消息推送 jpush-phonegap-plugin 插件的使用
- h5/5+APP消息推送神器:Goeasy.js
- Java:反射构造的调用
- realloc,malloc,calloc的区别
- 针对于WebStorm工具开发React工程详细配置
- unity3D-游戏/AR/VR在线就业班 C#入门抽象类学习笔记
- 常用字符串函数
- H5数据推送
- WKWebView 与JS的交互
- Unity实战 RTS3D即时战略游戏开发(七) 信息显示
- git常用命令
- 《Android开发艺术探索》第九章四大组件的工作过程小结
- Webform和MVC,为什么MVC更好一些?
- 高德持续定位疑问??
- 在jsp和class文件中获取你工程的绝对路径
- 加载图片类