websocket协议的使用

webSocket是一种数据通信协议，类似http/https

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

​ 在大多数的日常情况下，http协议足以满足大部分。但http通信是单向的：请求+响应；没有请求就没有响应；所有有一个缺陷，通信只能由客户端发起，所以为了实现推送效果，所用的技术都是ajax轮询。轮询就是在特定的环境下，每隔一秒由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

​ webSocket 最大的特点就是，WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，用来实时通信。

​ WebSocket 协议本质上是一个基于 TCP 的协议。

​ 为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

​ 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据，而且没有同源策略的限制，不存在跨域问题。

​ 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

WebSocket 提供的API。

let Socket = new WebSocket(url, [protocol] );

​ 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

​ 假定我们使用了以上代码创建了Socket对象

Socket.readyState		代表双方连接状态
只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。

1 - 表示连接已建立，可以进行通信。

2 - 表示连接正在进行关闭。

3 - 表示连接已经关闭或者连接不能打开。

webscoket事件

open			Socket.onopen		连接建立时触发
message			Socket.onmessage	客户端接收服务端数据时触发
error			Socket.onerror		通信发生错误时触发
close			Socket.onclose		连接关闭时触发

webscoket方法

Socket.send()	
使用连接发送数据

Socket.close()	
关闭连接

简单实例

客户端代码

// 可以通过修改协议的标识符，来决定数据传输是否加密
ws不加密/wxs加密


let ws = new WebSocket("ws://localhost:8181");
ws.onopen = function() {
  console.log("client：打开连接");
  ws.send("client：hello，服务端"); // 该方法用于在客户端连接成功后，主动向服务端发送一条信息
};
ws.onmessage = function(e) {
  console.log("client：接收到服务端的消息 " + e.data);
  setTimeout(() => {
    ws.close();  // 该方法用于关闭连接通信的状态
  }, 5000);
};
ws.onclose = function(params) {
  console.log("client：关闭连接");
};
ws.onerror = function() {
}

服务端代码

var WebSocket = require('ws');
var wss = new WebSocket.Server({ port: 8181 });

wss.on('connection', function(ws) {
  console.log('server: 收到连接');
  ws.on('message', function(message) {
    console.log('server: 收到消息', message);
  });
  ws.send('server: hi，客户端');
});

webScoeket API 这里详细讲解了websocket携带了那些接口

1、构造函数
通过WebSocket构造函数创建一个WebSocket实例，接收一个请求地址作为参数，此时就已经向服务端发起请求了。

2、readyState
获取该实例对象当前的状态，有四种返回值：

var wss = new WebSocket.Server({ port: 8181 });
console.log(wss.readyState); //0
0：正在连接

1：连接成功，可以进行通信

2：正在关闭连接

3、已经关闭连接，或者打开连接失败

3、onopen
onopen属性用来指定连接成功之后的回调函数，看上面代码，我们在连接成功之后打印一个连接成功，并且调用send方法。这里如果要是指定多个回调函数，需要使用addEventListener方法。

ws.addEventListener("open", function(event) {
  console.log("client：打开连接");
});
ws.addEventListener("open", function() {
  ws.send("我在另外一个回调中发送消息");
});
4、onclose
和onopen一样的使用，用来指定关闭连接的回调，这里不赘述。

5、onmessage
指定接收到服务器数据后的回调，可以在回调中通过参数.data获取到返回的数据。

6、onerror
指定发生错误时的回调

7、send
用来发送数据，不仅仅是普通字符串文本，也可以是其他类型的数据（比如ArrayBuffer ）。

8、bufferedAmount
可以获取当前还有多少数据没有发出去，用来判断是否发送结束。

if(ws.bufferedAmount === 0){
    console.log("发送完毕");
}else{
    console.log("还有", ws.bufferedAmount, "数据没有发送");
}

我会在下一篇文章中详细讲解socket.io以及基于vue用websocket协议编写一个多人在线聊天室