Web Socket的学习

一、引

写了一篇了已经，那再来一篇。这次看看面试中命中概率很大的 Web Socket，开始学习。

二、 Web Socket

2.1 介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

2.2 API

2.2.1 创建

let socket = new Socket('ws://www.example.com:8080');

很简单就可以实现在前端创建一个对服务端进行连接的 Socket 通信。

2.2.2 发送信息

socket.send('hello server!');

同样也简单，但是在发送的数据类型是限制的，一共有四种：

1. 文本字符串（USVString）
2. 二进制数组（ArrayBuffer）
3. 原始二进制（Blob）
4. 二进制帧（ArrayBufferView）

2.2.3 关闭连接

socket.close();

关闭的时候一共有俩个参数：

1. code，第一个参数是标识的关闭的行为状态参数，默认为 1005，其他可选状态可以查链接。
2. resaon，第二个参数是自定义的参数，接收一个不超过125字节的字符串，解释关闭的原因。

2.2.4 连接关闭回调

socket.onclose = function(event) {
	console.log("socket closed");
};

2.2.5 连接失败回调

socket.onerror = function(event) {
	console.error("socket error msg:", event);
};

2.2.6 连接成功回调

socket.onopen = function(event) {
	console.log("socket open");
};
#

2.2.7 收到服务端信息回调

socket.onmessage = function(event) {
	console.debug("socket get message", event);
};

2.2.8 状态码

socket.readyState

这是标识当前状态的只读属性，可以返回当前状态的字符信息：
0：正在连接中！
1：已经连接！
2：连接关闭中
3：连接已经关闭或者连接失败

2.2.9

所有的 WebSocket的属性都可以通过监听器的方式来触发，类似:

socket.addEventListener('open', function (event) {
    socket.send('socket open');
});

三、完！！！