①pom.xml添加
<!--websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
②添加WebSocketConfig類,開啟WebSocket支持
package com.danyu.framework.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * 開啟WebSocket支持 * Created by danyu on 2019/12/26. */ @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
③添加DemoWebsocketController控制器類
package com.demo.project.websocket.controller; import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache.shiro.authz.annotation.RequiresPermissions; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.demo.project.websocket.server.WebSocketServer; import com.ruoyi.framework.web.controller.BaseController; /** * * * @author danyu * @date 2019-09-30 */ @Controller @RequestMapping("/demo/websocket") public class DemoWebsocketController extends BaseController { private String prefix = "demo/websocket"; @RequiresPermissions("demo:websocket:view") @GetMapping() public String socket() { return prefix + "/websocket"; } @RequiresPermissions("demo:websocket:edit") //推送數據接口 @ResponseBody @RequestMapping("/push/{cid}") public Map pushToWeb(@PathVariable String cid, String message) { if(message==null){ message = "我是消息44"; } Map result = new HashMap(); try { WebSocketServer.sendInfo(message,cid); result.put("code", 200); result.put("msg", "success"); } catch (IOException e) { e.printStackTrace(); } return result; } }
④添加WebSocketServer類
package com.demo.project.websocket.server; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import org.springframework.stereotype.Component; import lombok.extern.slf4j.Slf4j; @ServerEndpoint("/WebSocketServer/{sid}") @Component @Slf4j public class WebSocketServer { // 靜態變量,用來記錄當前在線連接數。應該把它設計成線程安全的。 private static int onlineCount = 0; // concurrent包的線程安全Set,用來存放每個客戶端對應的MyWebSocket對象。 private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>(); //private static ConcurrentHashMap<String,WebSocketServer> websocketList = new ConcurrentHashMap<>(); // 與某個客戶端的連接會話,需要通過它來給客戶端發送數據 private Session session; // 接收sid private String sid = ""; // * 連接建立成功調用的方法* @OnOpen public void onOpen(Session session, @PathParam("sid") String sid) { this.session = session; webSocketSet.add(this); // 加入set中 addOnlineCount(); // 在線數加1 log.info("有新窗口開始監聽:" + sid + ",當前在線人數為" + getOnlineCount()); this.sid = sid; try { sendMessage("連接成功"); } catch (IOException e) { log.error("websocket IO異常"); } } // * 連接關閉調用的方法 @OnClose public void onClose() { webSocketSet.remove(this); // 從set中刪除 subOnlineCount(); // 在線數減1 log.info("有一連接關閉!當前在線人數為" + getOnlineCount()); } // */ /// ** // * 收到客戶端消息后調用的方法 // * // * @param message 客戶端發送過來的消息*//* @OnMessage public void onMessage(String message, Session session) { log.info("收到來自窗口" + sid + "的信息:" + message); // 群發消息 for (WebSocketServer item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); } } } /** * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { log.error("發生錯誤"); error.printStackTrace(); } /** * 實現服務器主動推送 */ public void sendMessage(String message) throws IOException { log.info("服務器消息推送:"+message); this.session.getBasicRemote().sendText(message); } /** * 群發自定義消息 */ public static void sendInfo(String message, @PathParam("sid") String sid) throws IOException { log.info("推送消息到窗口" + sid + ",推送內容:" + message); for (WebSocketServer item : webSocketSet) { try { // 這里可以設定只推送給這個sid的,為null則全部推送 if (sid == null) { item.sendMessage(message); } else if (item.sid.equals(sid)) { item.sendMessage(message); } } catch (IOException e) { continue; } } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; } public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() { return webSocketSet; } }
⑤添加websocket.html。路徑:resources/templates/demo/websocket
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"></meta> <title>Title</title> <script type="text/javascript" src="/js/jquery.min.js"></script> </head> <body> hello world! <button onclick="onSendButtonClick()">發送</button> <button onclick="onJhButtonClick()">交互</button> </body> <script> var index; if(typeof(WebSocket) == "undefined") { console.log("您的瀏覽器不支持WebSocket"); }else{ console.log("您的瀏覽器支持WebSocket"); index = new WebSocket("ws://localhost:8888/WebSocketServer/2"); //打開事件 index.onopen = function() { console.log("Socket 已打開"); //index.send("這是來自客戶端的消息" + location.href + new Date()); }; //獲得消息事件 index.onmessage = function(msg) { console.log("獲得消息:"+msg.data); //發現消息進入 開始處理前端觸發邏輯 }; //關閉事件 index.onclose = function() { console.log("Socket已關閉"); }; //發生了錯誤事件 index.onerror = function() { alert("Socket發生了錯誤"); //此時可以嘗試刷新頁面 } } function onSendButtonClick(){ console.log("開始發送"); index.send("這是來自客戶端的消息" + location.href + new Date()); } function onJhButtonClick(){ $.ajax({ url: "/demo/websocket/push/2", data: {"message":"我是消息"}, type: "post", processData: false, contentType: false, success: function(result) { console.log(result); alert(result); } }) } </script> </html>