(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 canvas实现瀑布流文字效果代码

html5超链接字体如何改颜色

html5的本地存储indexeddb

详解html5浏览器兼容性解决方案

html5地理定位实例讲解

html5和html能看出区别吗

html5 viewport总结讲述

html5中audio与video标签的使用

javascript中比较运算符隐式类型转换的介绍(附示例)

html5通过postmessage进行跨域通信的方法_html5教程技巧

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




打赏

取消

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

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

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

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

评论

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