SpringBoot中使用WebSocket

拼搏现实的明天。 2022-05-09 08:06 244阅读 0赞

整个过程如下：

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.