webscoket的使用

data(){
  return{
     websock: null,

}
}
 created() {
        this.init();
    },
destroyed() {
        this.websock.close(); //离开路由之后断开websocket连接
    },
    methods: {
        initWebSocket() {
            const wsuri = 'ws://47.111.253.218:7274';
            this.websock = new WebSocket(wsuri);
            this.websock.onopen = this.websocketonopen;
            this.websock.onclose = this.websocketclose;
            this.websock.onerror = this.websocketonerror;
            // this.websock.onmessage = this.websocketonmessage;  //这个位置写进了组件 因为webscoket不主动断开可以全局使用
            console.log(this.websock, '页面==>的webscoket');
            console.log(this.websock.readyState, '页面==>readyState');
        },
        websocketonopen() {
            //连接建立之后执行send方法发送数据
        },
        websocketclose(e) {
            //关闭
            console.log('断开连接', e);
        },
        websocketonerror() {
            //连接建立失败重连
            console.log('进入了重新连接机制');
            this.initWebSocket();
        },  
     // 登录
        recectLogin(row) {
            console.log(row, 'row');
            this.$refs.recectLogin.show({ dialogVisible: true, row: row, websock: this.websock });//传递进入组件把websock
        },

}

//进入组件
show(option) {
            this.websock = option.websock;
            this.initWebSocket(); //建立连接
            this.dialogVisible = option.dialogVisible;
            this.createdRecectLogin(); //调用登录
        },
 initWebSocket() {
            this.websock.onmessage = this.websocketonmessage;
        },
websocketonmessage(e) {
            console.log(JSON.parse(e.data), '数据接收==>');
            let redata = JSON.parse(e.data);
            if (redata.flag == 'lua') {
                if (redata.status == 1 && redata.type == 'wclogin') {
                     this.$message.success('正在登录...');
                } else if (redata.type == 'quitLogin') {
                    this.loading.close(); //关闭loading
                    this.$message.success('登录成功,请发送验证码');
                    this.sendMobile(); //
                } else if (redata.type == 'sendCodeAction') {
                    this.$message.success('请输入验证码');
                } else if (redata.type == 'detectionCode') {
                    this.$message.success('验证码输入错误,请重新输入');
                } else if (redata.type == 'friendVerify') {
                    this.active = 2;
                    this.$message.success('请输入好友手机号');
                } else if (redata.type == 'joinWechat') {
                    this.active = 3;
                    this.$message.success('流程结束,进入企业微信');
                }
            }
        },
 websocketsend(Data) {
            console.log('发送了几次');
            //数据发送
            this.websock.send(Data);
        },
        websocketclose(e) {
            //关闭
            console.log('断开连接', e);
        },
 // 发送手机号  传递数据的方法
        sendMobile() {
            this.$message.warning('验证码正在接收中');
            let postData = {
                type: 'pcSend',
                option: 'sendMobile',
                mobile: this.row.mobile,
                room_id: this.row.uuid,
                client_id: this.row.id,
                uuid: this.row.uuid,
                flag: 'pc'
            };
            console.log(JSON.stringify(postData), '发送手机号');
            this.websocketsend(JSON.stringify(postData));
        },
原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/13738028.html