Spring Boot 實(shí)現(xiàn)掃碼登錄,這種方式太香了!!

$(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");
???????//實(shí)現(xiàn)化WebSocket對(duì)象，指定要連接的服務(wù)器地址與端口??建立連接
???????//等同于socket?=?new?WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
???????var?wsPathStr?=?wsPath+uuid;
???????socket?=?new?WebSocket(wsPathStr);
???????//打開事件
???????socket.onopen?=?function()?{
???????????console.log("Socket?已打開");
???????????//socket.send("這是來自客戶端的消息"?+?location.href?+?new?Date());
???????};
???????//獲得消息事件
???????socket.onmessage?=?function(msg)?{
???????????console.log(msg.data);
???????????var?data?=?JSON.parse(msg.data);
???????????if(data.code?==?200){
???????????????alert("登錄成功！");
???????????????//這里存放自己業(yè)務(wù)需要的數(shù)據(jù)。怎么放自己看
???????????????window.sessionStorage.uuid?=?uuid;
???????????????window.sessionStorage.userId?=?data.userId;
???????????????window.sessionStorage.projId?=?data.projId;

???????????????window.location.href?=?"pages/upload.html"
???????????}else{
???????????????//如果過期了，關(guān)閉連接、重置連接、刷新二維碼
???????????????socket.close();
???????????????initQrImg();
???????????}
???????????//發(fā)現(xiàn)消息進(jìn)入????開始處理前端觸發(fā)邏輯
???????};
???????//關(guān)閉事件
???????socket.onclose?=?function()?{
???????????console.log("Socket已關(guān)閉");
???????};
???????//發(fā)生了錯(cuò)誤事件
???????socket.onerror?=?function()?{
???????????alert("Socket發(fā)生了錯(cuò)誤");
???????????//此時(shí)可以嘗試刷新頁面
???????}
???}

}

• 如果您正在學(xué)習(xí)Spring Boot，推薦一個(gè)連載多年還在繼續(xù)更新的免費(fèi)教程：http://blog.didispace.com/spring-boot-learning-2x/

Spring Boot中操作WebSocket

<dependency>
????<groupId>org.springframework.bootgroupId>
????<artifactId>spring-boot-starter-websocketartifactId>
dependency>

/**
?*?WebSocket的支持
?*?@return
?*/
@Bean
public?ServerEndpointExporter?serverEndpointExporter()?{
????return?new?ServerEndpointExporter();
}

package?com.stylefeng.guns.rest.modular.inve.websocket;
?
/**
?*?Created?by?jiangjiacheng?on?2019/6/4.
?*/
import?java.io.IOException;
import?java.util.concurrent.CopyOnWriteArraySet;
?
import?javax.websocket.OnClose;
import?javax.websocket.OnError;
import?javax.websocket.OnMessage;
import?javax.websocket.OnOpen;
import?javax.websocket.Session;
import?javax.websocket.server.PathParam;
import?javax.websocket.server.ServerEndpoint;
import?org.springframework.stereotype.Component;
import?cn.hutool.log.Log;
import?cn.hutool.log.LogFactory;
?
@ServerEndpoint("/websocket/{sid}")
@Component
public?class?WebSocketServer?{
?
????static?Log?log=LogFactory.get(WebSocketServer.class);
?
????//靜態(tài)變量，用來記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的。
????private?static?int?onlineCount?=?0;
?
????//concurrent包的線程安全Set，用來存放每個(gè)客戶端對(duì)應(yīng)的MyWebSocket對(duì)象。
????private?static?CopyOnWriteArraySet?webSocketSet?=?new?CopyOnWriteArraySet();
?
????//與某個(gè)客戶端的連接會(huì)話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
????private?Session?session;
?
????//接收sid
????private?String?sid="";
?
????/**
?????*?連接建立成功調(diào)用的方法*/
????@OnOpen
????public?void?onOpen(Session?session,@PathParam("sid")?String?sid)?{
????????this.session?=?session;
????????webSocketSet.add(this);?????//加入set中
????????addOnlineCount();???????????//在線數(shù)加1
????????log.info("有新窗口開始監(jiān)聽:"+sid+",當(dāng)前在線人數(shù)為"?+?getOnlineCount());
????????this.sid=sid;
????????/*try?{
????????????sendMessage("連接成功");
????????}?catch?(IOException?e)?{
????????????log.error("websocket?IO異常");
????????}*/
????}
?
????/**
?????*?連接關(guān)閉調(diào)用的方法
?????*/
????@OnClose
????public?void?onClose()?{
????????webSocketSet.remove(this);??//從set中刪除
????????subOnlineCount();???????????//在線數(shù)減1
????????log.info("有一連接關(guān)閉！當(dāng)前在線人數(shù)為"?+?getOnlineCount());
????}
?
????/**
?????*?收到客戶端消息后調(diào)用的方法
?????*
?????*?@param?message?客戶端發(fā)送過來的消息*/
????@OnMessage
????public?void?onMessage(String?message,?Session?session)?{
????????log.info("收到來自窗口"+sid+"的信息:"+message);
????????//群發(fā)消息
????????for?(WebSocketServer?item?:?webSocketSet)?{
????????????try?{
????????????????item.sendMessage(message);
????????????}?catch?(IOException?e)?{
????????????????e.printStackTrace();
????????????}
????????}
????}
?
????/**
?????*
?????*?@param?session
?????*?@param?error
?????*/
????@OnError
????public?void?onError(Session?session,?Throwable?error)?{
????????log.error("發(fā)生錯(cuò)誤");
????????error.printStackTrace();
????}
????/**
?????*?實(shí)現(xiàn)服務(wù)器主動(dòng)推送
?????*/
????public?void?sendMessage(String?message)?throws?IOException?{
????????this.session.getBasicRemote().sendText(message);
????}
?
?
????/**
?????*?群發(fā)自定義消息
?????*?*/
????public?static?void?sendInfo(String?message,@PathParam("sid")?String?sid)?throws?IOException?{
????????log.info("推送消息到窗口"+sid+"，推送內(nèi)容:"+message);
????????for?(WebSocketServer?item?:?webSocketSet)?{
????????????try?{
????????????????//這里可以設(shè)定只推送給這個(gè)sid的，為null則全部推送
????????????????if(sid?==?null)?{
????????????????????item.sendMessage(message);
????????????????}else?if(item.sid.equals(sid)){
????????????????????item.sendMessage(message);
????????????????}
????????????}?catch?(IOException?e)?{
????????????????continue;
????????????}
????????}
????}
?
????public?static?synchronized?int?getOnlineCount()?{
????????return?onlineCount;
????}
?
????public?static?synchronized?void?addOnlineCount()?{
????????WebSocketServer.onlineCount++;
????}
?
????public?static?synchronized?void?subOnlineCount()?{
????????WebSocketServer.onlineCount--;
????}
}

/**
?*?確認(rèn)身份接口：確定身份以及判斷是否二維碼過期等
?*?@param?token
?*?@param?userId
?*?@return
?*/
@RequestMapping(value?=?"/bindUserIdAndToken"?,method?=?RequestMethod.GET)
@ResponseBody
public?Object?bindUserIdAndToken(@RequestParam("token")?String?token?,
?????????????????????????????????@RequestParam("userId")?Integer?userId,
?????????????????????????????????@RequestParam(required?=?false,value?=?"projId")?Integer?projId){

????try?{
????????return?new?SuccessTip(userService.bindUserIdAndToken(userId,token,projId));
????}?catch?(Exception?e)?{
????????e.printStackTrace();
????????return?new?ErrorTip(500,e.getMessage());
????}

}

@Override
public?String?bindUserIdAndToken(Integer?userId,?String?token,Integer?projId)?throws?Exception?{

????QrLoginToken?qrLoginToken?=?new?QrLoginToken();
????qrLoginToken.setToken(token);
????qrLoginToken?=?qrLoginTokenMapper.selectOne(qrLoginToken);

????if(null?==?qrLoginToken){
????????throw??new?Exception("錯(cuò)誤的請(qǐng)求！");
????}

????Date?createDate?=?new?Date(qrLoginToken.getCreateTime().getTime()?+?(1000?*?60?*?Constant.LOGIN_VALIDATION_TIME));
????Date?nowDate?=?new?Date();
????if(nowDate.getTime()?>?createDate.getTime()){//當(dāng)前時(shí)間大于校驗(yàn)時(shí)間

????????JSONObject?jsonObject?=?new?JSONObject();
????????jsonObject.put("code",500);
????????jsonObject.put("msg","二維碼失效！");
????????WebSocketServer.sendInfo(jsonObject.toJSONString(),token);

????????throw??new?Exception("二維碼失效！");
????}

????qrLoginToken.setLoginTime(new?Date());
????qrLoginToken.setUserId(userId);

????int?i?=?qrLoginTokenMapper.updateById(qrLoginToken);

????JSONObject?jsonObject?=?new?JSONObject();
????jsonObject.put("code",200);
????jsonObject.put("msg","ok");
????jsonObject.put("userId",userId);
????if(ToolUtil.isNotEmpty(projId)){
????????jsonObject.put("projId",projId);
????}
????WebSocketServer.sendInfo(jsonObject.toJSONString(),token);

????if(i?>?0?){
????????return?null;
????}else{
????????throw??new?Exception("服務(wù)器異常！");
????}
}

//這句話比較關(guān)鍵
WebSocketServer.sendInfo(jsonObject.toJSONString(),token);

推薦閱讀：

為什么國內(nèi) 996 干不過國外的 955呢？

面試官：為什么SpringBoot的 jar 可以直接運(yùn)行？

最近面試BAT，整理一份面試資料《Java面試BATJ通關(guān)手冊(cè)》，覆蓋了Java核心技術(shù)、JVM、Java并發(fā)、SSM、微服務(wù)、數(shù)據(jù)庫、數(shù)據(jù)結(jié)構(gòu)等等。

朕已閱?