简单实现websocket消息推送功能

引入webSocket依赖

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

加入webSocket配置类

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

创建WebSocket类

@Component
@ServerEndpoint("/webSocket")
@Slf4j
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 (Exception e){
                e.printStackTrace();
            }

        }
    }
}

在前端页面添加测试查看是否连接成功

测试页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="message">
        <div>
            测试页面
        </div>
    </div>
</body>
<script>
    var WebSocket = new WebSocket('ws://localhost:8080/webSocket');
    WebSocket.onopen = function(event) {
        console.log('WebSocket opened');
    };
    WebSocket.onmessage = function(event) {
        console.log('收到消息'+ event.data)
    };
</script>
</html>

成功后在后端控制台输出如下