SpringBoot整合WebSocket（看完即入门）

缺乏、安全感 2024-03-26 16:07 63阅读 0赞

#### WebSocket ####

*   *  1、什么是webSocket？
     *  2、webSocket可以用来做什么?
     *  3、webSocket协议
     *  4、服务端
     *   *   *  WebSocket配置类
             *  WebSocket操作类
     *  5、webSocket网页客户端工具
     *   *  通讯测试

### 1、什么是webSocket？ ###

WebSocket是一种在单个`TCP连接`上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，`允许服务端主动向客户端推送数据`。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以`创建持久性的连接，并进行双向数据传输。`  
![在这里插入图片描述][fe3ce7d49a0440c99313801475b68339.png]

### 2、webSocket可以用来做什么? ###

利用双向数据传输的特点可以用来完成很多功能，不需要前端`轮询`，浪费资源。例如：

1、通告功能  
2、聊天功能 （如下是逻辑图）  
![在这里插入图片描述][3c766fdbdadb49109e523d7374c7e40c.png]  
3、实时更新数据功能  
4、弹幕

### 3、webSocket协议 ###

本协议有两部分：握手和数据传输。  
握手是基于http协议的。

GET ws://localhost/chat HTTP/1.1
    Host: localhost
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==
    Sec-WebSocket-Protocol: chat,superchat
    Sec-WebSocket-Version: 13

来自服务器的握手看起来像如下形式：

HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Protocol: chat

![在这里插入图片描述][1da0f0faf9304c93901080f93d4ed936.png_pic_center]

### 4、服务端 ###

maven依赖

<dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-websocket</artifactId>
      </dependency>
       <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-core</artifactId>
                <version>5.7.22</version>
            </dependency>

##### WebSocket配置类 #####

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    /**
     * @author Hao
     * @date 2023-03-01 16:18
     * @description:
     * @version:
     */
    @Configuration
    public class WebSocketConfig {
        
        /**
         * 	注入ServerEndpointExporter，
         * 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
         */
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
        
            return new ServerEndpointExporter();
        }
        
    }

##### WebSocket操作类 #####

通过该类WebSocket可以进行群推送以及单点推送

import org.apache.logging.log4j.LogManager;
    import org.apache.logging.log4j.Logger;
    import org.springframework.stereotype.Component;
    import cn.hutool.core.util.StrUtil;
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.ConcurrentHashMap;
    
    /**
     * @author Hao
     * @date 2023-03-01 16:18
     * @description:
     * @version:
     */
    @ServerEndpoint(value = "/websocket/{userId}")
    @Component
    public class WebSocket {
        
        private final static Logger logger = LogManager.getLogger(WebSocket.class);
    
        /**
         * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的
         */
    
        private static int onlineCount = 0;
    
        /**
         * concurrent包的线程安全Map，用来存放每个客户端对应的MyWebSocket对象
         */
        private static ConcurrentHashMap<String, WebSocket> webSocketMap = new ConcurrentHashMap<>();
    
        /**
         * 与某个客户端的连接会话，需要通过它来给客户端发送数据
         */
    
        private Session session;
        private String userId;
    
    
        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(Session session, @PathParam("userId") String userId) {
        
            this.session = session;
            this.userId = userId;
            //加入map
            webSocketMap.put(userId, this);
            addOnlineCount();           //在线数加1
            logger.info("用户{}连接成功,当前在线人数为{}", userId, getOnlineCount());
            try {
        
                sendMessage(String.valueOf(this.session.getQueryString()));
            } catch (IOException e) {
        
                logger.error("IO异常");
            }
        }
    
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
        
            //从map中删除
            webSocketMap.remove(userId);
            subOnlineCount();           //在线数减1
            logger.info("用户{}关闭连接！当前在线人数为{}", userId, getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session) {
        
            logger.info("来自客户端用户：{} 消息:{}",userId, message);
    
            //群发消息
            /*for (String item : webSocketMap.keySet()) {
                try {
                    webSocketMap.get(item).sendMessage(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }*/
        }
    
        /**
         * 发生错误时调用
         *
         * @OnError
         */
        @OnError
        public void onError(Session session, Throwable error) {
        
            logger.error("用户错误:" + this.userId + ",原因:" + error.getMessage());
            error.printStackTrace();
        }
    
        /**
         * 向客户端发送消息
         */
        public void sendMessage(String message) throws IOException {
        
            this.session.getBasicRemote().sendText(message);
            //this.session.getAsyncRemote().sendText(message);
        }
    
        /**
         * 通过userId向客户端发送消息
         */
        public void sendMessageByUserId(String userId, String message) throws IOException {
        
            logger.info("服务端发送消息到{},消息：{}",userId,message);
         if(StrUtil.isNotBlank(userId)&&webSocketMap.containsKey(userId)){
        
             webSocketMap.get(userId).sendMessage(message);
         }else{
        
             logger.error("用户{}不在线",userId);
         }
    
        }
    
        /**
         * 群发自定义消息
         */
        public static void sendInfo(String message) throws IOException {
        
            for (String item : webSocketMap.keySet()) {
        
                try {
        
                    webSocketMap.get(item).sendMessage(message);
                } catch (IOException e) {
        
                    continue;
                }
            }
        }
    
        public static synchronized int getOnlineCount() {
        
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
        
            WebSocket.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
        
            WebSocket.onlineCount--;
        }
    
    }

测试controller

import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.io.IOException;
    
    /**
     * @author Hao
     * @date 2023-03-01 16:18
     * @description:
     * @version:
     */
     
    @RestController
    @RequestMapping("/webSocket")
    public class WebSocketController {
        
        @Autowired
        private WebSocket webSocket;
        @PostMapping("/sentMessage")
        public void sentMessage(String userId,String message){
        
            try {
        
                webSocket.sendMessageByUserId(userId,message);
            } catch (IOException e) {
        
                e.printStackTrace();
            }
    
        }
    
    }

### 5、webSocket网页客户端工具 ###

http://websocket.jsonin.com/

![在这里插入图片描述][ba6b11051abe4d4095611219d221e0e4.png]  
复制三个tab

WebSocket地址分别输入后连接

ws://127.0.0.1:8051/websocket/1
    ws://127.0.0.1:8051/websocket/2
    ws://127.0.0.1:8051/websocket/3

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

#### 通讯测试 ####

1.往客户端发消息

127.0.0.1:8092/webSocket/sentMessage?userId=1&message=请进入视频会议
    127.0.0.1:8092/webSocket/sentMessage?userId=2&message=请进入视频会议
    127.0.0.1:8092/webSocket/sentMessage?userId=3&message=请进入视频会议

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

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

2.客户端收到消息回复“好的”  
![在这里插入图片描述][8eb86c812be34b368914f066af8a385c.png]

##### 最后送所有正在努力的大家一句话： #####

## `你不一定逆风翻盘，但一定要向阳而生。` ##

##### 期待下次发布好的文章： #####

## `山水相逢，我们江湖见。` ##

[fe3ce7d49a0440c99313801475b68339.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bff31a8924bb4875ae8c33961d7be60b.png
[3c766fdbdadb49109e523d7374c7e40c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2262f32a092342c999468e970b655fad.png
[1da0f0faf9304c93901080f93d4ed936.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/861ac805f5ff4a2988f7ea041682a068.png
[ba6b11051abe4d4095611219d221e0e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/560dc907d3724338a2d75a8d2a8e7f90.png
[9bd90e6dbfbd4f598c29d12a8bf87950.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3547e7184d814048a8c4a93916bcffa9.png
[ac0fa5bc829e468c97dddcc6066ec200.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c6b7dc7d7a514a05bba1db3ac0509223.png
[562336b6c4b04763a981877342caa36a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/59457ad5e350482c982e2bc9a3cba1c1.png
[8eb86c812be34b368914f066af8a385c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aa012268ac55439d9b17a669991f7c48.png