文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5的WebSocket与服务器推送事件实例分析

2024-04-02 19:55

关注

这篇文章主要介绍“HTML5的WebSocket与服务器推送事件实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5的WebSocket与服务器推送事件实例分析”文章能帮助大家解决问题。

WebSockets

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

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

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

JavaScript Code复制内容到剪贴板

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复制内容到剪贴板

<!DOCTYPE HTML>  

<html>  

<head>  

<script type="text/javascript">  

   

</script>  

</head>  

<body>  

<div id="sse">  

   <eventsource src="/cgi-bin/ticker.cgi" />  

</div>  

<div id="ticker">  

   <TIME>  

</div>  

</body>  

</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复制内容到剪贴板

<!DOCTYPE HTML>  

<html>  

<head>  

<script type="text/javascript">  

   document.getElementsByTagName("eventsource")[0].   

            addEventListener("server-time", eventHandler, false);   

   function eventHandler(event)   

   {   

       // Alert time sent by the server   

       document.querySelector('#ticker').innerHTML = event.data;   

   }   

</script>  

</head>  

<body>  

<div id="sse">  

   <eventsource src="/cgi-bin/ticker.cgi" />  

</div>  

<div id="ticker" name="ticker">  

   [TIME]   

</div>  

</body>  

</html>  

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

关于“HTML5的WebSocket与服务器推送事件实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-服务器
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯