二維碼掃描后更改
鑒于昨天做的基于Websocket的消息推送耕蝉,顯然前臺的二維碼掃描后更改需要用Websocket做歧杏,原因很簡單:被掃終端正常來講不知道啥時候要變,變成啥影晓。
二維碼的生成組件用的angular2-qrcode镰吵,語法很獨特,大概是這樣的:
<qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>
這就讓人很難理解我的value值應該怎么設置動態(tài)挂签,查它的issue捡遍,好在在issue#10中有闡釋:
<qr-code [data]="textEncode" [size]="250" [type]="8"></qr-code>
意思是只要將雙向綁定的變量放到這個域里就可以了,OK竹握。
在業(yè)務組件類里如下設置:
this.ngws = new SimpleNgWebSocket('ws://192.168.1.240:80');
this.ngws.on('message', (msg) => {
this.qrcode = msg.data;
});
this.ngws.send('hi');
意思是打開相應組件時通過Websocket向服務器請求第一個驗證碼內(nèi)容。
服務器端邏輯:
me.sendCmd('http://192.168.1.240/login/:1', '1');
收到申請消息后回復第一個驗證碼內(nèi)容辆飘。內(nèi)容是一個路由啦辐,然后在這個處理路由中設置邏輯:
WSRouter.sendMsg('http://192.168.1.240/login/:' + (count++));
res.json("login root");
這里是將參數(shù)加一后返回,這樣前臺二維碼就變成了相同路由蜈项,參數(shù)加一的圖案芹关,循環(huán)如斯。