vue中简单的用websocekt获取后端数据

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

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

实现代码如下

<template>
    <div>
     <!-- 想要渲染的数据 -->
    </div>
</template>

<script>

export default {
    data() {
        return {
            webSock: null,
            lockReconnect: false, //避免重复连接
        }
    },
    created() {
       
    },
    mounted() {
        
    },
    destroyed() {
        <!-- 离开页面时销毁socket服务 -->
        this.webSocketClose()
    },
    methods: {
        // 发送websockwt请求
        initWebSocket() {
            let websocketUrl = 'ws://172.16.40.1:8083/ws'
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            this.webSock = new WebSocket(websocketUrl)
            this.webSock.onopen = this.webSocketOnOpen
            this.webSock.onerror = this.webSocketOnError
            this.webSock.onmessage = this.webSocketOnMessage
            this.webSock.onclose = this.webSocketClose
        },
        webSocketOnOpen() {
            console.log('WebSocket连接成功')
            //  传递参数  不需要传参就不传(参数根据后端需要的参数形式传递就行)
            let address = { action: 'sub', ch: `depth_${this.$route.query.exchange_id}_${this.$route.query.symbol}` }
            this.webSocketSend(address)
        },
        webSocketOnMessage(e) {
            //接收数据
            // console.log('WebSocket 接受数据')
            // 将接收的数据转为json格式
            var jsonObj = JSON.parse(e.data)
            // console.log('接受的数据',jsonObj)
            //根据socekt返回的数据判断需要哪个字段里面的数据(根据后端需要的数据判断即可)
            if(jsonObj.name === 'trade_1_USDT'){
                this.tableData3 = jsonObj.data
            }
        },
        webSocketClose(e) {
            console.log('断开连接')
            this.lockReconnect = false
            this.webSock.close()
            // this.reconnect()
        },
        webSocketOnError(e) {
            console.log('报错信息', e)
        },
        webSocketSend(Data) {
            console.log(Data);
            //发送数据发送
            this.webSock.send(JSON.stringify(Data))
        },
        // 断开重连操作
        reconnect() {
            if (this.lockReconnect) return
            this.lockReconnect = true
            let _this = this
            //没连接上会一直重连，设置延迟避免请求过多
            setTimeout(function () {
                this.initWebSocket()
                this.lockReconnect = false
                // _this.isOne = 1;
            }, 2000)
        }, 
    },
}
</script>

<style lang='scss' scoped>
}</style>