WebSockets
Web Sockets 是用于 Web 应用程序的新一代双向通信技术,运行在单一套接字之上,它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。
一旦取得 Web 服务器上的 Web Socket 连接之后,就可以通过调用 send() 方法从浏览器发送数据到服务器上,通过 onmessage 事件处理程序从服务器接收数据到浏览器中。
下面是创建一个新的 WebSocket 对象的 API。
第一个参数 url 用于指定要连接的 URL。第二个属性 - 端口是可选的,如果提供,就会指定一个服务器必须支持连接成功的子协议。
WebSocket 属性
下面是 WebSocket 对象的属性。假定我们已经创建了上述的 Socket 对象:
属性 | 描述 |
---|---|
Socket.readyState |
只读属性readyState表示连接的状态。有以下取值:
|
Socket.bufferedAmount |
只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。 |
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 建立 socket 连接时触发这个事件。 |
message | Socket.onmessage | 客户端从服务器接收数据时触发。 |
error | Socket.onerror | 连接发生错误时触发。 |
close | Socket.onclose | 连接被关闭时触发。 |
方法 | 描述 |
---|---|
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 应用程序示例。
SSE 服务器端脚本
服务器端脚本应该发送 Content-type 头指定类型为 text/event-stream,如下所示:
处理服务器推送事件
让我们修改一下我们的 Web 应用程序来处理服务器推送时间。下面是最终示例:
在测试服务器推送事件之前,建议你确保你的 Web 浏览器支持这一概念。
前言 电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名,其...
简介: 毕业不说再见,青春不散场!在云端,在一起!在问答 https://developer.a...
2020年4月,有赞美业的前端团队历经7个月时间,完成了美业PC架构从单体SPA到微前...
效果图 在网上查阅相关资料后,发现目前的动态渐变色边框的实现方式大部分为使用...
Prometheus 是一款基于时序数据库的开源监控告警系统,说起 Prometheus 则不得不...
相对宽度和绝对宽度冲突时的div解决方法 摘要:一般我们在使用绝对宽度时会使用p...
很多网站都有一个固定在上方的导航栏,方便用户搜索和跳转到其他页面。 同时为了...
注册哪的 域名 不需要备案?其实不存在说注册哪里的域名不需备案这一说法,并不...
缘起 由于项目需要,我们要在web端实现录音功能。一开始,找到的方案有两个,一...
近日,摩拜单车发布提价说明,针对摩拜单车非助力车全部车型,用车费用以后将由...