【SpringBoot+WebSocket】实现简单的即时通讯

电玩女神 2024-03-25 22:14 94阅读 0赞

#### SpringBoot整合Websocket实现简单的即时通讯 ####

*  前言
 *  代码编写
 *   *  依赖
     *  配置类
     *  WebSocketServer
     *  Controller
 *  测试
 *   *  客户端向服务端发送消息
     *  测试服务端向客户端发送消息
 *  推荐

## 前言 ##

很多网站为了实现推送技术，所用的技术都是`轮询`。轮询是**在特定的时间间隔（如每10秒请求一次）**，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。

这种传统的模式带来很明显的缺点，即浏览器需要**不断的向服务器发出请求**，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会**浪费很多的带宽等资源**。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会**消耗服务器资源**。

在这种情况下，HTML5定义了`WebSocket协议`，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

## 代码编写 ##

### 依赖 ###

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

--------------------

### 配置类 ###

@Configuration
    public class WebSocketConfig {
        
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
        
            return new ServerEndpointExporter();
        }
    
    }

--------------------

### WebSocketServer ###

> 这里的`clientId`是为了区别客户端，适用于与指定客户端通讯的场景，可以使用业务中的用户id来传递

@Slf4j
    @Component
    @ServerEndpoint(value = "/api/ws/{clientId}")
    public class WebSocketServer {
        
    
        @PostConstruct
        public void init() {
        
            log.info("加载WebSocket");
        }
    
        private static final AtomicInteger ONLINE_COUNT = new AtomicInteger(0);
        /**
         * concurrent包的线程安全Map，用来存放每个客户端对应的Session对象
         */
        private static Map<String, Session> SESSION_MAP = new ConcurrentHashMap<>();
    
        private Session theSession;
    
        /**
         * @param session
         * @date 2023-03-13 17:41:02
         * @author Bummon
         * @description 连接成功回调方法
         */
        @OnOpen
        public void onOpen(@PathParam("clientId") String clientId, Session session) {
        
            if (!SESSION_MAP.containsKey(clientId)) {
        
                //连接数+1
                int count = ONLINE_COUNT.getAndIncrement();
            }
            SESSION_MAP.put(clientId, session);
            this.theSession = session;
            log.info("客户端[{}]建立连接，当前连接数：{}", clientId, ONLINE_COUNT.get());
            sendMessage(session, "连接成功");
        }
    
        /**
         * @date 2023-03-13 17:43:29
         * @author Bummon
         * @description 连接关闭回调方法
         */
        @OnClose
        public void onClose(@PathParam("clientId") String clientId) {
        
            SESSION_MAP.remove(clientId);
            if (!SESSION_MAP.containsKey(clientId)) {
        
                //连接数-1
                int count = ONLINE_COUNT.getAndDecrement();
            }
            log.info("连接[{}]关闭，当前连接数：{}", clientId, ONLINE_COUNT.get());
        }
    
        /**
         * @param message 客户端发来的消息
         * @param session
         * @date 2023-03-13 17:45:08
         * @author Bummon
         * @description 收到客户端的消息回调方法
         */
        @OnMessage
        public void onMessage(String message, Session session, @PathParam("clientId") String clientId) {
        
            log.info("来自客户端[{}]的消息：{}", clientId, message);
            sendMessage(session, "收到消息：" + message);
        }
    
        /**
         * @param session
         * @param throwable
         * @date 2023-03-13 17:47:40
         * @author Bummon
         * @description 抛异常回调方法
         */
        @OnError
        public void onError(Session session, Throwable throwable) {
        
            log.error("发生错误：{}", throwable.getMessage());
            throwable.printStackTrace();
        }
    
        /**
         * @param session
         * @param message 要发送的消息
         * @date 2023-03-13 17:51:01
         * @author Bummon
         * @description 发送消息
         */
        public static void sendMessage(Session session, String message) {
        
            try {
        
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
        
                log.error("发送消息出错：{}", e.getMessage());
            }
        }
    
        /**
         * @param message 要发送的消息
         * @date 2023-03-13 18:01:45
         * @author Bummon
         * @description 向指定客户端发送消息
         */
        public static void sendMessage(String clientId, String message) {
        
            Session session = null;
            for (String s : SESSION_MAP.keySet()) {
        
                if (s.equals(clientId)) {
        
                    session = SESSION_MAP.get(s);
                }
            }
            if (session != null) {
        
                sendMessage(session, message);
            } else {
        
                log.warn("未找到指定的clientId：{}", clientId);
            }
        }
    
        /**
         * @param message 要发送的消息
         * @date 2023-03-13 17:53:06
         * @author Bummon
         * @description 群发所有人
         */
        public static void broadCastInfo(String message) throws IOException {
        
            SESSION_MAP.keySet().forEach(a -> {
        
                Session session = SESSION_MAP.get(a);
                if (session.isOpen()) {
        
                    sendMessage(a, message);
                }
            });
        }

--------------------

### Controller ###

@RestController
    @RequiredArgsConstructor
    public class TestController {
        
        
        @RequestMapping("/push/{toClientId}")
        public ResponseEntity<String> pushMessage(@PathVariable String toClientId,String message) throws IOException {
        
            WebSocketServer.sendMessage(toClientId, message);
            return ResponseEntity.ok("SUCCESS");
        }
    }

--------------------

## 测试 ##

首先打开Postman，选择好Workspace后点击 New -> WebSocket Request

![websocket request][]  
然后填入项目地址以及WebScoketServer中设置的映射

> 规范：`ws://ip:port/WebSocket映射地址`  
> EX： ws://localhost:8080/api/ws/\{clientId\}

![websocket url][]

然后点击 Connect 连接WebSocket，出现下图的信息表示已经连接成功了，如果连接错误可以检查一下输入的url是否符合规范，以及输入的url和项目中的映射地址是否一致

![connect success][]

### 客户端向服务端发送消息 ###

可以看到下图发送成功了，服务端日志也打印了该信息

![client to server][]  
![idea log][]

--------------------

### 测试服务端向客户端发送消息 ###

在Postman中新建request调用刚才在controller中写好的接口

![server to client][]

可以看到返回成功了，我们去客户端连接看一下，下图可以看到我们收到了来自服务端的消息  
![receive msg success][]

客户端向客户端发送消息也可以调用该接口实现客户端通讯，自此WebSocket整合完毕

--------------------

## 推荐 ##

关注博客和公众号获取最新文章

[Bummon’s Blog][Bummon_s Blog] ｜ [Bummon’s Home][Bummon_s Home] ｜ [公众号][Link 1]

[websocket request]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/207c4b9acee84a539241bf19fadf5cc9.png
[websocket url]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/855a1912192d49d9ae52e43442bb8825.png
[connect success]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cf67da1ed20548f3984da87bb088dd6f.png
[client to server]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ff052f93ee0d4361a6eca89b7f673c1a.png
[idea log]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ae1096cd10d3478f82bb501aae87deec.png
[server to client]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/abab311ebaf4442f938fbb1828955ef2.png
[receive msg success]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6a2459e242bd40f1a6ad16c969cd9b6c.png
[Bummon_s Blog]: https://blog.bummon.com/
[Bummon_s Home]: https://www.bummon.com/
[Link 1]: https://www.bummon.com/wechat/