前言
hello，老朋友好，这是我第十七篇关于spring boot相关的文章。
前段时间啊，我在写我的秀基宝项目时候，做一个扫码登录，里面就用到了websocket，其实核心原理就是这个技术。下面先讲一个扫码的思路背景
一、扫码登录思路
1.1、对象
- PC
- 手机
- 服务器
1.2、思路
- 1、前端访问服务器生成一个二维码，里面放置了一个uid（告诉你是这个页面）并且设置时间限制。
- 2、前端此时将上面uid作为参数调用websocket访问服务器，加入存活的队列。
- 3、服务器收到消息就会建立长链接，到这里长链接就建好了。
- 4、服务器准备一个接口，请求参数uid和用户id，逻辑主要是校验uid是否有效。
- 5、手机扫描二维码得出一个uid，将该uid请求第四步接口
- 6、请求校验成功后，服务器就会生成登录token并且通知给前端
- 7、前端收到token就放行，显示登陆成功、断开连接。
二、WebSocket搭建
2.1、pom文件
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- websocket dependency -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.34</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.5</version>
</dependency>
2.2、配置
server.port: 8885
thymeleaf.cache: false
thymeleaf.prefix: classpath:/templates/
thymeleaf.suffix: .html
thymeleaf.mode: HTML5
thymeleaf.encoding: UTF-8
thymeleaf.content-type: text/html
2.3、websocket配置
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
2.4、websocket核心代码
/**
* 描述
*
* @author: 秀总(秀基宝)
* @date: 2022/3/10 16:17
* @Copyright (c) 2022/3/10 vivo Tech
*/
@ServerEndpoint(value = "/ws/asset")
@Component
@Slf4j
public class WebSocketServer {
@PostConstruct
public void init() {
System.out.println("websocket 加载");
}
private static final AtomicInteger OnlineCount = new AtomicInteger(0);
// concurrent包的线程安全Set，用来存放每个客户端对应的Session对象。
private static CopyOnWriteArraySet<Session> SessionSet = new CopyOnWriteArraySet<Session>();
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session) {
SessionSet.add(session);
int cnt = OnlineCount.incrementAndGet(); // 在线数加1
log.info("有连接加入，当前连接数为：{}", cnt);
SendMessage(session, "连接成功");
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(Session session) {
SessionSet.remove(session);
int cnt = OnlineCount.decrementAndGet();
log.info("有连接关闭，当前连接数为：{}", cnt);
}
/**
* 收到客户端消息后调用的方法
*
* @param message
* 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("来自客户端的消息：{}",message);
SendMessage(session, "收到消息，消息内容："+message);
}
/**
* 出现错误
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误：{}，Session ID： {}",error.getMessage(),session.getId());
error.printStackTrace();
}
/**
* 发送消息，实践表明，每次浏览器刷新，session会发生变化。
* @param session
* @param message
*/
public static void SendMessage(Session session, String message) {
try {
session.getBasicRemote().sendText(String.format("%s (From Server，Session ID=%s)",message,session.getId()));
} catch (IOException e) {
log.error("发送消息出错：{}", e.getMessage());
e.printStackTrace();
}
}
/**
* 群发消息
* @param message
* @throws IOException
*/
public static void BroadCastInfo(String message) throws IOException {
for (Session session : SessionSet) {
if(session.isOpen()){
SendMessage(session, message);
}
}
}
/**
* 指定Session发送消息
* @param sessionId
* @param message
* @throws IOException
*/
public static void SendMessage(String message,String sessionId) throws IOException {
Session session = null;
for (Session s : SessionSet) {
if(s.getId().equals(sessionId)){
session = s;
break;
}
}
if(session!=null){
SendMessage(session, message);
}
else{
log.warn("没有找到你指定ID的会话：{}",sessionId);
}
}
}
2.5、websocket接口
/**
* 描述
*
* @author: 秀总(秀基宝)
* @date: 2022/3/10 16:22
* @Copyright (c) 2022/3/10 vivo Tech
*/
@Controller
@RestController
@RequestMapping("/api/ws")
public class WebSocketController {
/**
* 群发消息内容
* @param message
* @return
*/
@RequestMapping(value="/sendAll", method= RequestMethod.GET)
public String sendAllMessage(@RequestParam(required=true) String message){
try {
WebSocketServer.BroadCastInfo(message);
} catch (IOException e) {
e.printStackTrace();
}
return "ok";
}
/**
* 指定会话ID发消息
* @param message 消息内容
* @param id 连接会话ID
* @return
*/
@RequestMapping(value="/sendOne", method=RequestMethod.GET)
public String sendOneMessage(@RequestParam(required=true) String message,@RequestParam(required=true) String id){
try {
WebSocketServer.SendMessage(message,id);
} catch (IOException e) {
e.printStackTrace();
}
return "ok";
}
}
2.6、前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>websocket测试</title>
<style type="text/css">
h3, h4 {
text-align: center;
}
</style>
</head>
<body>
<h3>WebSocket测试，在<span style="color:red">控制台</span>查看测试信息输出！</h3>
<h4>
[url=/api/ws/sendOne?message=单发消息内容&id=none]单发消息链接[/url]
[url=/api/ws/sendAll?message=群发消息内容]群发消息链接[/url]
</h4>
<script type="text/javascript">
var socket;
connect();
function connect() {
if (typeof (WebSocket) == "undefined") {
console.log("遗憾：您的浏览器不支持WebSocket");
} else {
console.log("恭喜：您的浏览器支持WebSocket");
}
if (socket && socket.readyState == 1) {
return;
}
socket = new WebSocket("ws://localhost:8885/ws/asset");
// 打开事件
socket.onopen = function () {
heartCheck.reset().start();
console.log("socket 已打开");
socket.send("消息发送测试(From Client)");
};
// 获得消息事件
socket.onmessage = function (msg) {
heartCheck.reset().start();
console.log(msg.data);
};
// 关闭事件
socket.onclose = function () {
console.log("Socket 已关闭")
};
// 发生错误
socket.onerror = function () {
console.log("Socket 发生了错误")
};
}
function close() {
socket.close();
}
// 心跳检测，每隔一段时间检测连接状态，如果处于连接中，就像Server主动发送消息，来重置Server段与客户端的最大连接时间，如果已经断开，发起重连
var heartCheck = {
// 9分钟发起一次心跳，比Server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间
timeout: 550000,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
this.serverTimeoutObj = setInterval(function () {
if (socket.readyState == 1) {
console.log("连接状态，发送消息保持连接");
socket.send("ping");
// 如果获取到消息，说明连接正常，重置心跳检测
heartCheck.reset().start();
} else {
console.log("断开连接，尝试重连");
connect();
}
}, this.timeout)
}
};
</script>
</body>
</html>
三、测试
3.1、浏览器
1、我首先打开两个窗口到终端接收消息（访问：http://localhost:8885/）
3.2、服务器
此时服务器就收到两个用户,并且收到页面发送过来的消息
3.3、请求消息
http://localhost:8885/api/ws/sendOne?message=单发消息内容&id=2
上面链接请求接口，此时服务器就会发消息到终端，就是上面收到消息
群发（http://localhost:8885/api/ws/sendAll?message='dsasdsfsdfsdf'）可以看到两个终端窗口都收到消息了
假如你发送不存在的id上面核心代码有进行判断拦截
优化
- 访问用户uid可以用redis缓冲抗压(ok)
- 二维码可以设置过期来用于判断(ok)
- 二维码过期需要重新申请二维码(ok)
- WebSocket加入心跳包防止自动断开连接(ok：上面以及有了，但是nginx需要配置)
