您现在的位置是:网站首页> 编程资料编程资料
浅谈HTML5 服务器推送事件(Server-sent Events) html5服务器推送_动力节点Java学院整理 浅析HTML5的WebSocket与服务器推送事件
2021-08-31
1283人已围观
简介 这篇文章主要介绍了浅谈HTML5 服务器推送事件(Server-sent Events) ,具有一定的参考价值,有兴趣的可以了解一下
服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯。目前所有主流浏览器均支持服务器发送事件,当然除了 Internet Explorer 。2333...
WebSocket 协议是继HTTP协议后又一服务器客户端通讯协议,不同于HTTP单纯的客户端请求服务器响应单向通讯模式的是它支持了服务端客户端的双向通讯。
Server-sent Events 的使用
Server-sent Events(以下简称SSE)作为服务器=>客户端通讯方式那必然客户端要有相应的服务地址和响应方法,服务端要有相应的数据发送方法;废话不多说,上代码!
客户端JS代码
H5页面需添加如下JS代码:
服务端
服务端应当返回怎样的数据格式?应当以什么样的响应给客户端呢?先来个.Net 的样例
////// 推送消息 /// ///[HttpGet] public HttpResponseMessage SentNews() { HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK); try { //response.Headers.Add("Access-Control-Allow-Origin", "*");//如需要跨域可配置 string data_str = “推送至客户端的数据”;//当然可以是json字符串格式 string even = "", data = ""; if (!string.IsNullOrWhiteSpace(data_str)) { even = "event:sentMessage\n"; data = "data:" + data_str + "\n\n"; } string retry = "retry:" + 1000 + "\n";//连接断开后重连时间(毫秒),其实可以理解为轮询时间 2333... byte[] array = Encoding.UTF8.GetBytes(even + data + retry); Stream stream_result = new MemoryStream(array); response.Content = new StreamContent(stream_result); response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/event-stream");//此处一定要配置 response.Headers.CacheControl = new CacheControlHeaderValue(); response.Headers.CacheControl.NoCache = false; } catch (Exception ex) { LogHelper.WriteWebLog(ex); } return response; }
看完以上代码我想你应该有个大概了,响应的方式还是HTTPResponse响应,但总是有点小小的要求的:
响应报头"Content-Type" 要设置为 "text/event-stream"
响应的数据格式也应该注意到了上述代码中的"data:"、"event:"和"retry:"这些标记:
1.event:表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。
2.data:表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。
3.retry:表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。
4.id:表示该行用来声明事件的标识符(即数据的编号),不常用。
以上就是Server-sent Events的简单应用,实现效果我就不再展示了,有兴趣可以亲自操作实现效果!
相关内容
- 基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5教你做炫酷的碎片式图片切换 (canvas) html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- H5 canvas实现贪吃蛇小游戏教你如何一步一步用Canvas写一个贪吃蛇
- 基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)HTML5仿微信聊天界面、微信朋友圈实例代码详解html5 canvas 微信海报分享(个人爬坑)HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能利用HTML5+css3+jquery+weui实现仿微信聊天界面功能html5 canvas合成海报所遇问题及解决方案总结HTML5微信播放全屏问题的解决方法HTML5页面音视频在微信和app下自动播放的实现方法HTML5仿手机微信聊天界面微信端html5页面调用分享接口示例
- H5调用相机拍照并压缩图片的实例代码HTML5 和小程序实现拍照图片旋转、压缩和上传功能HTML5 Plus 实现手机APP拍照或相册选择图片上传功能HTML5调用手机摄像头拍照的实现思路及代码HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电html5拍照功能实现代码(htm5上传文件)使用HTML5拍照示例代码基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码HTML5拍照和摄像机功能实战详解
- HTML5新特性之语义化标签css3实现动画的三种方式如何使用css3实现一个类在线直播的队列动画的示例代码html5新特性与用法大全使用html5新特性轻松监听任何App自带返回键的示例HTML5新特性之type=file文件上传功能前端面试必备之html5的新特性CSS3动画和HTML5新特性详解
- 解决HTML5手机端页面缩放的问题HTML5实现可缩放时钟代码可使任何HTML元素动态缩放适合父元素的js插件scalable.jsHtml5之svg可缩放矢量图形_动力节点Java学院整理HTML5全屏响应式缩放切换幻灯片代码用HTML5实现鼠标滚轮事件放大缩小图片的功能HTML5基于SVG实现可拖拽和缩放的世界地图效果源码HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述HTML5添加禁止缩放功能
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面Html5中localStorage存储JSON数据并读取JSON数据的实现方法举例详解HTML5中使用JSON格式提交表单HTML5中使用json对象的实例代码
- HTML5 文件域+FileReader 分段读取文件并上传到服务器HTML5单选框、复选框、下拉菜单、文本域的实现代码html禁止清除input文本输入缓存的两种方法html列表框、文本域、文件域的示例代码
- html5清空画布方法(三种)Html5画布_动力节点Java学院整理 HTML5 画布canvas使用方法使用分层画布来优化HTML5渲染的教程html5画布旋转效果示例用html5的canvas画布绘制贝塞尔曲线完整代码html5的画布canvas——画出简单的矩形、三角形实例代码html5的画布canvas——画出弧线、旋转的图形实例代码+效果图HTML5边玩边学(1)画布实现方法
