(Server-sent Events)浅谈H5 中的服务器推送事件


本文摘自PHP中文网,作者巴扎黑,侵删。

服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯。目前所有主流浏览器均支持服务器发送事件,当然除了 Internet Explorer 。2333...

WebSocket 协议是继HTTP协议后又一服务器客户端通讯协议,不同于HTTP单纯的客户端请求服务器响应单向通讯模式的是它支持了服务端客户端的双向通讯。

Server-sent Events 的使用

Server-sent Events(以下简称SSE)作为服务器=>客户端通讯方式那必然客户端要有相应的服务地址和响应方法,服务端要有相应的数据发送方法。

客户端JS代码

H5页面需添加如下JS代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<script>

    if (typeof (EventSource) !== "undefined") {

        //推送服务接口地址

        var eventSource = new EventSource("http://localhost:2242/webservice/ServerSent/SentNews");

        //当通往服务器的连接被打开

        eventSource.onopen = function () {

            console.log("连接打开...");

        }

         //当错误发生

         eventSource.onerror= function (e) {

             console.log(e);

         };

         //当接收到消息,此事件为默认事件

         eventSource.onmessage = function (event) {

             console.log("onmessage...");

          eventSource.close()//关闭SSE链接

         };

         //服务器推送sentMessage事件

         eventSource.addEventListener('sentMessage', function (event) {

             var data = eval('('+event.data+')');//服务器端推送的数据,eval装换Json对象

             var origin = event.origin;//服务器 URL 的域名部分,即协议、域名和端口,表示消息的来源。

             var lastEventId = event.lastEventId;////数据的编号,由服务器端发送。如果没有编号,这个属性为空。

             //此处根据需求编写业务逻辑

             console.log(data);              }, false);

     } else {

         //浏览器不支持server-sent events 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。

         document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";

     }

 </script>

服务端

阅读剩余部分

相关阅读 >>

html5停止(暂停)当前播放的音频或视频的方法pause()

html5和web前端的区别是什么

html5的页面结构需要注意那些方面

html5实现移动端下拉刷新(原理和代码)

详细介绍html5 canvas基本绘图之绘制线段代码实例

h5离线缓存是什么?h5 manifest离线缓存的应用(附代码)

实例讲解h5移动开发ajax上传多张base64格式图片到服务器

html5 frameset标签的替代方案是什么?frameset标签替代的解决办法

html5中怎么用js?

html5实践-使用css装饰图片画廊的代码分享(一)

更多相关阅读请进入《Server-sent》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...