• 售前

  • 售后

热门帖子
入门百科

浅析HTML5的WebSocket与服务器推送变乱

[复制链接]
己化被 显示全部楼层 发表于 2021-10-26 13:54:53 |阅读模式 打印 上一主题 下一主题
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">      
  • /* Define event handling logic here */      
  • </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 欣赏器支持这一概念。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作