使用Springboot 2.7+Websocket+js实现服务端消息实时推送

喜欢ヅ旅行 2024-04-22 07:04 66阅读 0赞

#### 文章目录 ####

*  诉求
 *  相关技术
 *  相关步骤
 *   *  项目创建
     *  编写相关配置
     *  消息逻辑处理
     *  使用JavaScript实现Websocket的前端功能
     *  功能测试

## 诉求 ##

模拟服务端主动推送消息给客户端，同时展示客户端发送给客户端的消息以及服务端推送给客户的消息。

## 相关技术 ##

Springboot(2.7.0)+Websocket+javascript

## 相关步骤 ##

### 项目创建 ###

> 创建一个Spring Boot项目，并在pom.xml文件中添加Websocket依赖。完整依赖如下

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.7.0</version>
        </parent>
        <groupId>com.example</groupId>
        <artifactId>demo</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <packaging>war</packaging>
        <name>demo</name>
        <description>Demo project for Spring Boot</description>
        <properties>
            <java.version>8</java.version>
            <java.encoding>UTF-8</java.encoding>
            <slf4j.version>1.7.30</slf4j.version>
        </properties>
        <dependencies>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
                <scope>provided</scope>
            </dependency>
    
            
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-api</artifactId>
                <version>${slf4j.version}</version>
            </dependency>
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-log4j12</artifactId>
                <version>${slf4j.version}</version>
            </dependency>
            <dependency>
                <groupId>org.apache.logging.log4j</groupId>
                <artifactId>log4j-to-slf4j</artifactId>
                <version>2.14.0</version>
            </dependency>
    
    
        </dependencies>
    
        <build>
            <pluginManagement>
                <plugins>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-compiler-plugin</artifactId>
                        <version>3.1</version>
                        <configuration>
                            <target>${java.version}</target>
                            <source>${java.version}</source>
                            <encoding>${java.encoding}</encoding>
                        </configuration>
                    </plugin>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-surefire-plugin</artifactId>
                        <version>2.6</version>
                    </plugin>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-release-plugin</artifactId>
                        <configuration>
                            <arguments>-Prelease</arguments>
                        </configuration>
                    </plugin>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-source-plugin</artifactId>
                        <version>2.1</version>
                        <configuration>
                            <attach>true</attach>
                        </configuration>
                        <executions>
                            <execution>
                                <phase>compile</phase>
                                <goals>
                                    <goal>jar</goal>
                                </goals>
                            </execution>
                        </executions>
    
                    </plugin>
                </plugins>
            </pluginManagement>
        </build>
    
    </project>

### 编写相关配置 ###

> 编写WebSocketConfig和WebSocketHandler配置类，实现对WebSocket的配置。

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.config.annotation.*;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /**
     * @author 
     * @date 2023年01月30日 14:07
     */
    @Configuration
    @EnableWebSocketMessageBroker
    public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
        
    
    //    @Override
    //    public void configureMessageBroker(MessageBrokerRegistry registry) {
        
    //        registry.enableSimpleBroker("/topic");
    //        registry.setApplicationDestinationPrefixes("/app");
    //    }
    
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
        
            registry.addEndpoint("/websocket").withSockJS();
        }
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
        
            return new ServerEndpointExporter();
        }
    
    }

import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Component;
    import org.springframework.web.socket.CloseStatus;
    import org.springframework.web.socket.TextMessage;
    import org.springframework.web.socket.WebSocketSession;
    import org.springframework.web.socket.handler.TextWebSocketHandler;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * handler 
     * @date 2023年01月30日 14:08
     */
    @Component
    public class WebSocketHandler extends TextWebSocketHandler {
        
    
        private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketHandler.class);
    
        private static final List<WebSocketSession> sessions = new ArrayList<>();
    
        @Override
        public void handleTextMessage(WebSocketSession session, TextMessage message) {
        
            LOGGER.info("Received message: {}", message.getPayload());
            for (WebSocketSession webSocketSession : sessions) {
        
                try {
        
                    webSocketSession.sendMessage(message);
                } catch (IOException e) {
        
                    LOGGER.error("Error: {}", e.getMessage());
                }
            }
        }
    
        @Override
        public void afterConnectionEstablished(WebSocketSession session) {
        
            sessions.add(session);
        }
    
        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        
            sessions.remove(session);
        }
    }

### 消息逻辑处理 ###

> 编写一个WebSocketServer类，实现服务端主动推送消息的逻辑(此处服务端推送客户端消息的逻辑采用定时任务自动推送，⚠️注意:必须在启动类中加入@EnableScheduling注解，开启定时任务的支持)。

import org.springframework.scheduling.annotation.Scheduled;
    import org.springframework.stereotype.Component;
    import org.springframework.util.CollectionUtils;
    
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Random;
    import java.util.concurrent.ConcurrentHashMap;
    
    /**
     * @author 
     * @date 2023年01月30日 11:19
     */
    @ServerEndpoint("/websocket")
    @Component
    public class WebSocketServer {
        
    
        private Session session;
    
        /*    <sessionId, WebSocketServer> 用于存储websocket连接，key为sessionId  */
        private static ConcurrentHashMap<String, WebSocketServer> webSocketServerConcurrentHashMap = new ConcurrentHashMap();
    
        @OnOpen
        public void onOpen(Session session) {
        
            this.session = session;
            webSocketServerConcurrentHashMap.put(session.getId(), this);
            System.out.println("WebSocket opened: " + session.getId());
        }
    
        @OnMessage
        public void onMessage(String message, Session session) {
        
            System.out.println("WebSocket message received: " + message);
            String dateStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(System.currentTimeMillis());
            try {
        
                //发送的消息也返回给当前连接，用于展示
                session.getBasicRemote().sendText(dateStr + "发送消息:" + message);
    
                //写入DB或者其他存储系统中。。。
    
            } catch (IOException e) {
        
                e.printStackTrace();
            }
        }
    
        @OnClose
        public void onClose(Session session, CloseReason closeReason) {
        
            webSocketServerConcurrentHashMap.remove(session.getId());
            System.out.println("WebSocket closed: " + closeReason);
        }
    
        @OnError
        public void onError(Session session, Throwable throwable) {
        
            System.out.println("WebSocket error: " + throwable);
        }
    
        /**
         * 模拟服务端消息推送,5s推送一次(服务端 -> 客户端)
         */
        @Scheduled(fixedRate = 5000)
        public void sendMessageToClient() {
        
            //没有连接时不做任何事情
            if (CollectionUtils.isEmpty(webSocketServerConcurrentHashMap)){
        
                return;
            }
    
            System.out.println("服务端发送消息到客户端");
            String dateStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(System.currentTimeMillis());
            long number = new Random().nextInt(10000);
            webSocketServerConcurrentHashMap.forEach((k, v) -> {
        
                try {
        
                    v.session.getBasicRemote().sendText(dateStr + "收到消息:" + number);
    
                    //写入DB或者其他存储系统中。。。
    
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            });
        }
    
    
    }

> 启动类中加入@EnableScheduling注解以支持定时任务

![在这里插入图片描述][f93bae5944b845cfb0ea12b2d56fc2c1.png]

### 使用JavaScript实现Websocket的前端功能 ###

> 在页面中使用JavaScript实现Websocket的前端实现，建立连接，接收并显示消息。在页面关闭时通过JavaScript关闭Websocket连接，以确保连接正常关闭。

<!DOCTYPE html>
    <html>
    <head>
        <title>WebSocket Example</title>
        <script>
            var socket;
    
            //防止每次刷新页面产生新的WebSocket连接，在此加入判断
            if (socket === undefined || socket.readyState === WebSocket.CLOSED) {
          
                connect();
            }
    
            //建立websocket连接
            function connect() {
          
                var endpoint = "ws://localhost:8080/websocket";
                socket = new WebSocket(endpoint);
    
                socket.onopen = function (event) {
          
                    console.log("WebSocket opened: " + endpoint);
                }
    
                socket.onmessage = function (event) {
          
                    console.log("WebSocket message received: " + event.data);
                    addMessageToList(event.data);
                }
    
                socket.onclose = function (event) {
          
                    console.log("WebSocket closed");
                }
            }
    
            //追加信息到列表中
            function addMessageToList(message) {
          
                var list = document.getElementById("message-list");
                var item = document.createElement("li");
                item.innerHTML = message;
                list.appendChild(item);
            }
    
            //模拟触发服务端发送信息
            function send() {
          
                var message = document.getElementById("message").value;
                socket.send(message);
            }
    
            //断开连接
            function disconnect() {
          
                socket.close();
            }
        </script>
    </head>
    
    
    <body onbeforeunload="disconnect()">
    
    <input type="text" id="message" placeholder="Type your message here">
    <button onclick="send()">Send msg to server</button>
    <button onclick="disconnect()">Disconnect</button>
    <button onclick="connect()">Open connect</button>
    <ul id="message-list"></ul>
    </body>
    </html>

### 功能测试 ###

> 前端效果

![在这里插入图片描述][91f251dccd6e4be196a4dc8a577b6086.png]

> 后端日志消息

![在这里插入图片描述][2f3c70aa1831451fbcd6bd0598ac7541.png]

[f93bae5944b845cfb0ea12b2d56fc2c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5a35420982f24881b749fe76ae1b62ff.png
[91f251dccd6e4be196a4dc8a577b6086.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2a5de942aea34839bcdefe70d45e119c.png
[2f3c70aa1831451fbcd6bd0598ac7541.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/098dbef17f7c4f03ba5205142ad4b6ea.png