整個過程如下：

1.新增依賴

2.注入ServerEndpointExporter

3.編寫WebSocket介面

4.在業務中呼叫

5.前端js

以下開始：

1.新增依賴

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

2.注入ServerEndpointExporter

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


@Component
public class WebSocketConfig {

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

}
 

3.編寫WebSocket介面

import lombok.extern.apachecommons.CommonsLog;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;


@Component
@CommonsLog
@ServerEndpoint("/websocket")
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        log.info("新建一個連線，當前連線數：" + webSocketSet.size());
    }

    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        log.info("關閉了一個連線，當前連線數：" + webSocketSet.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("發來的訊息是：" + message);
    }

    public void sendMessage(String message){
        for(WebSocket webSocket : webSocketSet){
            log.info("廣播訊息：" + message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e){
                log.error(e.fillInStackTrace());
            }

        }
    }


}
 

4.在業務中呼叫

@Autowired
private WebSocket webSocket;

...

webSocket.sendMessage("new-order");

5.前端js

    // 這裡是收到訊息時播放音訊
    var myAuto = document.getElementById('order_audio');
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket('wss://xxxx.com/websocket');
    } else {
        alert('瀏覽器不支援websocket');
    }

    // 新增心跳，保持連線狀態
    var heartCheck = {
        timeout: 60000,//60s
        timeoutObj: null,
        reset: function(){
            clearInterval(this.timeoutObj);
            this.start();
        },
        start: function(){
            this.timeoutObj = setInterval(function(){
                if(websocket.readyState==1){
                    websocket.send("HeartBeat");
                }
            }, this.timeout)
        }
    };

    websocket.onopen = function (ev) {
        console.log("建立連線");
        heartCheck.start();
    }
    websocket.onclose = function (ev) {
        console.log("關閉連線");
        if (ev.code != 4500) {
            reconnect();
        }
    }
    websocket.onmessage = function (ev) {
        console.log("收到訊息:" + ev.data);
        heartCheck.reset();
        if(ev.data=='new-order'){
            // 播放音訊
            myAuto.play();
	}
    }
    websocket.onerror = function (ev) {
        console.log("連線發生錯誤");
    }
    window.onbeforeunload = function (ev) {
        websocket.close();
    }

}
 

這裡因為使用的是https所以websocket是wss.