webSocket可以实现后端主动向前端发送响应
例如 二维码支付功能中 客户支付完成后 后端主动向前端响应支付完成
原理 前端通过key在webSocket这个代理服务器中建立key-session的长链接
后端通过key访问到对应session并向前端反馈信息
一 实现流程
二 添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
三 代码
3.1 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>socket</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="div1">
<div style="width: 200px; height: 200px; background: lightcoral;" ></div>
</div>
<br>
<div>
<!-- <a href="http://localhost:8082/add/send/key1" >""</a> -->
<button id="button">点击向后端发送token</button>
</div>
<script>
var url="ws://localhost:8082/"
var key="key1"
//前端发送websocket连接请求
var webSocketUrl = url+"webSocket/"+key;
var websocket = new WebSocket( webSocketUrl );
//只要后端通过websocket向此连接发消息就会触发onmessage事件
websocket.onmessage = function(event){
var msg = event.data;
console.log("msg");
if(msg=="token"){ //验证后端发过来token令牌是否正确
$("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
}
}
$("#button").click(function() {
$.ajax({
url: "http://localhost:8082/add/send/key1", // key1是向后端发送的想访问的session长链接的key
});
});
</script>
</body>
</html>
3.2 后端代码
- WebSocketServer —创建websocket服务器
@Component
@ServerEndpoint("/webSocket/{key}")
@CrossOrigin
public class WebSocketServer {
private static ConcurrentHashMap<String,Session> sessionMap = new ConcurrentHashMap<>();
/**前端发送请求建立websocket连接，就会执行@OnOpen方法**/
@OnOpen
public void open(@PathParam("key") String key, Session session){ // 接受前端发送过来的key 建立对应session长链接
sessionMap.put(key,session);
}
/**前端关闭页面或者主动关闭websocket连接，都会执行close**/
@OnClose
public void close(@PathParam("key") String key){
sessionMap.remove(key);
}
public static void sendMsg(String key,String token){
try {
Session session = sessionMap.get(key);
session.getBasicRemote().sendText(token); //向前端发送token
}catch (Exception e){
e.printStackTrace();
}
}
}
- WebSocketConfig—添加websocket服务节点配置（Java配置⽅式）
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter getServerEndpointExporter(){
return new ServerEndpointExporter();
}
}
- controller-socket —通过key获取session向前端返回结果
@CrossOrigin
@RestController
@RequestMapping("/add")
public class socket {
@RequestMapping("/send/{key}") //向websocket发送信息
public void send(@PathVariable("key") String key){
WebSocketServer.sendMsg(key,"token"); //"key" 在Map中session对应的 key
// “token”是准备发送给前端的令牌
}
}
四 实现效果
-
点击前
-
点击后