博客

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket允许服务端主动向客户端推送数据，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

使用WebSocket的意义：
现在很多网站展示实时数据采用的方式Ajax 轮询，这种方式需要设置计时器在特定的时间（间隔时间）里使客户端向服务端发起HTTP请求，服务器接收到请求后返回最新数据给客户端。这样不断的请求，必然会浪费资源，而WebSocket只需要一次握手成功后就能够搭建一条快速通讯通道，服务端就能不断的返回最新数据给客户端，节约了宽带等资源。

WebSocket的优点：

• 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
• 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
• 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
• 更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
• 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
• 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

网页公告栏实例：（无缝轮播）

代码：

<div style="display: flex;align-items: center;overflow: hidden;height: 20px;margin-top: 5px">
      <img src="@/assets/images/horn.png" height="30" width="30"/>

      <div class="text-container" v-show="show_text" @click="click_view">
        <transition class="inner-container2" name="slide" mode="out-in">
          <el-button type="text" style="color: #21b2f4;display: inline-block;margin-left: 20px"
                     class="text2" :key="text.id">{{text.val}}
          </el-button>
        </transition>
      </div>
      <span v-show="!show_text" style="color: #21b2f4;display: inline-block;margin-left: 20px">——暂无消息——</span>
    </div>

CSS：

 .inner-container {
    height: 14px;
    animation: myMove 5s linear infinite;
    animation-fill-mode: forwards;
    display: inline-block;
  }

  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }

  .slide-leave-to {
    transform: translateY(-20px);
  }

  .slide-enter {
    transform: translateY(20px);
  }

  .text2 {
    color: rgb(33, 178, 244);
    font-size: 14px;
    font-weight: 500;
  }

script代码：

<script>
  export default {
    name: "Notice",
    data() {
      return {
        path: "test://192.168.0.202",
        socket: "",
        value: {},
        notice_dialog: false,
        number: 0,
        arr: [],
        timer:'',
        show_text:true
      }
    },
    computed: {
      text() {
        return {
          id: this.number,
          val: this.arr[this.number]
        }
      }
    },
    mounted() {
      // 初始化
      this.init()
      this.startMove()
    },
    methods: {
    //实现公告栏轮播（计时器）
      startMove() {
        this. timer = setTimeout(() => {

          this.number += 1
          console.log(this.arr.length)
          console.log(this.number)
          this.startMove()
        }, 1000)
      },
      stopMove(){
        clearTimeout(this.timer)
        this.arr=[]
          this.show_text=false
          this.number=0
      },
      click_view() {
        this.notice_dialog = true
      },


//WebSocket的使用
      init: function () {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = new WebSocket(this.path)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          // 销毁监听
          this.socket.onclose = this.close
        }
      },
      open: function () {
        console.log("socket连接成功")

      },
      error: function () {
        console.log("连接错误")
      },
      getMessage: function (msg) {
       console.log( this.socket.readyState)//查看连接状态
        console.log(msg.data)
        this.value = JSON.parse(msg.data)
        this.arr.push('测试' + this.value.device_id + '条消息')
      },

      send: function () {
        this.socket.send(params)
      },
      close: function () {
        console.log("socket已经关闭")
      }
    },
    destroyed() {
      console.log("destory")
      this.socket.close()
      this.stopMove()
    }
  }
</script>

WebSocket 连接状态：
只读属性 readyState 表示连接状态，可以是以下值：

0 – 表示连接尚未建立。

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

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

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