关于websocket实现实时响应

小程序
添加链接描述

在这里插入代码片

h5页面

<template>
    <div class="page"></div>
</template>

<script>
    export default {
        data() {
            return {
                path: "",
                codeNum: "",
                socket: ""
            }
        },
        mounted() {
            // 初始化
            // this.init()
        },
        methods: {
            init: function(code) {
                if (typeof(WebSocket) === "undefined") {
                    alert("您的浏览器不支持socket")
                } else {
                    // 实例化socket
                    this.codeNum = code;
                    console.log(code);
                    this.path = `wss://url/webSocket/${sessionStorage.getItem('codeCancel')}/${code}`;
                    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);
                let arr = msg.data.split(':');
                if (this.codeNum == arr[0] && arr[1] == '核销成功') {
                    this.$parent.flushPage();
                }
                this.closeConnent
            },
            send: function() {
                this.socket.send(params)
            },
            close: function() {
                console.log("socket已经关闭")
            },
            closeConnent() {
                this.socket = new WebSocket(this.path)
                this.socket.onclose = this.close
            }
        },
        destroyed() {
            // 销毁监听
            if (this.socket.onclose) this.socket.onclose = this.close;
        }
    }
</script>