spring boot 內建webSocket 實作前後端資料實時互動

1.引入包

gradle:

compile "org.springframework.boot:spring-boot-starter-websocket"      

2.服務端代碼

@Slf4j
@ServerEndpoint(value = "/websocket")
@Component
@EnableWebSocket
public class WebSocketServer {
    //靜态變量，用來記錄目前線上連接配接數。應該把它設計成線程安全的。
    private static int onlineCount = 0;
    //concurrent包的線程安全Set，用來存放每個用戶端對應的MyWebSocket對象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
 
    //與某個用戶端的連接配接會話，需要通過它來給用戶端發送資料
    private Session session;
    private final int maxLine = 300;

        /**
     * 連接配接建立成功調用的方法*/
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //線上數加1
        log.info("有新連接配接加入！目前線上人數為" + getOnlineCount());
        try {
            sendMessage("連接配接成功"+ "</br>");
        } catch (IOException e) {
            log.error("websocket IO異常");
        }
    }
//    //連接配接打開時執行
//    @OnOpen
//    public void onOpen(@PathParam("businessId") Long businessId,
//                       @PathParam("cmd") String cmd,
//                       Session session) {
//        webSocketSet.add(this);     //加入set中
//        addOnlineCount();           //線上數加1
//        log.info("有新連接配接加入！目前線上人數為" + getOnlineCount());
//
//    }
 
    /**
     * 連接配接關閉調用的方法
     */
    @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("來自用戶端的消息:" + message);
      

             //處理邏輯傳回前端

sendMessage(message);  
    }

    

    

   /**
    * 
    * @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) throws IOException {
       log.info(message);
        for (WebSocketServer item : webSocketSet) {
            try {
                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--;
    }
}      

3.前端

</div>
<table class="layui-table">
    <div class="conWrap">
        <div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
            <div></div>
        </div>
    </div>
</table>      

4.js

var websocket = null;

//判斷目前浏覽器是否支援WebSocket
if('WebSocket' in window){
    // websocket = new WebSocket("ws://localhost:1234/websocket");
    websocket = new WebSocket("ws://10.8.16.25:1234/websocket");
}
else{
    alert('Not support websocket')
}

//連接配接發生錯誤的回調方法
websocket.onerror = function(){
    setMessageInnerHTML("error"+ "</br>");
};

//連接配接成功建立的回調方法
websocket.onopen = function(event){
    setMessageInnerHTML("open"+ "</br>");
}

//接收到消息的回調方法
websocket.onmessage = function(event){
    setMessageInnerHTML(event.data);
}

//連接配接關閉的回調方法
websocket.onclose = function(){
    setMessageInnerHTML("close"+ "</br>");
}

//監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連接配接，防止連接配接還沒斷開就關閉視窗，server端會抛異常。
window.onbeforeunload = function(){
    websocket.close();
}

//将消息顯示在網頁上
function setMessageInnerHTML(innerHTML){
    $("#log-container div").append(innerHTML);
    // 滾動條滾動到最低部
    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
}

//關閉連接配接
function closeWebSocket(){
    websocket.close();
}

//發送消息到服務端
function sendMessage(){
    var message = "";//傳達參數消息
    websocket.send(message);
}