スキャンログイン(websocketと非同期輪訓)
2235 ワード
スキャン登録は一般的に2つのステップに分けられ、第1ステップはスキャン者情報を取得し、第2ステップは手動で登録を確認する必要がある.
1、websocketを使う
2、ajaxを使用して要求結果をポーリングし、処理結果が空、タイムアウト、成功などの状態を必要とし、タイムアウト時間を約束し、インタフェースは最大何秒で結果を返す.また、自分のリクエストの失効時間に注意する必要があります.ブラウザのデフォルトは2分で、一般的なプロジェクトは30 s程度設定されています.
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程度設定されています.