web sockets准备好你的站点

分享于 

13分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

web sockets是稳定的,可以让开发者开始创建创新的应用程序和服务。 本教程简单介绍了 W3C WebSocket 及其基础 web socket协议。 最新的演示使用了最新版本的API和协议。

工作组已经取得了重大进展,web socket API 是W3C的候选建议。 IE 10 实现这里版本的规范。 你可以在这里了解规范的演变。

Web socket使Web应用程序能够在浏览器中提供实时的通知和更新。 开发人员在解决浏览器HTTP请求响应模型最初的局限性方面遇到了问题,这不是针对实时场景设计的。 web sockets允许浏览器打开一个双向的全双工通信通道。 然后,每一方可以使用这个通道立即将数据发送到另一个。 现在,从社交网络和游戏到金融站点的站点可以提供更好的实时场景,理想情况下,在不同浏览器。

使用Echo示例介绍 web socket API

下面的代码Fragment使用 ASP.NET's System.Web.WebSockets 创建的简单回送服务器来回送从应用程序发送的文本和二进制消息。 应用程序允许用户输入要发送和回回的文本,或者绘制一个可以作为二进制消息回发的图片。

有关让你体验 web sockets和HTTP轮询之间延迟和性能差异的更复杂的示例,请参见本书演示

连接到 web socket服务器的详细信息

这个简单的解释是基于应用程序与服务器之间的直接连接。 配置代理后,IE10通过向代理发送一个HTTP连接请求来启动该进程。

创建 web socket对象时,客户端和服务器之间交换握手以建立 web socket连接。

IE10通过向服务器发送一个HTTP请求来启动进程:





GET/echo HTTP/1.1


Host: example.microsoft.com


Upgrade: websocket


Connection: Upgrade


Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==


Origin: http://microsoft.com


Sec-WebSocket-Version: 13



让我们看看这个请求的每个部分。

连接进程以标准 HTTP GET 请求开始,请求请求可以遍历防火墙,代理和其他中介:





GET/echo HTTP/1.1


Host: example.microsoft.com



HTTP 升级 header 请求服务器 switch 将应用层协议从HTTP传输到 web socket协议。





Upgrade: websocket


Connection: Upgrade



为了演示 web socket协议,服务器在它的响应中转换 Sec-WebSocket-Key header 中的值:


Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==



源头由IE10设置,以允许服务器强制基于的安全机制。





Sec-WebSocket-Version: 13



Sec-WebSocket-Version header 标识请求的协议版本。 版本 13是IETF建议标准中的最终版本:

Sec-WebSocket-Version: 13

如果服务器接受升级应用层协议的请求,它将返回一个 HTTP 101交换协议响应:





HTTP/1.1 101 Switching Protocols


Upgrade: websocket


Connection: Upgrade



为了演示它理解WebSocket协议,服务器从客户机请求对Sec-WebSocket-Key执行标准化转换,并在Sec-WebSocket-Accept标头中返回结果:





Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=



然后IE10比较Sec-WebSocket-Key和 Sec-WebSocket-Accept,验证服务器是一个 web socket服务器,而不是一个带有grandeur的HTTP服务器。

客户端握手在IE10和服务器之间建立了一个HTTP-on-TCP连接。 服务器返回 101响应后,应用层协议从HTTP切换到使用先前建立的TCP连接的web socket。

的HTTP在这一点上完全是 out。 使用轻量级WebSocket有线协议,现在任何时候都可以通过端点发送或者接收消息。

连接到 web socket服务器的编程

web socket协议定义了两个新的URI方案,它们类似于HTTP格式。

当代理或者网络中介体存在时,安全连接会成功,因为中介不倾向于转换安全通信。

下面的代码段建立了一个 web socket连接:


var host = "ws://example.microsoft.com";


var socket = new WebSocket(host);



ReadyState - 就绪。设置。 去。

WebSocket.readyState 属性表示连接的状态: 连接,打开,关闭或者关闭。 web socket首次创建时,readyState被设置为连接。 当建立连接时,readyState被设置为打开。 如果无法建立连接,则将readyState设置为 CLOSED。

注册打开事件

若要在创建连接时接收通知,应用程序必须对打开的事件进行 register 处理。


socket.onopen = function (openEvent) {


document.getElementById("serverStatus").innerHTML = 'Web Socket State::' + 'OPEN';


};,



详细信息 behind 发送和接收消息

成功握手后,应用程序和 web socket服务器可以交换 web socket消息。 消息由一个或者多个消息 Fragments 或者数据"帧"组成。"

每个帧包含以下信息:

  • 帧长度
  • 消息的第一帧中的消息( 二进制或者文本) 类型
  • 标志( FIN ) 指示是否为消息中的最后一个帧

在将帧传递给脚本之前,IE10将这些帧组合成一个完整的消息。

编程发送和接收消息

发送API允许应用程序将消息作为 UTF-8 文本。ArrayBuffers 或者blob发送到 web socket服务器。

例如这里Fragment检索用户输入的文本,并将它的作为 UTF-8 文本消息发送到服务器,以便回显该文本。 它验证 web socket是否处于打开的readyState中:


function sendTextMessage() {


 if (socket.readyState!= WebSocket.OPEN)


 return;


 var e = document.getElementById("textmessage");


 socket.send(e.value);


}



这里代码段检索用户在画布中绘制的图像,并将它的作为二进制消息发送到服务器:


function sendBinaryMessage() {


 if (socket.readyState!= WebSocket.OPEN)


 return;


 var sourceCanvas = document.getElementById('source');


 // msToBlob returns a blob object from a canvas image or drawing


 socket.send(sourceCanvas.msToBlob());


 //.. .


}



注册消息事件

若要接收消息,应用程序必须对消息事件进行 register 处理。 事件处理程序接收一个 MessageEvent,它包含 MessageEvent.data. 数据中的数据,可以作为文本或者二进制消息接收。

接收二进制消息时,WebSocket.binaryType 属性控制消息数据是作为Blob还是ArrayBuffer数据类型返回。 属性可以设置为"blob"或者 arraybuffer。"

示例 below 使用默认值,即"。"

这个Fragment接收来自 web socket服务器的回显图像或者文本。 如果数据是 Blob,则返回图像并在目标画布中绘制,否则将返回 UTF-8 文本消息并显示在文本字段中。


socket.onmessage = function (messageEvent) {


 if (messageEvent.data instanceof Blob) {


 var destinationCanvas = document.getElementById('destination');


 var destinationContext = destinationCanvas.getContext('2d');


 var image = new Image();


 image.onload = function () {


 destinationContext.clearRect(0, 0, destinationCanvas.width, destinationCanvas.height);


 destinationContext.drawImage(image, 0, 0);


 }


 image.src = URL.createObjectURL(messageEvent.data);


 } else {


 document.getElementById("textresponse").value = messageEvent.data;


 }


};



关闭 web socket连接的详细信息

开始握手类似,有一个结束握手。 端点( 应用程序或者服务器) 可以启动这里握手。

一种特殊的帧- 一个关闭帧- 被发送到另一个端点。 关闭框架可能包含可选的状态代码和关闭的原因。 协议为状态代码定义了一组适当的值。 关闭帧的发件人在关闭帧后不能发送进一步的应用程序数据。

当另一个端点接收到关闭帧时,它响应自己的关闭帧以响应。 它可能在响应关闭帧之前发送挂起消息。

编程关闭 web socket并注册关闭事件

应用程序启动与关闭API的开放连接上的关闭握手:


socket.close(1000, "normal close");



若要在连接关闭时接收通知,应用程序必须 register 以关闭事件。


socket.onclose = function (closeEvent) {


 document.getElementById("serverStatus").innerHTML = 'Web Socket State::' + 'CLOSED';


};



close API接受两个可选参数: 由协议定义的状态代码和描述。 状态码必须是 1000,或者在 3000到 4999范围内。 在执行close时,将readyState属性设置为关闭。 IE10接收到来自服务器的关闭响应后,将将arraylist属性设置为关闭,并激发关闭事件。

使用Fiddler查看 web sockets流量

Fiddler是一个流行的HTTP调试代理。 web socket协议的最新版本提供了一些支持。 你可以检查 web socket握手中交换的标头:

所有的web socket消息也被记录。 在屏幕截图 below 中,你可以看到"spiral"作为 UTF-8 文本消息发送到服务器,并回发回来:

结束语

如果你想了解更多关于 web sockets的信息,可以从 2011年09月的Microsoft//Build/会议观看这些会话:

如果你对使用微软技术创建 web socket服务感到好奇,这些帖子是很好的介绍:

开始使用 web sockets进行开发 !


相关文章