WebSocket

一、什么是websocket

 1、介绍 

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

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

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

2、与http协议的比较

因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

websocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

 相比较于http做轮询，提高了效率，减少了资源的浪费。

二、websocket的使用

1、WebSocket 属性

Socket.readyState

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

2、websocket事件

 var socketUrl = `  `;
        socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
      //打开事件
        this.socket.onopen = function () {
          console.log("websocket已打开");
          //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        let that = this;
        this.socket.onmessage = function (msg) {
          console.log(msg.data);
          that.reply = JSON.parse(msg.data);
          //console.log(that.reply);
          that.list.push(that.reply);
          console.log(that.list);
          //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        this.socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        this.socket.onerror = function () {
          console.log("websocket发生了错误");
        };
//发送消息
sendMessage() {
      if (
        this.sendMes.message === "" ||
        this.sendMes.message.match(/^\s+$/) ||
        this.sendMes.message === null
      )
       { return this.$message({
          type: "error",
          message: "请勿发送空白消息",
        })}
       else {
        let obj = {};
        obj.message = this.sendMes.message;
        obj.fromUserId = this.sendMes.fromUserId;
        // obj.time = this.sendMes.time;
        obj.time=new Date().getHours() + "." + new Date().getMinutes(),
        this.list.push(obj);
        console.log(this.list);
        if (typeof WebSocket == "undefined") {
          console.log("您的浏览器不支持WebSocket");
        } else {
          console.log("您的浏览器支持WebSocket");
          console.log(
            '{"toUserId":"' +
              this.toUserId +
              '","message":"' +
              this.sendMes.message +
              '"}'
          );

          this.socket.send(
            '{"toUserId":"' +
              this.toUserId +
              '","message":"' +
              this.sendMes.message +
              '"}'
          );
            this.sendMes.message = "";
        }
      }
    },