WebSocket API

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对 WebSocket API 的支持,其定义位于万维网联盟 (W3C) 的 WebSocket API 规范中。WebSockets 技术为通过 Internet 进行的双向通信提供了一个新的 W3C JavaScript API 和协议。这个新协议更便于直接处理固定数据格式,它会绕过速度较慢的基于文档的 HTTP 协议。

当前的 HTTP 标准协议很慢,因为它必须从服务器请求文档而且必须等待该文档发送,才能显示网页。使用 WebSocket,你可以使用文本、二进制数组或 BLOB 立即发送和接收你的数据。

WebSocket API 非常简单,它只需非常少的代码。你可以方便地利用低延迟双向数据交换,从而有助于快速创建在线游戏、即时社交网络通知、实时显示股市和天气信息,以及其他实时数据。

实现 WebSocket

如果你按照下列步骤进行操作,则实现此数据交换新技术将非常简单:

1. 使用一个客户端浏览器来实现 WebSocket 协议。
2. 在网页中编写代码来创建客户端 Websocket。
3. 在 Web 服务器上编写代码来通过 Websocket 响应客户端请求。

使用 WebSocket 客户端

Internet Explorer 10 实现 WebSocket 协议,如同其他主流浏览器的行为。你可在 caniuse.com 网站上看到浏览器支持的当前状态。

IETF 工具网站中指定的 WebSocket 协议使用以下新的 URL 方案。


ws://
wss://

编写 WebSocket 客户端代码

你的网页代码必须执行以下操作:

1. 初始化 websocket 并连接到服务器。
2. 测试以查看它是否成功。
3. 发送和接收数据。

以下代码显示了指定 websocket URL 的典型代码:


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

以下代码显示了如何连接到 websocket 并测试以查看它是否成功。


 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML = 
          'WebSocket Status:: Socket Open';
    };

 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("serverResponse").innerHTML = 
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 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');

    socket.send(sourceCanvas.msToBlob());
 }    


前面的代码假设你有 serverStatus、destination、serverResponse、textmessage 和 serverData 作为你的网页中带 ID 的元素。如果 F12 开发人员工具正在运行,捕获结果将显示在控制台窗口中。 要发送文本消息数据,请使用以下类型的代码。


var e = document.getElementById("msgText");
socket.send(e.value);

上面的代码示例假设你有要使用网页中带 ID 的 msgText 元素发送的消息文本。同样,你可以使用 onmessage 事件检测新消息或使用 send 方法发送消息到服务器。send 方法可用于发送文本、二进制数组或 Blob 数据。

编写 WebSocket 服务器代码

处理套接字的服务器代码能够以任何服务器语言编写。无论你选择哪种语言,都必须编写代码以接受 WebSocket 请求并相应地处理它们。

WebSocket 编程

WebSocket 提供一组可用于 WebSocket 编程的对象、方法和属性。

名称类型描述
WebSocket 对象提供到远程主机的双向通道。
close 方法关闭 websocket。
send 方法使用 websocket 发送数据到服务器。
binaryType 属性onmessage 接收的二进制数据格式。
bufferedAmount 属性使用 send 的已排队的数据字节数。
extensions 属性报告服务器所选中的扩展名。
onclose 属性当套接字关闭时调用的事件处理程序。
onerror 属性当出现错误时调用的事件处理程序。
onmessage 属性通知接收到消息的事件处理程序。
onopen 属性当 websocket 已连接时调用的事件处理程序。
protocol 属性报告服务器所选中的协议。
readyState 属性报告 websocket 连接的状态。
url 属性报告套接字的当前 URL。

 

API 参考

WebSocket API

IEBlog 文章

Windows 中的 WebSockets
支持站点的 WebSocket

规范

WebSocket API

相关主题

使用 HTML5 WebSocket 构建实时 Web 应用
通过使用 IIS、ASP.NET 和 WCF 的 WebSocket 构建实时 Web 应用
构建 Windows 运行时套接字应用
Windows 8 中的 WebSocket 入门
了解 System.Net.WebSocket:简单的 ASP.NET 回显服务器
WebSocket:稳定可靠,随时可供开发人员使用

 

 

显示:
© 2014 Microsoft