WebScoket介绍

2024-03-09 11:58:35

WebScoket

传统的http通信方式只能是客户端向服务器发送请求
webScoket可以实现双向的通信，客户端可以想服务器发送数据，服务器也可以主动的想客户端推送数据

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

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

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

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

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

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

简单使用

var ws = new WebSocket("wss://echo.websocket.org"); // 创建实例的时候就会与服务器建立连接

ws.onopen = function(evt) { 
  console.log("Connection open ...");  // 建立连接成功
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {  // 获得服务器推送过来的消息，一般是json字符串
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {  // 关闭连接
  console.log("Connection closed.");
};

webScoket.readyState 属性

用于返回实例当前的状态

// CONNECTING: 值为0，表示正在建立连接
// OPEN: 值为1，表示连接成功，可以通信
// CLOSING: 值为2，表示正在关闭连接中
// CLOSED: 值为3，表示连接已关闭或连接失败

webScoket.onopen（）

实例连接成功的回调

// 写法一
ws.onopen = function (e) {
	console.log("连接成功")
}
// 写法二
ws.addEventListener("open", function (e){
	console.log("连接成功")
})

webScoket.onclose（）

实例关闭后的回调

// 写法一
ws.onclose = function (e) {
	console.log("连接关闭成功")
}
// 写法二
ws.addEventListener("close", function (e){
	console.log("连接关闭成功")
})

webScoket.onmessage （）

实例接收到服务器推送的数据后的回调

ws.onmessage = function (e) {
	console.log("接受的数据"，e)
}
// 写法二
ws.addEventListener("message", function (e){
	console.log("接受的数据"，e)
})

webScoket.binaryType 属性

用于显示的指定返回的数据类型，（blob、二进制）

// 收到的是 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);
};

webScoket.send（）

用于客户端向服务器发送消息

// 发送文本
ws.send("hello,server")
// 发送 blob 对象
var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);
// 发送 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)

webScoket.bufferedAmountn 属性

用于判断还有多少字节的二进制数据没有发送出去，用来判断是否发送结束

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

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

webScoket.onerror（）

用于报错的回调函数

ws.onerror= function (e) {
	console.log("错误")
}
// 写法二
ws.addEventListener("error", function (e){
	console.log("错误")
})

码农公寓