搜索
首页web前端H5教程浅析HTML5的WebSocket与服务器推送事件_html5教程技巧

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
属性 描述
Socket.readyState

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

  1. 0 表示连接尚未建立。

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

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

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

Socket.bufferedAmount

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

只读属性
readyState表示连接的状态。有以下取值:
0 表示连接尚未建立。
事件 事件处理程序 描述
open Socket.onopen 建立 socket 连接时触发这个事件。
message Socket.onmessage 客户端从服务器接收数据时触发。
error Socket.onerror 连接发生错误时触发。
close Socket.onclose 连接被关闭时触发。

  • 1 表示连接已建立,可以进行通信。
  • 2 表示连接正在进行关闭握手。
    方法 描述
    Socket.send()

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

    Socket.close()

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

  • 3 表示连接已经关闭或者连接不能打开。
  • Socket.bufferedAmount 只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。
    WebSocket 事件下面是 WebSocket 对象相关的事件。假定我们已经创建了上述的 Socket 对象: 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 应用程序中使用服务器推送事件,我们需要给文档添加一个 元素。

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

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

    XML/HTML Code复制内容到剪贴板
    1. 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-streamnn";

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


    复制代码
    代码如下:
    print "Event: server-timen";

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


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

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


    复制代码
    代码如下:

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

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

    XML/HTML Code复制内容到剪贴板
    1. HTML>  
    2. html>  
    3. >  
    4. 脚本 类型="text/ javascript">  
    5.    document.getElementsByTagName("eventsource")[0]。   
    6.             addEventListener("服务器时间", eventHandler, false);   
    7.    函数 eventHandler(event)   
    8.    {   
    9.        //服务器发送的警报时间   
    10.        document.querySelector('#ticker').innerHTML = 事件.data;   
    11.   
    12.    }   
    13. 脚本>  
    14. >  
    15. 身体>  
    16. div id="sse" >  
    17.    事件源 src="/cgi -bin/ticker.cgi" />  
    18. div>  
    19. div id=“代码”  姓名=“股票代码”>  
    20.    [时间]   
    21. div>  
    22. 身体>  
    23. html>  

    在测试服务器主动活动之前,建议您确保您的 Web 浏览器支持这一概念。

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

    html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

    html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

    html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

    html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

    固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

    html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

    html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

    HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

    HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

    html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

    html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

    Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

    3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

    html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

    因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳图形设置
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您听不到任何人,如何修复音频
    3 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    SublimeText3 英文版

    SublimeText3 英文版

    推荐:为Win版本,支持代码提示!

    螳螂BT

    螳螂BT

    Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版