WebSocket简单介绍（属性+⽅法）
WebSocket简单介绍（属性+⽅法）
WebSocket 是⼀种⽹络通信协议，是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议，允许服务端主动向客户端推送数据，在WebSocket API 中，浏览器和服务器只需要完成⼀次握⼿，两者之间就直接可以创建持久性的连接，并进⾏双向数据传输。
我们都知道Ajax 轮询可以在特定的时间间隔，⽐如1 秒，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这背后就涉及到，需要不断地向服务器发送请求，⽽HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很⼩的⼀部分，显然这样会浪费很多的带宽等资源。⽽在WebSocket协议种，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的⼀种。
WebSocket特点：
（1） 建⽴在 TCP 协议之上，服务器端的实现⽐较容易；
（2） 与 HTTP 协议有着良好的兼容性。默认端⼝也是80和443，并且握⼿阶段采⽤ HTTP 协议，因此握⼿时不容易屏蔽，能通过各种HTTP 代理服务器；
（3） 数据格式⽐较轻量，性能开销⼩，通信⾼效；
（4） 可以发送⽂本，也可以发送⼆进制数据。
（5） 没有同源限制，客户端可以与任意服务器通信；
（6） 协议标识符是ws（如果加密，则为wss），服务器⽹址就是 URL
WebSocket 常量
** 构造函数WebSocket(url[,protocols])**
var ws = new WebSocket('ws://localhost:8080');//WebSocket的构造函数，⽤于新建WebSocket实例//执⾏完此语句，客户端与服务器进⾏连接
WebSocket 属性
WebSocket.binaryType 使⽤⼆进制的数据类型连接
可以使⽤binaryType属性，显式指定收到的⼆进制数据类型
// 收到的是 blob 数据
ws.binaryType = "blob";
console.log(e.data.size);
};
// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
console.log(e.data.byteLength);
};
WebSocket.bufferedAmount(只读) 未发送⾄服务器的字节数
var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
// 发送完毕
} else {
// 发送还没结束
}
websocket和socket
var code = de;
var reason = ason;
var wasClean = event.wasClean;
// handle close event
};
ws.addEventListener("close", function(event) {
var code = de;
var reason = ason;
var wasClean = event.wasClean;
// handle close event
});
// handle error event
};
socket.addEventListener("error", function(event) {
// handle error event
});
var data = event.data;
// 处理数据
};
ws.addEventListener("message", function(event) {
var data = event.data;
// 处理数据
})
ws.send('Hello Server!');
}
WebSocket.protocol(只读) 服务器选择的下属协议
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 = de;
var reason = ason;
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 = ImageData(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对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。