WebScoket介绍
作者:互联网
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("错误")
})
标签:function,console,log,webScoket,介绍,data,ws,WebScoket 来源: https://blog.csdn.net/weixin_51157402/article/details/121792554