WebSocket入门介绍

1. 为什么用WebSocket

WebSocket 是一种网络通信协议，可以实现客户端和服务端的长连接

Http协议有个缺陷：通信只能由客户端发起 （即 只能客户端向服务器发送请求，服务器返回查询结果，做不到服务器向客户端推送信息）

WebSocket最大特点：服务器可以主动向客户端推送信息，客户端也可以向服务器发送信息，属于服务器推送技术的一种

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YxbYENG6-1571713648505)(.\img\1.webSocket和http连接对比图.png)]

websocket的其他特点

• 建立在TCP协议之上，服务器端的实现比较容易
• 和http协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器
• 数据格式比较轻量，性能开销小，通信高效
• 可以发送文本或二进制数据(blob对象或Arraybuffer对象)
• 没有同源限制，客户端可以与任意服务器通信
• 协议标识符是 ws (如果加密，则为 wss)，服务器网址就是URL ws://127.0.0.1:8080/chat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZYWV6eIL-1571713648507)(.\img\2.协议对比.jpg)]

2.怎么用WebSocket

普通项目中

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("开始连接"); 
  ws.send("客户端发送消息给服务端");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("连接关闭.");
};   

vue项目中

<template>
  <div class="test">

  </div>
</template>

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080/chat";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websock.send(JSON.stringify(actions));
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>

 initWebSocket(){ //初始化weosocket
     //注意点，这个路径要配置到dev中
        // const wsuri = "ws://127.0.0.1:8080/chat";
     const wsuri = 'process.env.WSP/chat'
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onclose = this.websocketclose;
      },
          
          
    //dev
          module.exports = merge(prodEnv, {
              WSP:'"ws://192.168.0.71:8085"', //握手
          }

3.WebSocket客户端的API

3.1. WebSocket构造函数

WebSocket对象作为一个构造函数，用于新建WebSocket实例

var ws = new WebSocket('ws://192.168.0.71:8080/chat')
//ws://192.168.0.71:8080   等同于   http://192.168.0.71:8080
//chat是接口的名称

3.2 readyState属性

返回实例对象的当前状态

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

3.3 连接状态的事件处理函数

• onopen() : 开始连接 使用 ws.send()向服务器发送数据
• onclose() : 关闭连接
• onmessage() : 接收服务器数据
• onerror() : 监听报错信息

3.4 bufferedAmount

表示还有多少字节的二进制数据没有发送出去，用来判断发送是否结束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

据没有发送出去，用来判断发送是否结束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}