首先介绍下,什么是单设备登录?
单设备登录可以理解为同一个应用某一时刻只允许单一用户使用处于登录状态。单设备登录可以类比QQ的踢出第二者登录模式,可以在一定的程度上保障账号的安全。
单设备登录的难点在哪?
单设备登录的难点在于如何主动、准确的推动消息到客户端。但是幸运的是我们可以通过WebSocket实现消息的准确推送,并且React中也有对应的WebSocket的Js依赖包可以使用。
下面将介绍详细的实现流程:
A、前端开发准备流程:
1、使用npm 安装正确的js依赖包:
|
|
参考文章:阮一峰的WebSocket 教程
2、websocket前端实现代码:
|
|
主要步骤就是在登录校验通过后就建立和WebSocket服务终端的链接,并启动消息监听,在多用户登录的时候,前端弹出提示消息并跳转到登录页面,在用户执行退出操作的时候终断websocket链接并跳转到登录页面。
具体情境如下图所示:
B、websocket后端开发流程
1、在用户成功登录后创建session并存储用户的登录信息;
2、websocket客户端和websocket服务端握手成功之后,将第一步中的session中的数据放入WebSocketSession中,便于在MyWebSocketHandler中创建在线用户表,最终将根据在线用户表中的userId实现一对一的消息推送。
3、ws请求进入MyWebSocketHandler【ws处理】中,在ws链接建立的生命周期中进行合理的数据处理。
WebSocketInterceptor.java
|
|
MyWebSocketHandler.java
|
|