首页 > 作文

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

更新时间:2023-04-03 05:51:14 阅读: 评论:0

websockets

web sockets 是用于 web 应用程序的新一代双向通信技术,运行在单一套接字之上,它通过 javascript 路由器密码设置接口暴漏在 html5 兼容的浏览器中。

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

下面是创建一个新的 websocket 对象的 api。

javascript code
复制内容到剪贴板

varsocket=newwebsocket(url,[protocal]);

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

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

属性 描述 socket.readystate

只读属性readystate表示连接的状态。有以下取值:

0 表示连接尚未建立。

1 表示连接已建立,可以进行通信。

2 表示连接正在进行关闭握手。

3 表示连接已经关闭或者连接不能打开。

socket.bufferedamount

只读属性bufferedamount表示已经使用 nd() 方法排队的 urf-8 文本字节数。


websocket 事件
下面是 websocket 对象相关的事件。假定我们已经创建了上述的 socket 对象:

事件 事件处理程序 描述 open socket.onopen 建立 socket 连接时触发这个事件。 message socket.onmessage 客户端从服务器接收数据时触发。 error socket.onerror 连接发生错误时触发。 clo socket.onclo 连接被关闭时触发。


websocket 方法
下面是 websocket 对象相关的方法。假定我们已经创建了上述的 socket 对象:

方法 描述 socket.nd()

nd(data) 方法使用连接传输数据。

socket.clo()

clo() 方法用于终止任何现有连接。

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

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

随着 html5 的出现,whatwg web applications 1.0 引入了一个从 web 服务器到 web 浏览器的事桌面图标不见了怎么办件流,被称作服务器推送事件(s)。使用 s 可以不停的将 dom 事件推送到用户的浏览器中。

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

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

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

这个 url 将会指向一个持续发送事件数据的 php,perl 或者任意 python 脚本。下面是一个简单的期望获高校得服务器时间的 web 应用程序示例。

xml/html code复制内容到剪贴板

<!doctypehtml><html><head><scripttype=“text/javascript”>/*defineeventhandlinglogichere*/ </script></head><body><divid=“s”><eventsourcesrc=“/cgi-bin/ticker.cgi”/></div><divid=“ticker”><time></div></body></html>

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

复制代码 代码如下: print “content-type: text/event-stream\n\n”;

设置 content-type入我相思门知我相思苦 之后,服务器端脚本将发送一个后面紧跟事件名称的 event: 标签。下面的示例将会发送一个以换行符结束的 rver-time 作为事件名称。

轮换对称式复制代码 代码如下: print “event: rver-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: rver-time\n”;

$time = localtime();

print “data: $time\n”;

sleep(5);

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

xml/html code
复制内容到剪贴板

<!doctypehtml><html><head><scripttype=“text/javascript”>document.getelementsbytagname(“eventsource”)[0]. addeventlistener(“rver-time”,eventhandler,fal); functioneventhandler(event) { //alerttimentbytherver document.querylector(‘#ticker’).innerhtml=event.data; } </script></head><body><divid=“s”><eventsourcesrc=“/cgi-bin/ticker.cgi”/></div><divid=“ticker”name=“ticker”>[time] </div></body></html>

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

本文发布于:2023-04-03 05:51:12,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/0d43b4e1f00d9e15874e66dace86fbd7.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:浅析HTML5的WebSocket与服务器推送事件.doc

本文 PDF 下载地址:浅析HTML5的WebSocket与服务器推送事件.pdf

标签:事件   服务器   代码   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图