添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
注入ServerEndpointExporter
这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。
package com.halburt.site.common.socket.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
websocket实现
@ServerEndpoint(value = "/web/admin/anon/ws")
@Component
public class TestWebSocket {
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
// concurrent包的线程安全Set，用来存放每个客户端对应的ProductWebSocket对象。
private static ConcurrentHashMap<String , TestWebSocket> webSocketSet = new ConcurrentHashMap<String ,TestWebSocket>();
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.put(session.getId() , this);
try {
session.getBasicRemote().sendText("sessionId="+session.getId());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(Session session) {
webSocketSet.remove(session.getId());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException, EncodeException {
session.getBasicRemote().sendText(JsonResult.success("来自客户端的消息:"+message).toJSONString());
System.out.println("来自客户端的消息:" + message);
}
/**
* 服务器端调用，发送消息
* @param sessionId
* @param message
* @throws IOException
*/
public static void sendMessage(String sessionId ,JSONObject message) throws IOException {
Session s = webSocketSet.get(sessionId).session;
if(null != s){
try {
s.getBasicRemote().sendText(message.toString());
} catch (Exception e) {
e.printStackTrace();
}
}
}
/**
* 发生错误时调用
*
* @OnError
*/
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
}
注意
private static ConcurrentHashMap<String , TestWebSocket> webSocketSet = new ConcurrentHashMap<String ,TestWebSocket>();
javax.websocket.Session只会与当前连接的服务进行通信，无法与掐服务器连接。所以不用想着用分布式情况下，进行redis缓存session，单机情况下本地ConcurrentHashMap存储session。【分布式情况暂考虑使用redis发布订阅】
添加登录页面
@GetMapping("/web/admin/anon/qrLogin")
public String qrLogin() {
return "ws/qrLogin.html";
}
<html>
<head>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
function create(url){
console.info(url)
$('#code').qrcode(url); //任意字符串
}
</script>
</head>
<body>
<div id="code"></div>
<input id="text" type="text" />
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
//此处替换为自己的IP
websocket = new WebSocket("ws://localhost:9000/web/admin/anon/ws");
}
else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open:"+event.data);
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
if(event.data.indexOf("sessionId=")== 0){
//此处替换为自己的IP
create("http://192.168.1.140/web/admin/anon/login2?"+event.data);
}
}
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
image.png
扫描
@ResponseBody
@GetMapping("/web/admin/anon/login2")
public String login(Model model,String sessionId) {
String userId = "1";//此处应该从扫描机器获取用户信息
try {
TestWebSocket.sendMessage(sessionId, JsonResult.success( "已经扫描"));
} catch (IOException e) {
e.printStackTrace();
}
//此处应该跳转一个页面
return "OK000";
}
扫描之后确认登录
此处应该设计加密规则
@ResponseBody
@GetMapping("/web/admin/anon/logined")
public String logined(Model model,String sessionId) {
String userId = "1";//此处应该从扫描机器获取用户信息
try {
TestWebSocket. sendMessage(sessionId, JsonResult.success( UserUtils.getSysUserById(userId)));
} catch (IOException e) {
e.printStackTrace();
}
return "OK000";
}
网友评论