スキャンログイン(websocketと非同期輪訓)

2235 ワード

スキャン登録は一般的に2つのステップに分けられ、第1ステップはスキャン者情報を取得し、第2ステップは手動で登録を確認する必要がある.
 
1、websocketを使う
import QRCode from 'qrcodejs2';
import SockJS from  'sockjs-client';  
import  Stomp from 'stompjs';
let stompClient = null;


    mounted() {
        this.connect();
    },
    beforeDestroy: function () {
        //          
        this.disconnect();
    },
    methods: {
        initCode(uuid) {
            document.getElementById('codeImg').innerHTML = ''; //         
            this.qrcode = new QRCode('codeImg', {
                width: 246,
                height: 246,
                text: uuid, //      
                colorDark: '#000',
                colorLight: '#fff',
                correctLevel: QRCode.CorrectLevel.H
            });
        },
        async getId() {
            let res = await _getId();
            if (res.code == '0') {
                return res.data;
            }else{
                return '';
            }
        },
        async connect() {
            let uuid = await this.getId();
            this.initCode(uuid);
            let host = window.location.origin;
            let socket = new SockJS(host + '/myUrl?uuid=' + uuid);
            stompClient = Stomp.over(socket);
            stompClient.connect({}, (frame)=> {
                this.getStatus = false;
                //                 
                stompClient.subscribe('/user/queue/sendUser', (response)=>{
                    this.showResponse(response.body);
                });
            });
        },
        disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
        },
        showResponse(prama) {
            console.log(prama,'       ');
             //           。
            let res = JSON.parse(`${prama}`);
          
            doSomething();
               
        },
        refetch(){
            this.connect();
        }

 
2、ajaxを使用して要求結果をポーリングし、処理結果が空、タイムアウト、成功などの状態を必要とし、タイムアウト時間を約束し、インタフェースは最大何秒で結果を返す.また、自分のリクエストの失効時間に注意する必要があります.ブラウザのデフォルトは2分で、一般的なプロジェクトは30 s程度設定されています.