• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 浅析HTML5的WebSocket与服务器推送事件

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,WebSocket,服务器推送等相关知识,佚名 希望在学习及工作中可以帮助到您

WebSockets

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

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

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

  1. var Socket = new WebSocket(url, [protocal] );  

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

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

属性 描述
Socket.readyState

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

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

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

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

  4. 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 应用程序示例。

  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,如下所示:


您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
  • 2018-12-03响应式布局是什么?响应式布局的介绍
  • 2017-08-06五个2015 年最佳HTML5 框架
  • 2017-08-06字中字效果的实现【html5实例】
  • 2018-12-03推荐10款跨文档特效(收藏)
  • 2018-12-03html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写?
  • 2018-12-03HTML5 video标签(播放器)学习笔记(一):使用入门_html5教程技巧
  • 2018-12-03支持移动端的HTML5 Canvas逼真黑板特效
  • 2018-12-03input实现文字超出省略号(代码示例)
  • 2017-08-06HTML5 Web Workers之网站也能多线程的实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5和css3以及jquery实现音乐播放器
    • 教你如何用H5无刷新改变当前url的实例详解
    • phonegap中关于常用事件总结(收藏)
    • H5的所有元素及基本语法归纳
    • 分享HTML5中10个经典的动画工具
    • HTML5网页版黑白子五子棋游戏的示例代码分享
    • HTML5新增属性之拖拽属性(介绍)
    • canvas实现图片涂鸦功能(附代码)
    • HTML5第三天笔记
    • html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有