spring-boot 2.3.x 整合websocket

柔情只为你懂 2021-09-25 08:32 292阅读 0赞

# spring-boot 2.3.x 整合websocket #

### 文章目录 ###

*  spring-boot 2.3.x 整合websocket
 *   *  1、构建一个websocket的项目
     *   *  1.1、定义yml配置文件，关于kafka的参数的详细定义，可以参考
         *  1.2、配置类
         *  1.3、定义ServerEndpoint点位，类似web里的controller
         *  1.4、主启动类
         *  1.5、测试使用的html文件，放在项目的resources的static下，或者public下
     *  2、测试

本地项目的基础环境

<table> 
 <thead> 
  <tr> 
   <th align="center">环境</th> 
   <th align="center">版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">jdk</td> 
   <td align="center">1.8.0_201</td> 
  </tr> 
  <tr> 
   <td align="center">maven</td> 
   <td align="center">3.6.0</td> 
  </tr> 
  <tr> 
   <td align="center">Spring-boot</td> 
   <td align="center">2.3.3.RELEASE</td> 
  </tr> 
 </tbody> 
</table>

## 1、构建一个websocket的项目 ##

目录结构如下：

![c21535050640c9773bc07658a3638310.png][]

主要是导入`spring-boot-starter-websocket`的包

<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.3.3.RELEASE</version>
            <relativePath /> 
        </parent>
        <artifactId>badger-spring-boot-websocket</artifactId>
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <java.version>1.8</java.version>
            <maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</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-test</artifactId>
                <scope>test</scope>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    </project>

### 1.1、定义yml配置文件，关于kafka的参数的详细定义，可以参考 ###

server:
      port: 8080
    spring:
      application:
        name: badger-spring-boot-websocket

### 1.2、配置类 ###

@Configuration
    public class WebSocketConfig { 
    
        /** * 注入一个ServerEndpointExporter, * 该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint */
        @Bean
        public ServerEndpointExporter serverEndpointExporter() { 
            return new ServerEndpointExporter();
        }
    
    }

### 1.3、定义ServerEndpoint点位，类似web里的controller ###

@Slf4j
    @ServerEndpoint(value = "/test")
    @Component
    public class WebSocketEndpoint { 
    
        /** 记录当前在线连接数 */
        private static AtomicInteger onlineCount = new AtomicInteger(0);
    
        /** * 连接建立成功调用的方法 */
        @OnOpen
        public void onOpen(Session session) { 
            onlineCount.incrementAndGet(); // 在线数加1
            log.info("有新连接加入：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
        }
    
        /** * 连接关闭调用的方法 */
        @OnClose
        public void onClose(Session session) { 
            onlineCount.decrementAndGet(); // 在线数减1
            log.info("有一连接关闭：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
        }
    
        /** * 收到客户端消息后调用的方法 * @param message 客户端发送过来的消息 * @throws IOException */
        @OnMessage
        public void onMessage(String message, Session session) throws IOException { 
            log.info("服务端收到客户端：{} ；消息：{}", session.getId(), message);
            session.getBasicRemote().sendText(message);// 回复消息
        }
    
        @OnError
        public void onError(Session session, Throwable error) { 
            log.error("发生错误");
            error.printStackTrace();
        }
    }

注意：

1、websocket是基于事件型的程序：

@OnOpen：连接操作；
    @OnClose：关闭操作
    @OnMessage：接收消息
    @OnError：异常

每个连接连上来之后，都是创建一个websocket的实例，所以websocket是多实例的；如果要在具体的事件中，使用`@Autowired`这样静态注入，是会拿不到具体的实例的；需要每次去容器中动态的拿实例，才可以；

把IOC容器，再容器初始化的时候赋值给一个static域的对象，然后就可以直接`类名.方法名`

@Component
    public class SpringContext implements ApplicationContextAware { 
    
        private static ApplicationContext applicationContext;
    
        @Override
        public void setApplicationContext(ApplicationContext applicationContext) throws BeansException { 
            SpringContext.applicationContext = applicationContext;
        }
    
        public static ApplicationContext getApplicationContext() { 
            return applicationContext;
        }
    }

### 1.4、主启动类 ###

@SpringBootApplication
    public class RocketmqApplicaltion { 
    
        public static void main(String[] args) throws Exception { 
            SpringApplication.run(RocketmqApplicaltion.class, args);
        }
    }

### 1.5、测试使用的html文件，放在项目的resources的static下，或者public下 ###

<!DOCTYPE HTML>
    <html>
    <head>
    <title>test WebSocket</title>
    </head>
    <body>
      <input id="text" type="text" />
      <button onclick="send()">发送</button>
      <button onclick="closeWebSocket()">关闭</button>
      <div id="message"></div>
    </body>
    <script src="/jquery.js"></script>
    <script type="text/javascript"> var websocket = new WebSocket("ws://localhost:8080/test"); //连接发生错误的回调方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event) { setMessageInnerHTML("浏览器事件：连接成功!"); } //接收到消息的回调方法 websocket.onmessage = function(event) { setMessageInnerHTML("服务端回复-->" + event.data); } //连接关闭的回调方法 websocket.onclose = function() { setMessageInnerHTML("浏览器事件：关闭连接！"); } //关闭连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = $('#text').val(); setMessageInnerHTML("浏览器发送：" + message); websocket.send(message); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { var htmlTxt = $('#message').html(); $('#message').html(htmlTxt + '<br/>' + innerHTML + '<br/>'); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function() { websocket.close(); } </script>
    </html>

## 2、测试 ##

启动项目，打开index.html静态页面

[http://localhost:8080/index.html][http_localhost_8080_index.html]

![1ef51427e291494c34a2ed11ebc9e22d.png][]

详细代码也可以参看[《码云》][Link 1]

[c21535050640c9773bc07658a3638310.png]: /images/20210923/2b444cb2938b4490b2f90ceb1dc1d302.png
[http_localhost_8080_index.html]: http://localhost:8080/index.html
[1ef51427e291494c34a2ed11ebc9e22d.png]: /images/20210923/e9118963684e47b68652cfe58dd31c9f.png
[Link 1]: https://gitee.com/liqi01/badger-spring-boot.git