【Java】Spring Boot整合WebSocket

Bertha 。 2024-03-26 17:56 67阅读 0赞

## 【Java】Spring Boot整合WebSocket ##

### WebSocket简介 ###

WebSocket是一种协议，用于实现客户端和服务器之间的双向通信。它可以在单个TCP连接上提供全双工通信，避免了HTTP协议中的请求-响应模式，从而实现更高效的数据交换。WebSocket协议最初由HTML5规范提出，现在已成为一种通用的网络协议，被广泛用于Web应用程序中。

WebSocket协议的主要特点包括：

1.  建立在TCP上：WebSocket协议使用单个TCP连接进行全双工通信，避免了HTTP协议中的多次连接建立和断开操作，从而减少了网络延迟和带宽消耗。
2.  双向通信：WebSocket协议支持双向通信，即客户端和服务器可以同时向对方发送和接收数据，实现更加灵活和高效的数据交换。
3.  实时性：WebSocket协议可以实现实时通信，支持消息推送、实时聊天等功能，为Web应用程序带来更好的用户体验。
4.  协议标准化：WebSocket协议已经被标准化，并且被广泛支持，几乎所有的现代浏览器都支持WebSocket协议。

WebSocket协议在Web应用程序中广泛使用，例如实现实时通信、在线游戏、即时消息等功能。开发者可以使用JavaScript编写客户端代码，使用Java、Node.js等语言编写服务器端代码，实现WebSocket协议的双向通信。

### Pom ###

本次Spring Boot版本 `2.7.8`，WebSocket 版本 `5.3.25`.

**parent**

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.8</version>
        <relativePath/> 
    </parent>

**dependency**

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    ...

### 配置文件 ###

WebSocketConfig

package cn.com.codingce.demo.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.config.annotation.EnableWebSocket;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;
    
    @Configuration
    // 开启 WebSocket 支持
    @EnableWebSocket
    public class WebSocketConfig {
        
    
        /**
         * 必须要有的
         *
         * @return serverEndpointExporter
         */
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
        
            return new ServerEndpointExporter();
        }
    
        /**
         * WebSocket 配置信息
         *
         * @return servletServerContainerFactoryBean
         */
        @Bean
        public ServletServerContainerFactoryBean createWebSocketContainer() {
        
            ServletServerContainerFactoryBean bean = new ServletServerContainerFactoryBean();
            
            // 文本缓冲区大小
            bean.setMaxTextMessageBufferSize(8192);
            // 字节缓冲区大小
            bean.setMaxBinaryMessageBufferSize(8192);
    
            return bean;
        }
    
    }

### 使用 ###

WebSocket 的注解：

<table> 
 <thead> 
  <tr> 
   <th>注解</th> 
   <th>作用</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@ServerEndpoint</td> 
   <td>用于声明WebSocket响应类，有点像@RequestMapping</td> 
   <td>@ServerEndpoint(“/websocket”)</td> 
  </tr> 
  <tr> 
   <td>@OnOpen</td> 
   <td>WebSocket连接时触发</td> 
   <td>参数有：Session session, EndpointConfig config</td> 
  </tr> 
  <tr> 
   <td>@OnMessage</td> 
   <td>有消息时触发</td> 
   <td>参数很多，一会再说</td> 
  </tr> 
  <tr> 
   <td>@OnClose</td> 
   <td>连接关闭时触发</td> 
   <td>参数有：Session session, CloseReason closeReason</td> 
  </tr> 
  <tr> 
   <td>@OnError</td> 
   <td>有异常时触发</td> 
   <td>参数有：Session session, Throwable throwable</td> 
  </tr> 
 </tbody> 
</table>

### Controller ###

**BaseWebSocketController**

package cn.com.codingce.demo.conrtoller;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Controller;
    
    import javax.websocket.CloseReason;
    import javax.websocket.EndpointConfig;
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.RemoteEndpoint;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.Map;
    import java.util.concurrent.ConcurrentHashMap;
    
    /**
     * @author ma
     */
    @Controller
    @ServerEndpoint("/websocket")
    public class BaseWebSocketController {
        
    
        Logger logger = LoggerFactory.getLogger(this.getClass());
    
        // ConcurrentHashMap, 保证线程安全, static全局共享 session
    
        // 这里之所以static，是因为这个类不是单例的！！
        // 它虽然有@Controller注解，但是不适用Ioc容器中拿对象，每一次请求过来都是一个新的对象
    
        /**
         * 存放 session
         */
        private final static Map<String, Session> SESSION_MAP = new ConcurrentHashMap<>();
    
        /**
         * OnOpen 在连接创建(用户进入聊天室)时触发
         *
         * @param session session
         * @param config  config
         */
        @OnOpen
        public void openSession(Session session, EndpointConfig config) {
        
            // 将session存起来, 用于服务器向浏览器发送消息
            SESSION_MAP.put(session.getId(), session);
            String res = "OnOpen [" + session.getId() + "]进入房间";
            sendAll(res);
            logger.info(res);
        }
    
    
        /**
         * 响应字符串
         *
         * @param session session
         * @param message message
         */
        @OnMessage
        public void onMessage(Session session, String message) {
        
            String res = "OnMessage [" + session.getId() + "]" + message;
            sendAll(res);
            logger.info(res);
        }
    
        /**
         * 响应字节流
         *
         * @param session session
         * @param message message
         */
        @OnMessage
        public void onMessage(Session session, byte[] message) {
        
            // 这个以后再说
        }
    
        /**
         * OnClose 在连接断开(用户离开聊天室)时触发
         *
         * @param session     session
         * @param closeReason closeReason
         */
        @OnClose
        public void closeSession(Session session, CloseReason closeReason) {
        
            //记得移除相对应的session
            SESSION_MAP.remove(session.getId());
    
            String res = "OnClose [" + session.getId() + "]离开了房间";
            sendAll(res);
            logger.info(res);
        }
    
        @OnError
        public void sessionError(Session session, Throwable throwable) {
        
            // 通常有异常会关闭 session
            try {
        
                session.close();
            } catch (IOException e) {
        
                e.printStackTrace();
            }
        }
    
        /**
         * sendAll
         *
         * @param message message
         */
        private void sendAll(String message) {
        
            for (Session s : SESSION_MAP.values()) {
        
                // 获得session发送消息的对象
                // Basic是同步, 会阻塞
                // Async是异步, 这个会有多线程并发导致异常, 发送消息太快也会有并发异常, 需要有 消息队列 来辅助使用
                final RemoteEndpoint.Basic remote = s.getBasicRemote();
    
                try {
        
                    // 发送消息
                    remote.sendText(message);
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            }
        }
    
    }

### 前端 ###

**Conrtoller**

package cn.com.codingce.demo.conrtoller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class IndexController {
        
    
        @RequestMapping("/index")
        public String indexDefault(Model model) {
        
            return "index";
        }
    
    }

**web**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>websocket-demo</title>
    
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container py-3">
    
        <div class="row">
    
            <div class="col-6">
                <div>
                    <label for="messageArea">聊天信息:</label>
                </div>
                <div>
                    <textarea id="messageArea" readonly class="w-100" style="height: 75vh;"></textarea>
                </div>
            </div>
    
            <div class="col">
    
                <div class="my-1">
                    <label for="messageArea">用 户 名:</label>
                </div>
    
                <div class="my-1">
                    <input type="text" id="username" autocomplete="off">
                </div>
    
                <div class="my-1">
                    <button class="btn-info" id="joinRoomBtn">进入聊天室</button>
                    <button class="btn-warning" id="leaveRoomBtn">离开聊天室</button>
                </div>
    
                <hr/>
    
                <div class="my-1">
                    <label for="sendMessage">输入消息:</label>
                </div>
                <div>
                    <textarea id="sendMessage" rows="5" class="w-100" style="max-height: 50vh"></textarea>
                </div>
    
                <div class="my-1">
                    <button class="btn-primary" id="sendBtn">发送消息</button>
                </div>
    
            </div>
    
        </div>
    
    </div>
    ]
    
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    
    <script>
        let webSocket;
        // ip和端口号用自己项目的
        // {websocket}: 其实是刚刚那个@ServerEndpoint("/websocket")中定义的
        let url = 'ws://127.0.0.1:8091/websocket';
    
        $('#username').keyup(function (e) {
          
            let keycode = e.which;
            if (keycode === 13) {
          
                $('#joinRoomBtn').click();
            }
        });
    
        // 进入聊天室
        $('#joinRoomBtn').click(function () {
          
            let username = $('#username').val();
            webSocket = new WebSocket(url);
            webSocket.onopen = function () {
          
                console.log('webSocket连接创建。。。');
            }
            webSocket.onclose = function () {
          
                console.log('webSocket已断开。。。');
                $('#messageArea').append('websocket已断开\n');
            }
            webSocket.onmessage = function (event) {
          
                $('#messageArea').append(event.data + '\n');
            }
            webSocket.onerror = function (event) {
          
                console.log(event)
                console.log('webSocket连接异常。。。');
            }
        });
    
        // 退出聊天室
        $('#leaveRoomBtn').click(function () {
          
            if (webSocket) {
          
                // 关闭连接
                webSocket.close();
            }
        });
    
        // 发送消息
        $('#sendBtn').click(function () {
          
            var msg = $('#sendMessage').val();
            if (msg.trim().length === 0) {
          
                alert('请输入内容');
                return;
            }
            webSocket.send($('#sendMessage').val());
    
            $('#sendMessage').val('');
        });
    
    </script>
    
    </body>
    </html>

### 测试 ###

**页面**

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

**用户一**：

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

**用户二**：

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

**用户一收到的信息**：

![c70d45d10a6746798c66890821385344.png][]

[33ef1f954c6b4b34bf9797cd3385f6b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aa84f39a4c3a4d93ade352adfabd8310.png
[fbefa442475947faa03d09ec590f27af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de7f9e04e7fa4d8188da302819261613.png
[8f180bd7690f44578b0f8fd3afe947af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/40b8a854828842a9a24fa994ace91fd1.png
[c70d45d10a6746798c66890821385344.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e00d63518a234ee881fd19816e998ea1.png