Spring Boot WebSocket介绍(一)

浅浅的花香味﹌ 2022-04-04 08:52 187阅读 0赞

最近在做一些WebSocket相关的内容，简要看了一些相关的知识，为避免自己忘记和遗漏一些内容，简单整理一下相关知识。本文作为WebSocket介绍的第一篇，比较简单，主要介绍如何在Spring Boot框架中使用自带的WebScoket功能。

完整的代码在[这里][Link 1]，欢迎加星，fork。本文代码是在官方示例代码基础上稍加修改而成的。本人是后端，前端页面基本上时照猫画虎修改修改而成，仅供测试演示使用。

# 添加依赖 #

pom.xml文件在https://github.com/yqbjtu/websocketTutorials/blob/master/WebSocketBasic/pom.xml。  
简要介绍，本示例程序使用Spring Boot 2.0.1.

核心依赖如下

<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>

附属依赖如下，本示例程序同时提供两个简单的前端页面，供演示使用，这两个前端页面用到如下内容，如果你是前后端分离的，有自己的前端完成socket连接、订阅、发送、接收。 就不需要引入如下这些包，直接使用你的前端就行。

<dependency>
                <groupId>org.webjars</groupId>
                <artifactId>webjars-locator-core</artifactId>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>sockjs-client</artifactId>
                <version>1.0.2</version>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>stomp-websocket</artifactId>
                <version>2.3.3</version>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>bootstrap</artifactId>
                <version>3.3.7</version>
            </dependency>
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>3.1.0</version>
            </dependency>

# 主要代码 #

提供自己的WebSocketMessageBrokerConfigurer实现类

package com.yq.config;
    
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.messaging.simp.config.MessageBrokerRegistry;
    import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
    import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
    import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
    
    @Configuration
    @EnableWebSocketMessageBroker
    @Slf4j
    public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { 
    
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) { 
            registry.addEndpoint("/myEndPoint")         //开启/myEndPoint端点
                    .setAllowedOrigins("*")         //允许跨域访问
                    .withSockJS();                  //使用sockJS
        }
    
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) { 
            registry.enableSimpleBroker("/myPrefixes");  //订阅topic的前缀，比订阅topic必须是这种格式// /myPrefixes/topic1/xxx
        }
    }

简要说明：  
a, endpoint 部分，如你的endPoint是xyz， 那么你连接的url格式就是var sockjs\_url = ‘http://\{ip\}:\{port\}/xyz’;  
b，跨域问题，如果没有配置好允许来自哪些前端的连接，当你连接websocket就会报跨域问题，最典型的的，如果你的前端域名是http://a.b.c:99, 那你允许的origins就必须包含来自a.b.c的域名且端口为99的连接  
c，topic前缀，设置好topic的前缀后，你订阅topic的格式/myPrefixes/\{youTopciPart01\}/\{youTopciPart012， 或者/myPrefixes/\{yourTopic\}

# 效果截图 #

index.html订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic，也会向topic发送内容（内容为json格式，只有一个字段"myfield1"）。

myindex.html也订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic，也会向该topic发送内容（内容为json格式，格式为\{“myfield1”:“myindex.html中的输入1”,“message”:“myindex.html中的输入2”\}）。

因此当myindex.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时，index.html也会收到消息并显示，例如，会显示\{“myfield1”:“myindex.html中的输入1”,“message”:“myindex.html中的输入2”\}中的"myindex.html中的输入1" 部分

因此当index.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时，myindex.html也会收到消息并显示，例如\{“myfield1”:“index.html中的输入”\}.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1c3NsZQ_size_16_color_FFFFFF_t_70]

# 其他 #

关于service和controller部分，主要是SimpMessagingTemplate以及@MessageMapping和@SendTo注解，为服务间调用提供接口，后面有空再介绍。

[Link 1]: https://github.com/yqbjtu/websocketTutorials/tree/master/WebSocketBasic
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1c3NsZQ_size_16_color_FFFFFF_t_70]: /images/20220404/297045a697a647988ed88d877cd729bc.png