浅析HTML5的WebSocket与服务器推送事件


Posted in HTML / CSS onFebruary 19, 2016

WebSockets

Web Sockets 是用于 Web 应用程序的新一代双向通信技术,运行在单一套接字之上,它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。

一旦取得 Web 服务器上的 Web Socket 连接之后,就可以通过调用 send() 方法从浏览器发送数据到服务器上,通过 onmessage 事件处理程序从服务器接收数据到浏览器中。

下面是创建一个新的 WebSocket 对象的 API。

JavaScript Code复制内容到剪贴板
  1. var Socket = new WebSocket(url, [protocal] );  

第一个参数 url 用于指定要连接的 URL。第二个属性 - 端口是可选的,如果提供,就会指定一个服务器必须支持连接成功的子协议。

WebSocket 属性
下面是 WebSocket 对象的属性。假定我们已经创建了上述的 Socket 对象:

属性 描述
Socket.readyState 只读属性readyState表示连接的状态。有以下取值: 0 表示连接尚未建立。 1 表示连接已建立,可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

WebSocket 事件
下面是 WebSocket 对象相关的事件。假定我们已经创建了上述的 Socket 对象:
事件 事件处理程序 描述
open Socket.onopen 建立 socket 连接时触发这个事件。
message Socket.onmessage 客户端从服务器接收数据时触发。
error Socket.onerror 连接发生错误时触发。
close Socket.onclose 连接被关闭时触发。

WebSocket 方法
下面是 WebSocket 对象相关的方法。假定我们已经创建了上述的 Socket 对象:
方法 描述
Socket.send() send(data) 方法使用连接传输数据。
Socket.close() close() 方法用于终止任何现有连接。

服务器推送事件
传统的 Web 应用程序生成发送到 Web 服务器端的事件。比如,点击一个链接会从服务器请求一个新页面。

这种从 Web 浏览器到 Web 服务器的时间类型可以称作客服端事件。

随着 HTML5 的出现,WHATWG Web Applications 1.0 引入了一个从 Web 服务器到 Web 浏览器的事件流,被称作服务器推送事件(SSE)。使用 SSE 可以不停的将 DOM 事件推送到用户的浏览器中。

这个事件流方法会打开一个到服务器的持久连接,新消息可用时发送数据到客户端,从而不再需要持续的轮询。

SSE Web 应用程序
要在 Web 应用程序中使用服务器推送事件,我们需要给文档添加一个 <eventsource>元素。

<eventsource> 元素的 src 属性应该指向一个 URL,这个 URL 应该提供一个 HTTP 持久连接用于发送包含事件的数据流。

这个 URL 将会指向一个持续发送事件数据的 PHP,PERL 或者任意 Python 脚本。下面是一个简单的期望获得服务器时间的 Web 应用程序示例。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <script type="text/javascript">  
  5. /* Define event handling logic here */   
  6. </script>  
  7. </head>  
  8. <body>  
  9. <div id="sse">  
  10.    <eventsource src="/cgi-bin/ticker.cgi" />  
  11. </div>  
  12. <div id="ticker">  
  13.    <TIME>  
  14. </div>  
  15. </body>  
  16. </html>  

SSE 服务器端脚本
服务器端脚本应该发送 Content-type 头指定类型为 text/event-stream,如下所示:

复制代码
代码如下:
print "Content-Type: text/event-stream\n\n";

设置 Content-type 之后,服务器端脚本将发送一个后面紧跟事件名称的 Event: 标签。下面的示例将会发送一个以换行符结束的 Server-Time 作为事件名称。

复制代码
代码如下:
print "Event: server-time\n";

最后一步是使用 Data: 标签发送事件数据,紧随其后的是以换行符结束的整数字符串值,如下所示:

复制代码
代码如下:
$time = localtime();
print "Data: $time\n";

下面是用 perl 编写的完整 ticker.cgi:

复制代码
代码如下:

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);

处理服务器推送事件
让我们修改一下我们的 Web 应用程序来处理服务器推送时间。下面是最终示例:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <script type="text/javascript">  
  5.    document.getElementsByTagName("eventsource")[0].   
  6.             addEventListener("server-time", eventHandler, false);   
  7.    function eventHandler(event)   
  8.    {   
  9.        // Alert time sent by the server   
  10.        document.querySelector('#ticker').innerHTML = event.data;   
  11.   
  12.    }   
  13. </script>  
  14. </head>  
  15. <body>  
  16. <div id="sse">  
  17.    <eventsource src="/cgi-bin/ticker.cgi" />  
  18. </div>  
  19. <div id="ticker" name="ticker">  
  20.    [TIME]   
  21. </div>  
  22. </body>  
  23. </html>  

在测试服务器推送事件之前,建议你确保你的 Web 浏览器支持这一概念。

HTML / CSS 相关文章推荐
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 #HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 #HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 #HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 #HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 #HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
详解如何使用Python编写vim插件
2017/11/28 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
装修协议书范本
2014/04/21 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
青年文明号口号
2014/06/17 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2015年监理工作总结范文
2015/04/07 职场文书