Springboot 2.1.5 + Websocket 集成交互式页面响应

你的名字 2023-02-14 15:51 17阅读 0赞

先上效果图，页面与后端交互：

[http://localhost:8088/index][http_localhost_8088_index]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 3][]

### **第一步：开始上核心代码** ###

package com.xing.websocket.web.config;
    
    /**
     * @Class AppConfig
     * @Author 作者姓名:刘兴
     * @Version 1.0
     * @Date 创建时间：2020-03-21 11:48
     * @Copyright Copyright by Liuxing
     * @Direction 类说明
     */
    public class AppConfig {
    
        /**
         * 被订阅的频道-消息
         */
        public static final String SUBSCRIBE = "/topic/message";
    
        /**
         * 被订阅的频道-价格波动
         */
        public static final String SUBSCRIBE_MARKET = "/topic/market";
    
        /**
         * stomp节点
         */
        public static final String ENDPOINT = "/webSocketServer";
        /**
         * 消息代理
         */
        public static final String BROKER = "/topic";
    
    }

package com.xing.websocket.web.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.messaging.simp.config.MessageBrokerRegistry;
    import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
    import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
    import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
    import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
    
    /**
     * @title websocket配置
     * @author yc 2018年5月21日
     */
    @Configuration
    //表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。
    @EnableWebSocketMessageBroker
    public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    
        /**
         * @title 用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/topic
         * @author yc 2018年5月21日
         */
        public void configureMessageBroker(MessageBrokerRegistry registry) {
            // 订阅Broker名称
            registry.enableSimpleBroker(AppConfig.BROKER  );
            // 全局使用的消息前缀（客户端订阅路径上会体现出来）
            registry.setApplicationDestinationPrefixes("/app");
            // 点对点使用的订阅前缀（客户端订阅路径上会体现出来），不设置的话，默认也是/user/
            //registry.setUserDestinationPrefix("/user/");
        }
    
    
        /**
         * @title 表示注册STOMP协议的节点，并指定映射的URL。
         * @author yc 2018年5月21日
         */
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
    
            // 允许使用socketJs方式访问，访问点为webSocketServer，允许跨域
            // 在网页上我们就可以通过这个链接
            // http://localhost:8080/webSocketServer
            // 来和服务器的WebSocket连接
            registry.addEndpoint(AppConfig.ENDPOINT )
                    .addInterceptors(new HttpSessionHandshakeInterceptor() )
                    .setAllowedOrigins("*")
                    .withSockJS();
        }
    
    }

package com.xing.websocket.util.websocket;
    
    import com.xing.websocket.web.var.SystemVarConstants;
    import com.xing.websocket.web.config.AppConfig;
    import org.apache.commons.lang3.StringUtils;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    /**
     * @Class WebSocketBasicUtils
     * @Author 作者姓名:刘兴
     * @Version 1.0
     * @Date 创建时间：2020-04-02 14:33
     * @Copyright Copyright by Liuxing
     * @Direction 类说明
     */
    public class WebSocketBasicUtils {
    
        public final static Logger logger = LoggerFactory.getLogger( WebSocketBasicUtils.class );
    
        public static void sendMessageToTopic( String subScribeType , String message ){
            //广播开始发威
            if( SystemVarConstants.simpMessagingTemplate != null && StringUtils.isNotBlank( subScribeType )){
                switch ( subScribeType ){
                    case AppConfig.SUBSCRIBE: {
                        //消息广播给所有注册到 AppConfig.SUBSCRIBE 的客户端
                        SystemVarConstants.simpMessagingTemplate.convertAndSend( AppConfig.SUBSCRIBE , message ) ;
                    }
                    case AppConfig.SUBSCRIBE_MARKET: {
                        SystemVarConstants.simpMessagingTemplate.convertAndSend( AppConfig.SUBSCRIBE_MARKET , message ) ;
                    }
                }
            }else{
                logger.error( "..... SystemVarConstants.simpMessagingTemplate is null ....." );
            };
        }
    
    }

package com.xing.websocket.util.websocket;
    
    import com.xing.websocket.web.config.AppConfig;
    import org.apache.commons.lang3.StringUtils;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    import java.text.MessageFormat;
    import java.util.Formatter;
    
    /**
     * @Class WebSocketMarketUtils
     * @Author 作者姓名:刘兴
     * @Version 1.0
     * @Date 创建时间：2020-03-24 10:14
     * @Copyright Copyright by Liuxing
     * @Direction 类说明
     */
    public class WebSocketMarketUtils extends WebSocketBasicUtils {
    
        private static Logger logger = LoggerFactory.getLogger( WebSocketMarketUtils.class ) ;
    
        private final static String INFO = "INFO" ;
        private final static String WARN = "WARN" ;
        private final static String ERROR = "ERROR" ;
    
        /****
         * 给绑定到：AppConfig.SUBSCRIBE_SPIDER_MARKET 的链接发送数据
         * @param message
         */
        public static void sendSpiderMessage( String message ){
            if(  StringUtils.isNotBlank( message )) {
                logger.info(message);
                if(  StringUtils.isNotBlank( message )) {
                    sendMessageToTopic( AppConfig.SUBSCRIBE_MARKET , message );
                }
            }
        }
    
        /***
         * 模拟slf4j打印日志的方式传入值
         * @param message
         * @param data
         */
        private static void sendMessage( String message , String level , Object... data ){
            if(StringUtils.isNotBlank( message ) && data != null ) {
                //message = message.replace("{}" , "%s") ;
                message = MessageFormat.format(message, data);
                if( WARN.equals( level ) ){
                    message = new StringBuilder("<span style='color:orangered;'>").append( message ).append( "</span>" ).toString()  ;
                }else if( ERROR.equals( level ) ){
                    message = new StringBuilder("<span style='color:chocolate;'>").append( message ).append( "</span>" ).toString()  ;
                }
                sendSpiderMessage( message )  ;
            }else{
                logger.error( "..... paramter is null ....." );
            };
        }
    
        /***
         * 模拟slf4j打印-ERROR-日志的方式传入值
         * @param message
         * @param data
         */
        public static void sendErrorSpiderMessage( String message , Object... data ){
            sendMessage( message , ERROR , data ) ;
        }
    
        /***
         * 模拟slf4j打印-ERROR-日志的方式传入值
         * @param message
         * @param data
         */
        public static void sendWarnSpiderMessage( String message , Object... data ){
            sendMessage( message , WARN , data ) ;
        }
    
        /***
         * 模拟slf4j打印-INFO-日志的方式传入值
         * @param message
         * @param data
         */
        public static void sendSpiderMessage( String message , Object... data ){
            sendMessage( message , INFO , data ) ;
        }
    
    
    
    
    }

package com.xing.websocket.web.runner;
    
    import com.xing.websocket.web.var.SystemVarConstants;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.CommandLineRunner;
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    import org.springframework.stereotype.Component;
    
    /**
     * @Class SpiderCommandLineRunner
     * @Author 作者姓名:刘兴
     * @Version 1.0
     * @Date 创建时间：2020-03-24 09:33
     * @Copyright Copyright by Liuxing
     * @Direction 类说明       系统初始化启动时会进入
     * 实现了 CommandLineRunner 接口的 Component 会在所有 Spring Beans 初始化完成之后， 在 SpringApplication.run() 执行之前完成
     */
    @Component
    public class SpiderCommandLineRunner implements CommandLineRunner {
    
        private Logger logger =  LoggerFactory.getLogger(SpiderCommandLineRunner.class);
    
        @Autowired
        private SimpMessagingTemplate simpMessagingTemplate ;
    
        @Override
        public void run(String... args) throws Exception {
            logger.info("...init resources by implements CommandLineRunner...");
            SystemVarConstants.simpMessagingTemplate = simpMessagingTemplate ;
            logger.info(" 初始化系统 WebSocket 消息模板: SystemVarConstants.simpMessagingTemplate ....");
        }
    
    }

package com.xing.websocket.web.var;
    
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    
    /**
     * @Class SystemVarConstants
     * @Author 作者姓名:刘兴
     * @Version 1.0
     * @Date 创建时间：2020/2/17 13:14
     * @Copyright Copyright by
     * @Direction 类说明
     */
    public class SystemVarConstants {
    
        public static SimpMessagingTemplate simpMessagingTemplate ;     // 简单的消息推送模板
    
    }

具体逻辑我就不说了，请直接上码云取吧！

码云地址：[https://gitee.com/diandeng/springboot-model][https_gitee.com_diandeng_springboot-model]

[http_localhost_8088_index]: http://localhost:8088/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603181013897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200603180707398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200603180724144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200603180933792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw==,size_16,color_FFFFFF,t_70
[https_gitee.com_diandeng_springboot-model]: https://gitee.com/diandeng/springboot-model