vue项目中如何使用websocket

一，前言

websocket是一种在单个TCP连接上进行全双工通信的协议

前端和后端的交互模式最常见的就是前端发送数据请求，从后端拿到数据后展示到页面中，如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷

因此，一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向前端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等

 websocket特点如下：

1.建立在TCP协议之上，服务器端的实现比较容易

2.与HTTP协议有着良好的兼容性，默认端口是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器

3.数据格式比较轻量，性能开销小，通信高效

4.可以发送文本，也可以发送二进制数据

5.没有同源限制，客户端可以与任意服务器通信

6.协议标识符 ws (如果加密，则为wss ) ,服务器网址就是URL

二，vue项目如何引用websocket?

vue中使用websocket需要注意以下几点：

1） 判断浏览器是否支持websocket,关于如何解决兼容性问题请参考 ：https://juejin.cn/post/6844903602528469005

2）在组件加载的时候连接websocket,在组件销毁的时候断开websocket

3)后端接口需要引入socket模块，否则不能实现连接

代码如下：

<template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        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
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>

三，常见坑

在长时间不发送消息的时候，会自动断开，原因是运维那块使用了nginx服务，会配置一个时间段，在这个时间里，如果一直没有数据传输，连接就会在这个时间之后自动关闭，因为我们无法控制用户什么时候去触发websocket消息的推送，那么解决方案如下：

心跳保持连接:实现心跳检测的思路是： 每隔固定的时间，发送一个数据到服务器，服务器接收之后，返回一个数据给客户端。如果客户端onmessage事件能监听到返回的数据，则表示连接未断开。否则，表示连接断开，需要客户端去重新发送请求进行连接。

 start() {　　　　// 发送心跳
      clearInterval(this.timeoutObj)
      this.timeoutObj = setInterval(() => {
        let date = new Date()
        this.webSocket.send(`发送心跳给后端${date}`)
      }, 2 * 60 * 1000)
    }