美文网首页
vue项目中使用websocket技术

vue项目中使用websocket技术

作者: 沐溪溪子 | 来源:发表于2020-12-23 20:57 被阅读0次
    <template>
        <div>
            <button @click="send">发消息</button>
        </div>
    </template>
    
    export default {
        data () {
            return {
                path:"ws://192.168.0.200:8005/qrpage/id=1/refreshtime=5",
                socket:""
            }
        },
        mounted () {
            window.onbeforeunload = function () {
               this.close()
            }
            // 初始化
            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
               this.socket.onclose = this.close
                }
            },
            open: function () {
                console.log("socket连接成功");
                let actions = {"test":"12345"};
                this.send(JSON.stringify(actions));
            },
            error: function () {
                console.log("连接错误")
                this.init()
            },
            getMessage: function (msg) {
                const redata = JSON.parse(msg.data);
                // 接收数据
           console.log(redata); 
            },
            send: function (Data) {
                this.socket.send(Data)
            },
            close: function () {
                console.log("socket已经关闭")
            }
        },
        destroyed () {
            // 销毁监听
            this.close()
        }
    }
    

    相关文章

      网友评论

          本文标题:vue项目中使用websocket技术

          本文链接:https://www.haomeiwen.com/subject/zbiunktx.html