有了获取二维码的接口。相对的前端需要调用。
知识点:动态加载图片流并取出header中的参数
这里使用了xmlhttp进行处理。
为什么?
因为后端返回的是一个流。
那么流中。就是放置了二维码中的uuid。这个uuid作为一次会话的标识符使用。
那么前端也需要拿到。跟后端进行webSocket链接。
这样有人扫码后。服务端才可以使用webSocket的方式通知前端。有人扫码成功了。你做你的业务吧。酱紫。
所以为了拿到请求中 header中放置的uuid 所以这样通过xmlhttp进行处理
html
js
$(document).ready(function(){
initQrImg();
});
function initQrImg(){
$("#qrImgDiv").empty();
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open(“GET”,getQrPath,true);
xmlhttp.responseType = “blob”;
xmlhttp.onload = function(){
console.log(this);
uuid = this.getResponseHeader(“uuid”);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement(“img”);
img.className = ‘qrCodeBox-img’;
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.getElementById(“qrImgDiv”).appendChild(img);
initWebSocket();
}
}
xmlhttp.send();
}
var path = “😕/localhost:8085”;
var getQrPath = “http” + path + “/user/getLoginQr”;
var wsPath = “ws” + path + “/websocket/”;
function initWebSocket(){
if(typeof(WebSocket) == “undefined”) {
console.log(“您的浏览器不支持WebSocket”);
}else{
console.log(“您的浏览器支持WebSocket”);
//实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket(“ws://localhost:8083/checkcentersys/websocket/20”);
var wsPathStr = wsPath+uuid;
socket = new WebSocket(wsPathStr);
//打开事件
socket.ono