最近这段时间，在开发中碰到一个核销的需求——手机公众号打开二维码页面后，第三方扫码器扫描出现的二维码，扫描后第三方在第三方后台处理数据并调用我司的接口，我方要主动将消息推送给前端，要求前后端配合，前端使用websocket后端使用socket，在进入二维码页面时前端就使用websocket，后台消息处理完后才从后端向前端主动推送消息。
公司的架构用的是springboot+gradle，大致的实现分为几步：
主要分为四步：
1.引入和socket有关的jar包依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.1.3.RELEASE</version> </dependency>
2.编写websocket的配置类config
/**
* 配置类 *
要注入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
*/
@Configurationpublic class SocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}}
3.编写websocket的具体实现类
/** * websocket的具体实现类 */ @Component @ServerEndpoint(value="/webSocket") @Slf4j public class WebSocket { private Session session; private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); //前端页面一打开就将session存入map中，当后台支付后才将状态消息（成功，失败）推送给前端 private static Map<String,Session> sessionMap=new HashMap(); @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); sessionMap.put(session.getId(),session); log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size()); } @OnClose public void onClose() { //从set中删除 webSocketSet.remove(this); log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size()); } @OnMessage public void onMessage(String message) { log.info("【websocket消息】收到客户端发来的消息:{}", message); } @OnError public void onError(Session session,Throwable error){ log.info("socket连接发生错误,错误消息：{}",error.getStackTrace()); } /** * 群发自定义消息 * @param message */ public static void sendMessage(String message) { for (WebSocket webSocket : webSocketSet) { log.info("【websocket消息】广播消息, message={}", message); try { //getAsyncRemote实现异步 webSocket.session.getAsyncRemote().sendText(message); //getBasicRemote()方法实现同步，可能阻塞 // webSocket.session.getBasicRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } } /** * 推送消息给特定用户，controller负责调用 */ public static void sendMessageToSpetialWeb(String sessionId,String statusMessage){ try{ Session session=sessionMap.get(sessionId); session.getAsyncRemote().sendText(statusMessage); log.info("【已经通过socket将{}消息发送给sessionid为{}的前端】",statusMessage,sessionId); }catch (Exception e){ e.printStackTrace(); } } }
4.前端配合
<!DOCTYPE html> <html lang="utf-8"> <head> <title>web control</title> <style> #message{ margin-top:40px; border:1px solid gray; padding:20px; } </style> </head> <body> <button onclick="connectWebSocket()">connect WebSocket</button> <button onclick="closeWebSocket()">close connect</button> <hr> <br /> message:<input id="text" type="text" /> <br> <button onclick="send()">send message</button> <br> <div id="message"></div> </body> <script type="text/javascript"> var websocket = null; function connectWebSocket(){ //判断当前浏览器是否支持WebSocket if ('WebSocket'in window) { //webSocket为websocket具体实现类中ServerEndPoint注解的路径参数 websocket = new WebSocket("ws://localhost:9011/pqs/webSocket"); } else { alert('Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event) { setMessageInnerHTML("Loc MSG: connect link success"); } //接收到消息的回调方法 websocket.onmessage = function(event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function() { setMessageInnerHTML("Loc MSG:close websocket"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭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>