zoukankan      html  css  js  c++  java
  • 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));
            },
  • 相关阅读:
    087 类的继承
    086 一切皆对象
    085 对象的绑定方法
    在菜鸟教程学 HTML(一)
    生成输出 URL(16.2)
    创建分部视图(7.6.3)
    显示页面链接(7.5.1)
    NuGet 控制台代码
    浏览器对应用程序的根URL发出请求时所发生的情况(结合 DI)
    第 6 章 —— 依赖项注入(DI)容器 —— Ninject
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/13738028.html
Copyright © 2011-2022 走看看