天天看点
返回

WebSocket简单介绍（属性+方法）

WebSocket简单介绍（属性+方法）

WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端推送数据，在WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

我们都知道Ajax 轮询可以在特定的时间间隔，比如1 秒，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这背后就涉及到，需要不断地向服务器发送请求，而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。而在WebSocket协议种，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket简单介绍（属性+方法）
WebSocket简单介绍（属性+方法）

WebSocket特点：

（1） 建立在 TCP 协议之上，服务器端的实现比较容易；

（2） 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器；

（3） 数据格式比较轻量，性能开销小，通信高效；

（4） 可以发送文本，也可以发送二进制数据。

（5） 没有同源限制，客户端可以与任意服务器通信；

（6） 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

WebSocket 常量

WebSocket简单介绍（属性+方法）

** 构造函数WebSocket(url[,protocols])**

var ws = new WebSocket('ws://localhost:8080');//WebSocket的构造函数，用于新建WebSocket实例
//执行完此语句，客户端与服务器进行连接

WebSocket 属性

WebSocket.binaryType 使用二进制的数据类型连接

可以使用binaryType属性，显式指定收到的二进制数据类型

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

WebSocket.bufferedAmount(只读) 未发送至服务器的字节数

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

WebSocket.extensions(只读) 服务器选择的扩展

WebSocket.onclose 用于指定连接关闭后的回调函数

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

WebSocket.onerror 用于指定连接失败后的回调函数

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};
ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
})

WebSocket.onopen 用于指定连接成功后的回调函数

ws.onopen = function () {
  ws.send('Hello Server!');
}

WebSocket.protocol(只读) 服务器选择的下属协议

WebSocket.readyState(只读) 当前的链接状态

readyState属性返回实例对象的当前状态,有4种；

 CONNECTING：值为0，表示正在连接。

 OPEN：值为1，表示连接成功，可以通信了。

 CLOSING：值为2，表示连接正在关闭。

 CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
     break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

WebSocket.url(只读) WebSocket 的绝对路径

WebSocket 方法

WebSocket.close([code[, reason]]) 关闭当前链接

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

WebSocket.send(data) 对要传输的数据进行排队

ws.send('your message');
//发送文本

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);
//发送Blob

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);
//发送ArrayBuffer对象
websocket
上一篇: websocket简单介绍（一）
下一篇: WebSocket 的简单应用入门

继续阅读