前言
WebSocket作为一种新的网络通信协议，代替了http协议，它允许服务端向客户端传递信息，实现服务器和客户端的双工通信，因此对WebSocket的认识是必不可少的！！
为什么需要WebSocket？？？
- 因为Http协议有一个缺陷，就是通信只能由客户端发起，即只能是客户端向服务器发起请求，服务器返回查询结果，Http协议做不到服务器主动去向客户端发送信息
- 这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦，我们只能使用轮询去发起询问，了解服务器有没有新的信息
- 但轮询的效率低，也非常浪费资源（因为必须不停连接，或者Http连接始终打开）
简介
服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，这种对话是平等双向的
WebSocket的特点
1）与Http一样是建立在TCP协议上
2）与Http协议有良好的兼容性，默认端口80/443
3）握手阶段采用Http协议，能通过各种Http代理服务器
4）没有同源限制，客户端可以与任意服务器通信
5）数据格式比较轻量，性能开销小，通信高效
WebSocket 客户端API
1 - 创建WebSocket实例
var ws = new WebSocket(url) // 执行这段后，客户端与服务器开始连接
2 - webSocket.readyState
readyState属性 返回实例对象的当前状态
- 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;
}3 - webSocket.onopen
实例对象的onopen属性，用于指定连接成功后的回调函数ws.onopen = function(){
ws.send('Hello,Server!'); // 连接成功后的回调
}如果要指定多个回调函数，可以使用addEventListener方法ws.addEventListener('open',function(event){
ws.send('Hello Server1');
})
ws.addEventListener('open',function(event){
ws.send('Hello Server2')
})4 - webSocket.onclose
实例对象的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
});
5 - webSocket.onmessage
实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
ws.onmessage = function(event){
var data = event.data;
// 这里可以处理数据
}▲ 服务器数据可能是文本，也可能是二进制数据(blob对象或者Arraybuffer对象）6 - webSocket.onerror
实例对象的onerror属性，用于指定报错时的回调socket.onerror = function(event){
// handle error event
};
socket.addEventListener("error", function(event) {
// handle error event
});
7 - webSocket.send()
实例对象的send()方法用于向服务器发送数据ws.send('your message') // 发送文本客户端实现的一个简单例子
// async.html 别在意文件命名，这只是随便创的一个html TAT
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
}; 
关注公众号，定期推送前端小知识，让学习前端变得更有趣
