webSocket---知识点

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

你可能感兴趣的:(杂记)