共计 8096 个字符，预计需要花费 21 分钟才能阅读完成。
最近单位又有一个新 Java 我的项目。
波及到扫码登录。之前我的项目应用的是 ajax 轮询的形式。感觉太 low 了。
所以这次用 webSocket 的形式进行实现
好。废话不多说！咱们开始！！
一、首先咱们须要一张表
这表是干啥的呢？就是记录一下谁扫码了。谁登录了。
User_Token 表
字段如下：
- uuid : 用于确保唯一性
- userId：谁登录的
- loginTime：登录工夫
- createTime：创立工夫 用于判断是否过期
- state：是否二维码生效 0 无效 1 生效
二、角色都有哪些
咱们还须要剖析一下子。扫码登录这个业务逻辑都有哪些角色
- android 端 or 微信 Web 端：扫码
- PC 端：被扫。登录
- 服务端：掌控全局，提供接口。
三、接口都须要哪些？
有了角色。你用大腿也能想进去接口了对不对！！
所以咱们的接口有 2 个！
- 生成二维码接口：生成一个二维码。二维码中有 UUID。
- 确认身份接口：确定身份以及判断是否二维码过期等
四、步骤
那句话怎么说的来着。要把大象装冰箱一共分几步？
- PC 端关上。调用生成二维码接口 并与 服务端建设链接。链接应用 uuid 进行绑定
- 微信 Web 端进行扫码。获取二维码中的 uuid。
- 微信 Web 端拿到 uuid 当前。显示是否登录页面。点击确定后 调用 确认身份接口。
- 确认身份接口通过当前。服务端给 PC 端发送信息。实现登录。此时链接断开。
好了！剖析完了这些。你们肯定在想。。还有完没完啊。。不要在 BB 了。。连忙贴代码吧。。
作者：观众老爷们。我这是在教给你们如何思考的办法呀?
那么开始贴代码吧！心愿大家在看到的同时也能够本人进行思考。
五、疯狂贴代码
首先须要获取二维码的代码对不对！贴！
// 获取登录二维码、放入 Token
@RequestMapping(value = "/getLoginQr" ,method = RequestMethod.GET)
public void createCodeImg(HttpServletRequest request, HttpServletResponse response){response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
try {
// 这里没啥操作 就是生成一个 UUID 插入 数据库的表里
String uuid = userService.createQrImg();
response.setHeader("uuid", uuid);
// 这里是开源工具类 hutool 里的 QrCodeUtil
// 网址：http://hutool.mydoc.io/
QrCodeUtil.generate(uuid, 300, 300, "jpg",response.getOutputStream());
} catch (Exception e) {e.printStackTrace();
}
}有了获取二维码的接口。绝对的前端须要调用。
知识点：动静加载图片流并取出 header 中的参数
这里应用了 xmlhttp 进行解决。
为什么？
因为后端返回的是一个流。
那么流中。就是搁置了二维码中的 uuid。这个 uuid 作为一次会话的标识符应用。
那么前端也须要拿到。跟后端进行 webSocket 链接。
这样有人扫码后。服务端才能够应用 webSocket 的形式告诉前端。有人扫码胜利了。你做你的业务吧。酱紫。
所以为了拿到申请中 header 中搁置的 uuid 所以这样通过 xmlhttp 进行解决
<div class="qrCodeImg-box" id="qrImgDiv"></div>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.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("登录胜利！");
// 这里寄存本人业务须要的数据。怎么放本人看
window.sessionStorage.uuid = uuid;
window.sessionStorage.userId = data.userId;
window.sessionStorage.projId = data.projId;
window.location.href = "pages/upload.html"
}else{
// 如果过期了，敞开连贯、重置连贯、刷新二维码
socket.close();
initQrImg();}
// 发现音讯进入 开始解决前端触发逻辑
};
// 敞开事件
socket.onclose = function() {console.log("Socket 已敞开");
};
// 产生了谬误事件
socket.onerror = function() {alert("Socket 产生了谬误");
// 此时能够尝试刷新页面
}
}
}好了。下面曾经提到了前端如何配置 webSocket。
上面说一下
springBoot 中如何操作 webSocket
Spring Boot 就不介绍了，基础教程和示例源码看这里：https://github.com/javastacks…
1、减少 pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2、减少一个 Bean
/**
* WebSocket 的反对
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();
}3、定义 WebSocketServer
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);
// 动态变量，用来记录以后在线连接数。应该把它设计成线程平安的。private static int onlineCount = 0;
//concurrent 包的线程平安 Set，用来寄存每个客户端对应的 MyWebSocket 对象。private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
// 与某个客户端的连贯会话，须要通过它来给客户端发送数据
private Session session;
// 接管 sid
private String sid="";
/**
* 连贯建设胜利调用的办法 */
@OnOpen
public void onOpen(Session session,@PathParam("sid") String sid) {
this.session = session;
webSocketSet.add(this); // 退出 set 中
addOnlineCount(); // 在线数加 1
log.info("有新窗口开始监听:"+sid+", 以后在线人数为" + getOnlineCount());
this.sid=sid;
/*try {sendMessage("连贯胜利");
} catch (IOException e) {log.error("websocket IO 异样");
}*/
}
/**
* 连贯敞开调用的办法
*/
@OnClose
public void onClose() {webSocketSet.remove(this); // 从 set 中删除
subOnlineCount(); // 在线数减 1
log.info("有一连贯敞开！以后在线人数为" + getOnlineCount());
}
/**
* 收到客户端音讯后调用的办法
*
* @param message 客户端发送过去的音讯 */
@OnMessage
public void onMessage(String message, Session session) {log.info("收到来自窗口"+sid+"的信息:"+message);
// 群发音讯
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("产生谬误");
error.printStackTrace();}
/**
* 实现服务器被动推送
*/
public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);
}
/**
* 群发自定义音讯
* */
public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {log.info("推送音讯到窗口"+sid+"，推送内容:"+message);
for (WebSocketServer item : webSocketSet) {
try {
// 这里能够设定只推送给这个 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--;}
}这样就减少了 webSocket 的反对啦。
那么回到方才的步骤。
1、首先 PC 端调用接口展现进去了二维码。
2、申请二维码中的 http 申请。就有 uuid 在 header 中。间接取到 uuid 作为 webSocket 的标识 sid 进行连贯。
3、而后手机端应用相机拿到二维码中的 uuid。应用 uuid + userid 申请 扫码胜利接口。
贴扫码胜利接口
Controller 代码：
/**
* 确认身份接口：确定身份以及判断是否二维码过期等
* @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());
}
}Service 代码
@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("谬误的申请！");
}
Date createDate = new Date(qrLoginToken.getCreateTime().getTime() + (1000 * 60 * Constant.LOGIN_VALIDATION_TIME));
Date nowDate = new Date();
if(nowDate.getTime() > createDate.getTime()){// 以后工夫大于校验工夫
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("服务器异样！");
}
}逻辑大略就是判断一下 token 对不对
如果对的话。工夫是否过期。如果没有过期进行业务逻辑操作
// 这句话比拟要害
WebSocketServer.sendInfo(jsonObject.toJSONString(),token);就是告诉前端 曾经登录胜利了。并且给他业务所须要的内容。
而后前端代码接管到了。就进行业务逻辑操作就能够啦。
原文链接：https://blog.csdn.net/q826qq1…
版权申明：本文为 CSDN 博主「93 年颈椎病人」的原创文章，遵循 CC 4.0 BY-SA 版权协定，转载请附上原文出处链接及本申明。
近期热文举荐：
1.1,000+ 道 Java 面试题及答案整顿 (2021 最新版)
2. 终于靠开源我的项目弄到 IntelliJ IDEA 激活码了，真香！
3. 阿里 Mock 工具正式开源，干掉市面上所有 Mock 工具！
4.Spring Cloud 2020.0.0 正式公布，全新颠覆性版本！
5.《Java 开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞 + 转发哦！
正文完