WebSocket API

最新推荐文章于 2020-04-15 17:24:00 发布

兜兜里o全是糖

最新推荐文章于 2020-04-15 17:24:00 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/zilaike/article/details/78227818

版权

WebSocket API

当前的 HTTP 标准协议很慢，因为它必须从服务器请求文档而且必须等待该文档发送，才能显示网页。使用 WebSocket，你可以使用文本、二进制数组或 BLOB 立即发送和接收你的数据。Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对 WebSocket API 的支持，其定义位于万维网联盟 (W3C) 的 WebSocket API 规范中。WebSockets 技术为通过 Internet 进行的双向通信提供了一个新的 W3C JavaScript API 和协议。这个新协议更便于直接处理固定数据格式，它会绕过速度较慢的基于文档的 HTTP 协议。

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.getElementByIdx_x_x("serverStatus").innerHTML =

'WebSocket Status:: Socket Open';

};

socket.onmessage = function (messageEvent) {

if (messageEvent.data instanceof Blob) {

var destinationCanvas = document.getElementByIdx_x_x('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.getElementByIdx_x_x("serverResponse").innerHTML =

'Server Reply:: ' + messageEvent.data;

}

};

socket.onerror = function (errorEvent) {

document.getElementByIdx_x_x("serverStatus").innerHTML =

'WebSocket Status:: Error was reported';

};

socket.onclose = function (closeEvent) {

document.getElementByIdx_x_x("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.getElementByIdx_x_x("textmessage");

socket.send(e.value);

}

function sendBinaryMessage() {

if (socket.readyState != WebSocket.OPEN) return;

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

socket.send(sourceCanvas.msToBlob());

}

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

var e = document.getElementByIdx_x_x_x("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。

==============================================================

方法概述EDIT

void close(in optional unsigned long code, in optional DOMString reason);

void send(in DOMString data);

属性EDIT

属性名	类型	描述
`binaryType`	`DOMString`	一个字符串表示被传输二进制的内容的类型。取值应当是"blob"或者"arraybuffer"。 "blob"表示使用DOM`Blob` 对象，而"arraybuffer"表示使用 `ArrayBuffer` 对象。
`bufferedAmount`	`unsigned long`	调用 `send()` 方法加入到队列中等待传输，但是还没有发出的字节数。该值会在所有队列数据被发送后重置为 0。而当连接关闭时不会设为0。如果持续调用`send()`，这个值会持续增长。只读。
`extensions`	`DOMString`	服务器选定的扩展。目前这个属性只是一个空字符串，或者是一个包含所有扩展的列表。
`onclose`	`EventListener`	用于监听连接关闭事件监听器。当WebSocket对象的readyState状态变为CLOSED时会触发该事件。这个监听器会接收一个叫close的`CloseEvent`对象。
`onerror`	`EventListener`	当错误发生时用于监听error事件的事件监听器。会接受一个名为error的event对象。
`onmessage`	`EventListener`	一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为"message"的`MessageEvent`对象。
`onopen`	`EventListener`	一个用于连接打开事件的事件监听器。当`readyState`的值变为OPEN的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为"open"的事件对象。
`protocol`	`DOMString`	一个表明服务器选定的子协议名字的字符串。这个属性的取值会被取值为构造器传入的protocols参数。
`readyState`	`unsigned short`	连接的当前状态。取值是 Ready state constants之一。只读。
`url`	`DOMString`	传入构造器的URL。它必须是一个绝对地址的URL。只读。

常量EDIT

Ready state constants

这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。

Constant	Value	Description
`CONNECTING`	`0`	连接还没开启。
`OPEN`	`1`	连接已开启并准备好进行通信。
`CLOSING`	`2`	连接正在关闭的过程中。
`CLOSED`	`3`	连接已经关闭，或者连接无法建立。