WebSocket使用之API

最新推荐文章于 2024-10-11 14:21:08 发布

fswy

最新推荐文章于 2024-10-11 14:21:08 发布

阅读量2k

点赞数 1

分类专栏： # WebSocket 文章标签： websocket api

WebSocket 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 方案。
HTML

ws://
wss://

编写 WebSocket 客户端代码
你的网页代码必须执行以下操作：

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

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

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

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

 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 开发人员工具正在运行，捕获结果将显示在控制台窗口中。要发送文本消息数据，请使用以下类型的代码。
JavaScript

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。