springboot 集成 WebSocket (非本人原創)

WebSocket  應用場景：服務端向客戶端發送數據。

 

導入Maven

 

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

 

創建config

@Configuration
public class WebSocketConfig {

@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}

}

 

WebSocketServer

因為WebSocket是類似客戶端服務端的形式(采用ws協議)，那么這里的WebSocketServer其實就相當於一個ws協議的Controller 
直接@ServerEndpoint(“/websocket”)@Component啟用即可，然后在里面實現@OnOpen,@onClose,@onMessage等方法

 

@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {

static Log log=LogFactory.getLog(WebSocketServer.class);
//靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
private static int onlineCount = 0;
//concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();

//與某個客戶端的連接會話，需要通過它來給客戶端發送數據
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 {
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--;
}
}

 

消息推送

至於推送新信息，可以再自己的Controller寫個方法調用WebSocketServer.sendInfo();即可

 

@Controller @RequestMapping("/checkcenter") public class CheckCenterController { //頁面請求 @GetMapping("/socket/{cid}") public ModelAndView socket(@PathVariable String cid) { ModelAndView mav=new ModelAndView("/socket"); mav.addObject("cid", cid); return mav; } //推送數據接口 @ResponseBody @RequestMapping("/socket/push/{cid}") public ApiReturnObject pushToWeb(@PathVariable String cid,String message) { try { WebSocketServer.sendInfo(message,cid); } catch (IOException e) { e.printStackTrace(); return ApiReturnUtil.error(cid+"#"+e.getMessage()); } return ApiReturnUtil.success(cid); } }

 

頁面發起socket請求

然后在頁面用js代碼調用socket，當然，太古老的瀏覽器是不行的，一般新的瀏覽器或者谷歌瀏覽器是沒問題的。還有一點，記得協議是ws的哦，如果像我這樣封裝了一些basePath的路徑類，可以replace(“http”,”ws”)來替換協議

 

 

<script> var socket; if(typeof(WebSocket) == "undefined") { console.log("您的瀏覽器不支持WebSocket"); }else{ console.log("您的瀏覽器支持WebSocket"); //實現化WebSocket對象，指定要連接的服務器地址與端口 建立連接 //等同於socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20"); socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws")); //打開事件 socket.onopen = function() { console.log("Socket 已打開"); //socket.send("這是來自客戶端的消息" + location.href + new Date()); }; //獲得消息事件 socket.onmessage = function(msg) { console.log(msg.data); //發現消息進入 開始處理前端觸發邏輯 }; //關閉事件 socket.onclose = function() { console.log("Socket已關閉"); }; //發生了錯誤事件 socket.onerror = function() { alert("Socket發生了錯誤"); //此時可以嘗試刷新頁面 } //離開頁面時，關閉socket //jquery1.8中已經被廢棄，3.0中已經移除 // $(window).unload(function(){ // socket.close(); //}); } </script>

 

 

VUE 前端代碼：

 

send () {
  var message = 'haha'
  this.readyChat(message)
},
/* webSocket會話 */
/* 會話過程中實際調用的函數 */
readyChat (data) {
  let This = this
  if (this.websock.readyState === 1) { // this.websock.readyState = 1 表示連接成功，可以立即發送信息
    this.websocketSend(data)
  } else if (this.websock.readyState === 0) { // 表示正在連接，設置300ms后發送信息
    setTimeout(function () {
      This.websocketSend(data)
    }, 300)
  } else { // 連接未創建或者創建失敗，則重新創建連接，並設置500ms后發送信息
    this.websochetInit()
    setTimeout(function () {
      This.websocketSend(data)
    }, 500)
  }
},
/* 初始化websochet */
websochetInit () {
  this.websock = new WebSocket('ws:/192.168.0.。。。。')
  this.websock.onmessage = this.websocketMessage
},
/* websochet發送信息 */
websocketSend (data) {
  console.log(data)
  this.websock.send(data)
},
/* websochet接收服務器返回的信息 */
websocketMessage (e) {
  
},