h5 server send event(sse)

1. sse概述

概念：

 H5支持使用JS脚本不间断的访问服务器(推送)

轮询:

页面使用js的定时器，定时发送请求查询最新数据
使用js将最新数据加载至页面
每发送一次数据，需要建立新的连接
时间间隔由客户端决定
优点：不需要刷新页面、实时更新
缺点：定时器时间间隔间隔太长：数据不及时间隔太短：服务器压力太大

SSE基于长轮询：

建立一次连接即可
连接断开会自动重连（需要保证客户端没关闭）
只能从服务器发送数据到客户端
SSE实现比较简单
时间间隔由服务器决定

SSE流程：

客户端发送消息到服务器
服务器发送数据到客户端（业务数据、间隔时间）
存在阻塞（接收到服务器发过来的数据才能开始下一次请求）

原理（流）：

严格地说，HTTP 协议无法做到服务器主动推送信息。
但是，有一种变通方法，就是服务器向客户端声明，
接下来要发送的是流信息（streaming）。
也就是说，发送的不是一次性的数据包，而是一个数据流，
会连续不断地发送过来。这时，客户端不会关闭连接，
会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。
本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。
SSE 就是利用这种机制，使用流信息向浏览器推送信息。
它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持

2. sse代码实现

 <script>// 原生jsvar source=new EventSource("地址");source.onmessage=function(e){//e参数就是事件参数// e.data 就表示服务器返回的数据};// jQuery$(source).on("message",function(e){//e参数是包装之后的事件参数//var data=$(e).attr("data");var data=e.data;});//open    连接打开之后//message 服务器返回之后//error  服务器访问失败之后//var ele="<div></div>";//$(ele); //变成了一个对象</script>

服务器servlet为例

String data="data:数据内容\n\n"; //返回给浏览器的数据String retry="retry:毫秒数\n\n"; //指定下次尝试的间隔时间//可选，不写表示没有间隔response.setContentType("text/event-stream");response.setCharacterEncoding("utf-8");OutputStream out=response.getOutputStream();out.write(data.getBytes("utf-8"));out.write(retry.getBytes("utf-8"));out.close();

3. 总结

取代了计时器不断访问服务器，由服务器控制访问的时间。
sse的取代品websocket。

h5 server send event(sse)相关推荐

python udp 大文件_Python UDP服务器发送文本文件的行(Python UDP Server send lines of a text file)...
Python UDP服务器发送文本文件的行(Python UDP Server send lines of a text file) 我需要模拟一个UDP服务器,它在无限循环中逐行发送文本文件的内容. ...
server sent event
h5提出的server sent event支持服务端数据发生改变时向客户端发送数据,而不用使用ajax长轮询来请求数据.Server sent event技术有几个优点:①轻量,相对简单②单向传送数 ...
Spark History Server和Event Log详解
前言 Spark如何持久化event SHS启动参数 SHS工作流程 DiskCache 读取eventlog 参考前言这篇文章会overall的介绍一下Spark History Server和 ...
python server send event_[Python之路] 多种方式实现并发Web Server
下面我们使用Python来实现并发的Web Server,其中采用了多进程.多线程.协程.单进程单线程非阻塞的方式. 一.使用子进程来实现并发Web Server importsocketimport ...
Client向Server send数据，返回WSAEWOULDBLOCK错误
参见MSDN中的一段: The FD_WRITE network event is handled slightly differently. An FD_WRITE network event is ...
【SpringBoot】服务器端主动推送SSE技术讲解
=====================16.高级篇幅之SpringBoot2.0服务器端主动推送SSE技术讲解 ============================ 1.服务端推送常用技术介绍 ...
基于Server-Sent Event的简单在线聊天室
一.Web即时通信所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
ajax轮询模拟websocket,Ajax轮询和SSE服务器推送数据与websocket模式的区别性学习
我们试想一下我们做个实时聊天的窗口有几种方法? 在我们不刷新页面并且可以试试更新页面内容的方法你这时候是不是想到了ajax没错确实可以 Ajax轮询什么是轮询?顾名思义就是我轮着问你,规定一个时间 ...
服务器端事件发送SSE
背景近期有这么一个需求: 手机端需要展示一个比较大的pdf 基于手机端网络/流量/体验等考虑,希望不通过pdf下载然后展示而是把pdf转成一张张的图片,然后再在手机上展示. 分析 pdf转图片,肯 ...

h5 server send event(sse)

1. sse概述

2. sse代码实现

3. 总结

h5 server send event(sse)相关推荐

最新文章

热门文章