本文摘自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()
};
eventSource.addEventListener( 'sentMessage' , function (event) {
var data = eval( '(' +event.data+ ')' );
var origin = event.origin;
var lastEventId = event.lastEventId;
console.log(data); }, false );
} else {
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》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » (Server-sent Events)浅谈H5 中的服务器推送事件