H5数据推送

nidaye 发布于2019-08-21 14:52 / 2939人阅读

摘要：本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。数据推送有两种替代方案无更新方案和数据拉取方案。数据拉取和数据推送的功能目标是一致的让用户看到最新的数据。但数据推送有一些优势，即更低的延迟。

前言

众所周知，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

轮询
轮询：客户端定时向服务器发送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


WilsonLiu"s blog首发地址：http://blog.wilsonliu.cn

服务器托管 idc机房托管推送数据 h5 数据库 java推送数据获取推送的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88040.html

H5数据推送

摘要：本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。数据推送有两种替代方案无更新方案和数据拉取方案。数据拉取和数据推送的功能目标是一致的让用户看到最新的数据。但数据推送有一些优势，即更低的延迟。前言众所周知，AJAX的出现是前端快速发展的一个标志，同时也是前后端得以分离的重要基础。作为一个C/S网络的web系统，网络通信在发挥着举足轻重的作用。大部分的场景下，我们是主动触发...

刘德刚 2019-06-27 14:58 评论0 收藏0
H5数据推送

摘要：本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。数据推送有两种替代方案无更新方案和数据拉取方案。数据拉取和数据推送的功能目标是一致的让用户看到最新的数据。但数据推送有一些优势，即更低的延迟。前言众所周知，AJAX的出现是前端快速发展的一个标志，同时也是前后端得以分离的重要基础。作为一个C/S网络的web系统，网络通信在发挥着举足轻重的作用。大部分的场景下，我们是主动触发...

dackel 2019-08-05 10:28 评论0 收藏0
【网易云信】H5 容器技术方案

摘要：开发原生应用是手机操作系统厂商目前主要是苹果的和的对外界提供的标准化的开发模式，他们对于开发提供了一套标准化实现和优化方案。同时增加对模版的校验，防止资源的篡改。与的请求委托，将鉴权信息等部分接口委托至端，增加安全性。 Native 开发原生应用是手机操作系统厂商（目前主要是苹果的 iOS 和 Google 的 Android）对外界提供的标准化的开发模式，他们对于 Native 开发...

longshengwang 2019-08-05 11:47 评论0 收藏0
HTML5 安全问题解析

摘要：本地安全问题在之前引入了本地这个东西，但是后面被废除了，他的安全点和后台数据库的关注点差不多，就是要防止在数据中混入查询指令。僵尸网络风险中解决了单线程问题，提出了机制，它为提供多线程支持，但是多线程带来了一个非常可怕的危险僵尸网络。 HTML5 安全问题解析标签： html html5 web安全本文参考： w3school:html5相关基础知识（w3school.com.c...

Lowky 2019-08-02 18:19 评论0 收藏0
HTML5 安全问题解析

摘要：本地安全问题在之前引入了本地这个东西，但是后面被废除了，他的安全点和后台数据库的关注点差不多，就是要防止在数据中混入查询指令。僵尸网络风险中解决了单线程问题，提出了机制，它为提供多线程支持，但是多线程带来了一个非常可怕的危险僵尸网络。 HTML5 安全问题解析标签： html html5 web安全本文参考： w3school:html5相关基础知识（w3school.com.c...

maybe_009 2019-08-01 14:51 评论0 收藏0