SpringBoot+webSocket实现扫码登录功能，java技术面试题及答案

有了获取二维码的接口。相对的前端需要调用。

知识点：动态加载图片流并取出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