首先我們引用Spring-boot所帶的websocket依賴:

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

然後編寫前端程式碼和後臺處理後臺觸發的事件:

<script>
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket('ws://localhost:80/websocket');
    }else{
        alert("該瀏覽器不支援WebSocket");
    }

    websocket.onopen = function (event) {
        console.log("建立連線");
    }

    websocket.onclose = function (event) {
        console.log("斷開連線");
    }

    websocket.onmessage = function (event) {
        console.log("收到訊息" + event.data);
        //彈框
        $('#myModal').modal('show');
        //播放音樂
        document.getElementById('notice').play();
    }

    websocket.onerror = function (event) {
        alert("websocket通訊發生錯誤");
    }

    window.onbeforeunload = function (event) {
        websocket.close();
    }
</script>
 

後臺進行websocket配置:

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

然後編寫websocket類,接收ws協議的請求:ws://localhost/websocket，並通過對應方法進行連線,同時編寫sendMessage()方法，向前臺傳送訊息，當後臺需要時就呼叫該方法

@Component
@ServerEndpoint("/websocket")
@Slf4j
public class WebSocket {
    private Session session;

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

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSockets.add(this);
        log.info("【websocket訊息】有新的連線, 總數:{}", webSockets.size());
    }


    @OnClose
    public void onClose() {
        webSockets.remove(this);
        log.info("【websocket訊息】連線斷開, 總數:{}", webSockets.size());
    }

    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket訊息】收到客戶端發來的訊息:{}", message);
    }

    public void sendMessage(String message){
        for (WebSocket webSocket: webSockets) {
            log.info("【websocket訊息】廣播訊息, message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}
 

當我們需要提交訂單想向前臺傳送訊息時，我們可以呼叫sendMessage()方法

@Autowired
private WebSocket webSocket;

//傳送websocket訊息
webSocket.sendMessage("您有新的訂單啦!!!");

前臺效果如下:

後臺訊息