WebSocket协议？你了解多少？

我们一直使用的http协议只能由客户端发起，服务端无法直接进行推送，这就导致了如果服务端有持续的变化客户端想要获知就比较麻烦。WebSocket协议就是为了解决这个问题应运而生。

WebSocket协议，客户端和服务端都可以主动的推送消息，可以是文本也可以是二进制数据。而且没有同源策略的限制，不存在跨域问题。协议的标识符就是ws。像https一样如果加密的话就是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：关闭连接");
};

服务端代码：

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，客户端');
});

这里我们利用ws库实现了一个简单的前后端打招呼的功能。当然也可以选择其他的库实现。代码很简单一看就能看懂，这里不赘述了。

WebSocket的API

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, "数据没有发送");
}

总结

---

WebSocket的使用还是比较简单的，由于工作还没有碰到非要使用该协议的场景，所以一直没有机会实战一下。只能自己写个简单的demo玩。如有不足欢迎指正。

最后
谢谢大家的阅读，原创不易，喜欢就点个赞，这将是我最强的写作动力。如果你觉得文章对你有所帮助，也蛮有趣的，就关注一下我的博客，谢谢。