• 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));
            },
  • 相关阅读:
    centos yum安装与配置vsFTPd FTP服务器(转)
    CentOS 6.9安装配置nmon
    Linux 中将用户添加到组的指令
    linux 设置用户组共享文件
    linux时间同步ntpdate
    java获取端口号,不用request
    centos6.5 yum安装redis
    Centos6 yum安装nginx
    Nginx 不支持WebSocket TCP
    django中的分页应用 django-pure-pagination
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/13738028.html
Copyright © 2020-2023  润新知