现在直播非常火，直播里面的聊天窗用到了WebSocket，这里做一个介绍。
首先，先简单说一下ajax轮询和长轮询，面试中经常拿来比较。
ajax轮询
定时的通过Ajax查询服务端。怎么定时？使用setInterval()。
缺点：需要服务器有很快的处理速度和资源。
长轮询
长轮询，算是Ajax轮询的升级版。在发送ajax请求后，服务器把请求挂起，直到有新数据或超时才返回响应。 客户端在响应处理函数中再次发出请求，再次建立连接，周而复始。
缺点：服务器需要能抗并发。
简介
WebSocket是一个新增的应用层协议，html5使用了WebSocket API规范，可以为浏览器和服务器双方提供全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。
这也意味着，WebSocket解决了http协议只能由客户端主动发起的弊端。在建立连接后，服务器可以主动发送信息给客户端而不需要客户端的请求。
相比http协议，WebSocket有以下几个优点：
- 与 http协议有着良好的兼容性，默认端口是80或443，并且握手阶段采用 http 协议，通过请求头升级为WebSocket（这里如果不懂继续往下看）。
- 没有同源限制。
- 服务端推送。
- 在大量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势。
- 客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。
- 数据格式比较轻量，性能开销小，通信高效（连接不断开）。
- 可以发送文本，也可以发送二进制数据。
客户端使用WebSocket
建立连接
WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例，其中参数以ws:开头或者wss:开头，后面接服务器地址。
let ws = new WebSocket("ws://localhost:8080"); //发起websocket一个连接
执行上面代码后，客户端会尝试与服务器建立连接。
关于WebSocket握手阶段使用http协议，可以看一下发送的请求头：
图片.png
也就是说建立连接还是按三次握手，最后在服务端把协议升级为WebSocket协议。
连接成功
实例对象的onopen属性，用于指定连接成功后的回调函数（或者监听open事件）。
ws.onopen = function(e) {
console.log("成功建立连接");
//dosomething
}
如果要添加多个回调函数，可以使用addEventListener。
ws.addEventListener("open", function(e) {
console.log("成功建立连接");
//dosomething
});
收到信息
实例对象的onmessage属性，用于指定收到服务器数据后的回调函数 。
ws.onmessage = function(e) {
var data = e.data;
// dosomething
};
或者监听message事件。
ws.addEventListener("message", function(event) {
var data = event.data;
//dosomething
});
关闭连接
实例对象的onclose属性，用于指定连接关闭后的回调函数。
ws.onclose = function(e) {
console.log("连接关闭.");
//dosomething
}
或监听close事件。
ws.addEventListener("close", function(e) {
console.log("连接关闭");
//dosomething
});
向服务器发送数据
实例对象的send方法可以向服务器发送数据。在发送数据前，请确保连接已经建立。
ws.send("发送数据")；
主动关闭连接
实例对象的close方法用于关闭连接。
ws.close();
最后，WebSocket需要浏览器和服务器一起使用，在实际生产一般会使用第三方库，如socket.io。
网友评论