WebSocket 客户端代码

2018-1-8 dingshangchao JavaScript

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

1. 初始化 websocket 并连接到服务器。

2. 测试以查看它是否成功。

3. 发送和接收数据。

示例代码:

 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());
 }    

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

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

标签: javascript

网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2018 www.elight.cn, All Rights Reserved