微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(一)

大家好,我是程序员大猩猩。

之前几篇文章,我们讲了Spring Cloud Gateway的轻量级实现,Nginx的配置概念与实现,如以下往期文章。

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 轻量级的Spring Cloud Gateway实践,实现api和websocket转发 |
| 轻松实现Nginx的HTTP与WebSocket转发:你的网站需要这个! |

以上我们提到了SockJs和Stomp,对于Gateway与SockJs的转发连接友好性,那么我们今天就来通过实践来完成这些实例。

首先,我们来了解一下SokeJs和Stomp。

什么是 SockJS

SockJS 是一种浏览器与服务器之间的通信协议,它可以在浏览器和服务器之间建立一个基于 HTTP 的双向通信通道。SockJS 的主要作用是提供一种 WebSocket 的兼容性解决方案,使得不支持 WebSocket 的浏览器也可以使用 WebSocket。

当浏览器不支持 WebSocket 时,SockJS 会自动切换到使用轮询(polling)或长轮询(long-polling)的方式进行通信。

在使用 SockJS 时,首先需要在客户端和服务器端分别引入 sockjs-client.js 和 sockjs-server,然后在客户端通过 new SockJS(url) 的方式建立一个 SockJS 连接。

客户端和服务器端之间的通信是基于事件的,当客户端发送消息时,服务器端会触发一个 onmessage 事件,然后将消息发送回客户端。客户端在接收到消息后,会触发一个 onmessage 事件,然后处理收到的消息。

我们可以在前端代码中使用以下语句来实例化它:

复制代码
new SockJS('http://*****:8080/ws/user'); // 连接后端接口

什么是 Stomp

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消息代理(Broker)进行交互。

同样,我们怎么初始化使用它:

复制代码
var url = "ws://*****:8080/ws/user";
var client = Stomp.client(url);
复制代码
后端实现

当我们工程项目创建好之后,pom内直接引入:

复制代码
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
复制代码
首先,我们来完成配置类:
java 复制代码
@Configuration
// 注解开启使用STOMP协议来传输基于代理(message broker)的消息,这时控制器支持使用@MessageMapping,就像使用@RequestMapping一样
@EnableWebSocketMessageBroker
public class WebScoketConfig implements WebSocketMessageBrokerConfigurer {

    // 输入通道拦截器
    @Resource
    private InboundChannelInterceptor inboundChannelInterceptor;

    // 请求头认证信息使用
    @Resource
    private PrincipalHandshakeHandler principalHandshakeHandler;

    /**
     * <b>功能描述:</b>注册STOMP协议的节点(endpoint),并映射指定的url<br>
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //注册一个STOMP的endpoint,并指定使用SockJS协议
        registry.addEndpoint("/ws")
                .setHandshakeHandler(principalHandshakeHandler)
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }


    /**
     * <b>功能描述:</b>配置消息代理(Message Broker)<br>
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //点对点应配置一个/user消息代理,广播式应配置一个/topic消息代理,群发(mass),单独聊天(queue)
        //推送消息前缀
        registry.enableSimpleBroker("/topic");
        //点对点使用的订阅前缀(客户端订阅路径上会体现出来),不设置的话,默认也是/user/
        // 应用请求前缀
        // 推送用户前缀
        registry.setUserDestinationPrefix("/user");
    }
    
     /**
     * <b>功能描述:</b>输入通道配置<br>
     */
    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(this.inboundChannelInterceptor);// 设置拦截器
        registration.taskExecutor()    // 线程信息
                .corePoolSize(10)     // 核心线程池
                .maxPoolSize(20)      // 最多线程池数
                .keepAliveSeconds(60); // 超过核心线程数后,空闲线程超时60秒则杀死
    }

       /**
     * <b>功能描述:</b>消息传输参数配置<br>
     */
    @Override
    public void configureWebSocketTransport(WebSocketTransportRegistration registration) {
        registration.setSendTimeLimit(15 * 1000)    // 超时时间
                .setSendBufferSizeLimit(512 * 1024) // 缓存空间
                .setMessageSizeLimit(128 * 1024);   // 消息大小
    }
}

@EnableWebSocketMessageBroker表示启用Socket代理。

registerStompEndpoints 方法内 addEndpoint 表示接口前缀,当前端连接时,使用http://****:8080/ws方式接入。

setHandshakeHandler 添加认证请求头的认证类。

setAllowedOriginPatterns 跨域处理

withSockJS 是注册SockJS代理

拦截器实现

java 复制代码
@Slf4j
@Component
public class InboundChannelInterceptor implements ChannelInterceptor {

    // 后端实现
    @Resource
    private IWebSocketService webSocketServiceImpl;

    @SneakyThrows
    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
        if (accessor == null) {
            log.error("accessor is null");
            return message;
        }
        StompCommand stompCommand = accessor.getCommand();
        String simpSessionId = accessor.getHeader("simpSessionId").toString();
        String userId = accessor.getFirstNativeHeader("userId");
        if (StompCommand.CONNECT.equals(stompCommand)) {
            this.webSocketServiceImpl.connect(simpSessionId, userId);
        } else if (StompCommand.DISCONNECT.equals(stompCommand)) {
            this.webSocketServiceImpl.disconnect(simpSessionId);
        } else if (StompCommand.SEND.equals(stompCommand)) {
            this.webSocketServiceImpl.ping(simpSessionId, userId);
        }
        return message;
    }
}

认证信息类

java 复制代码
@Slf4j
@Component
public class PrincipalHandshakeHandler extends DefaultHandshakeHandler {

    /**
     * <b>功能描述:</b>请求头<br>
     */
    public static final String ACCESS_TOKEN = "token";


    @Override
    protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
        /**
         * 这边可以按需求,如何获取唯一的值,既unicode
         * 得到的值,会在监听处理连接的属性中,既WebSocketSession.getPrincipal().getName()
         * 也可以自己实现Principal()
         */
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest servletServerHttpRequest = (ServletServerHttpRequest) request;
            HttpServletRequest httpRequest = servletServerHttpRequest.getServletRequest();
            /**
             * 携带参数,你可以cookie,请求头,或者url携带,这边我采用url携带
             */
            String header = httpRequest.getHeader(ACCESS_TOKEN);
            log.info("token:{}", header);
            final String token = httpRequest.getParameter(ACCESS_TOKEN);
            if (StrUtil.isEmpty(token)) {
                return null;
            }
            return () -> token;
        }
        return null;
    }
}

​​​​​​​我们使用Dug模式启动服务看看是否完成,并看看它的Mappings列表。

我们本地输入链接查看,部署成功。

踩坑问题:

1.setAllowedOriginPatterns跨域请求只是一个小点,因为SockJs会封装一个 sock-node/info?t= ...的接口,我们还必须要全局的设置跨域。

另外网络其他博客,很多会说这个接口404的问题,然后注释掉socket-client什么node_modules js内的1600的行代码。

我是真不信,最后我把我后端代码跨域处理后,就可用了,后端这个接口是默认开放的。有些东西我们真的不要信。

java 复制代码
@Component
public class SimpleCORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With, token");
        HttpServletRequest request = (HttpServletRequest) req;
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

​​​​​​​

成功,下节我们来看看前端Vue的实现,再见!!!

相关推荐
ai小鬼头10 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github
掘金-我是哪吒12 小时前
分布式微服务系统架构第156集:JavaPlus技术文档平台日更-Java线程池使用指南
java·分布式·微服务·云原生·架构
国服第二切图仔12 小时前
文心开源大模型ERNIE-4.5-0.3B-Paddle私有化部署保姆级教程及技术架构探索
百度·架构·开源·文心大模型·paddle·gitcode
SelectDB13 小时前
SelectDB 在 AWS Graviton ARM 架构下相比 x86 实现 36% 性价比提升
大数据·架构·aws
weixin_4373982115 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
DavidSoCool15 小时前
RabbitMQ使用topic Exchange实现微服务分组订阅
分布式·微服务·rabbitmq
liulilittle15 小时前
SNIProxy 轻量级匿名CDN代理架构与实现
开发语言·网络·c++·网关·架构·cdn·通信
喷火龙8号15 小时前
深入理解MSC架构:现代前后端分离项目的最佳实践
后端·架构
Codebee16 小时前
“自举开发“范式:OneCode如何用低代码重构自身工具链
java·人工智能·架构
掘金-我是哪吒16 小时前
分布式微服务系统架构第158集:JavaPlus技术文档平台日更-JVM基础知识
jvm·分布式·微服务·架构·系统架构