SpringBoot + mybatis-plus整合webscoket

超、凢脫俗 2022-12-10 07:17 104阅读 0赞

> webscoket原理：[请参考WebSocket的实现原理 ][WebSocket_]  
> webscoket一开始我只是简单会用，但是我觉得掌握webscoket原理是很有必要，他会加深我们对计网的理解。

#### 一、永恒第一步：导入pom依赖 ####

<dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <dependency>
       <groupId>org.webjars</groupId>
       <artifactId>stomp-websocket</artifactId>
       <version>2.3.3</version>
    </dependency>

#### 二、添加配置文件 ####

对应部分的说明都写在了注释里面

package com.easy.config;
    
    import com.mbyte.easy.webscoket.consts.GlobalConsts;
    import org.springframework.cache.annotation.EnableCaching;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.messaging.simp.config.MessageBrokerRegistry;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
    import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
    import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
    
    /** * @Author zte * @Description Webscoket配置类 * @Date 21:33 2019/5/6 **/
    @Configuration
    @EnableWebSocketMessageBroker
    @EnableCaching
    @CrossOrigin("*")
    public class WebSocketStompConfig implements WebSocketMessageBrokerConfigurer { 
        @Override
        public void configureMessageBroker(MessageBrokerRegistry config) { 
            /** * 配置消息代理 * 启动简单Broker，消息的发送的地址符合配置的前缀来的消息才发送到这个broker */
            config.enableSimpleBroker(GlobalConsts.TOPICPATH, GlobalConsts.P2PPUSHBASEPATH);
            config.setUserDestinationPrefix(GlobalConsts.P2PPUSHBASEPATH);
            config.setApplicationDestinationPrefixes(GlobalConsts.APP_PREFIX);
        }
    
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) { 
            /** * 注册 Stomp的端点 * addEndpoint：添加STOMP协议的端点。这个HTTP URL是供WebSocket或SockJS客户端访问的地址 * setAllowedOrigins("*") 允许跨域 * withSockJS：指定端点使用SockJS协议 */
            registry.addEndpoint(GlobalConsts.ENDPOINT)
                    .setAllowedOrigins("*")
                    .withSockJS();
        }
    }

如果需要跨域，则需要添加跨域设置

package com.easy.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.config.annotation.EnableWebSocket;
    import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
    import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
    
    import javax.annotation.Resource;
    
    /** * @className: WebSocketConfig * @description: * @author: zte * @create: 2020-06-09 16:17 **/
    @Configuration
    @EnableWebSocket
    public class WebSocketConfig implements WebSocketConfigurer { 
    
    
        @Resource
        private MyHandShakeInterceptor handshake;
    
        @Resource
        private MyHandler handler;
    
        /** * 实现 WebSocketConfigurer 接口，重写 registerWebSocketHandlers 方法，这是一个核心实现方法，配置 websocket 入口，允许访问的域、注册 Handler、SockJs 支持和拦截器。 * <p> * registry.addHandler()注册和路由的功能，当客户端发起 websocket 连接，把 /path 交给对应的 handler 处理，而不实现具体的业务逻辑，可以理解为收集和任务分发中心。 * <p> * addInterceptors，顾名思义就是为 handler 添加拦截器，可以在调用 handler 前后加入我们自己的逻辑代码。 * <p> * setAllowedOrigins(String[] domains),允许指定的域名或 IP (含端口号)建立长连接，如果只允许自家域名访问，这里轻松设置。如果不限时使用”*”号，如果指定了域名，则必须要以 http 或 https 开头。 * */
        @Override
        public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 
            //部分 支持websocket 的访问链接,允许跨域
            registry.addHandler(handler, "/websocket").addInterceptors(handshake).setAllowedOrigins("*");
            //部分 不支持websocket的访问链接,允许跨域
    // registry.addHandler(handler, "/sockjs/echo").addInterceptors(handshake).setAllowedOrigins("*").withSockJS();
        }
    }

#### 三、WebScoket常量配置 ####

package com.easy.webscoket.consts;
    
    /** * @program: easy * @description: WebScoket常量配置 * @author: zte * @create: 2019-05-06 10:11 **/
    public class GlobalConsts { 
        public static final String TOPIC = "/topic/greetings";
    
        public static final String ENDPOINT = "/gs-guide-websocket";
    
        public static final String APP_PREFIX = "/app";
    
        public static final String HELLO_MAPPING = "/hello";
    
        //点对点消息推送地址前缀
        public static final String P2PPUSHBASEPATH = "/user";
        //点对点消息推送地址后缀,最后的地址为/user/用户识别码/msg
        public static final String P2PPUSHPATH = "/msg";
    
    
        /** * @Description 接收消息地址 **/
        public static final String RECEIVE_MAPPING = "/receive";
    
    
    
        /** * @Description 订阅消息推送地址前缀 **/
        public static final String TOPICPATH = "/group";
    
        /** * 统一前缀 */
        public static final String URL_PREFIX = "/rest/";
    
    }

#### 四、controller层代码 ####

这里包含了点对点聊天以及群聊的配置

package com.easy.webscoket.controller;
    
    import com.alibaba.fastjson.JSON;
    import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    import com.mbyte.easy.common.web.AjaxResult;
    import com.mbyte.easy.detailed_info_log.entity.DetailedInfoLog;
    import com.mbyte.easy.talk_socket.entity.Message;
    import com.mbyte.easy.talk_socket.service.IMessageService;
    import com.mbyte.easy.webscoket.consts.GlobalConsts;
    import com.mbyte.easy.webscoket.vo.ClientMessage;
    import com.mbyte.easy.webscoket.vo.ServerMessage;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.messaging.handler.annotation.MessageMapping;
    import org.springframework.messaging.handler.annotation.SendTo;
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.util.HtmlUtils;
    
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import java.awt.event.MouseWheelEvent;
    import java.util.List;
    import java.util.Map;
    import java.util.concurrent.ConcurrentHashMap;
    
    /** * @program: easy * @description: webscoket测试controller * @author: zte * @create: 2019-05-06 10:26 **/
    @Controller
    @RequestMapping("/audience/index")
    public class GreetingController { 
    
        @Autowired
        private SimpMessagingTemplate template;
    
        @Autowired
        private IMessageService messageService;
    
        /** * 在线用户的Map集合，key：用户名，value：Session对象 */
        private static Map<String, Session> sessionMap = new ConcurrentHashMap<>();
    
        /** * 连接建立成功调用的方法 */
        @OnOpen
        public void onOpen(Session session, @PathParam("username") String username) { 
            //在webSocketMap新增上线用户
            sessionMap.put(username, session);
    
            System.out.println(username);
    
        }
    
    
        @RequestMapping
        public String index(Model model) { 
    
            return "webscoket/greeting";
        }
    
        @RequestMapping("/index2")
        public String index2(Model model) { 
    
            return "webscoket/greeting2";
        }
    
        @MessageMapping(GlobalConsts.HELLO_MAPPING)
        @SendTo(GlobalConsts.TOPIC)
        public ServerMessage greeting(ClientMessage message) throws Exception { 
            // 模拟延时，以便测试客户端是否在异步工作
    // Thread.sleep(1000);
            template.convertAndSendToUser(message.getId() + "", GlobalConsts.P2PPUSHPATH, JSON.toJSON(new ServerMessage("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!")));
            return new ServerMessage("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
        }
    
        /** * 群聊 * * @param message WebMessage */
        @MessageMapping("/group")
        public void group(Message message) { 
            messageService.save(message);
            template.convertAndSend("/group/"  + message.getGroupPrefix(), JSON.toJSON(message));
        }
    
        @GetMapping("/groupGetMessage")
        public AjaxResult groupGetMessage(String groupPrefix,Integer groupFlag) { 
            List<Message> messages = messageService.list(new LambdaQueryWrapper<Message>().eq(Message::getGroupPrefix,groupPrefix).eq(Message::getGroupFlag,groupFlag).orderByDesc(Message::getSendTime));
            return AjaxResult.success(messages);
        }
    
    }

获取群聊消息（历史消息）的接口

package com.mbyte.easy.rest.message;
    
    import com.alibaba.fastjson.JSON;
    import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.mbyte.easy.talk_socket.entity.Message;
    import com.mbyte.easy.talk_socket.service.IMessageService;
    import com.mbyte.easy.common.controller.BaseController;
    import com.mbyte.easy.common.web.AjaxResult;
    import com.mbyte.easy.util.PageInfo;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiImplicitParam;
    import io.swagger.annotations.ApiImplicitParams;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.messaging.handler.annotation.MessageMapping;
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.*;
    import java.util.List;
    import java.time.LocalDate;
    import java.time.LocalDateTime;
    import java.util.HashMap;
    import java.util.Map;
    
    /** * <p> * 前端控制器 * </p> * @author zte * @since 2019-03-11 */
    @Api(tags = "讨论聊天记录接口")
    @RestController
    @RequestMapping("rest/message")
    public class RestMessageController extends BaseController  { 
    
        @Autowired
        private IMessageService messageService;
    
        /** * 存储聊天数据页面 * @return */
        @ApiOperation(value = "聊天记录添加接口")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "userId", value = "发送人", required = true),
                @ApiImplicitParam(name = "content", value = "聊天内容", required = true),
                @ApiImplicitParam(name = "groupPrefix", value = "房间号", required = true),
                @ApiImplicitParam(name = "msgType", value = "消息类型", required = true),
                @ApiImplicitParam(name = "groupFlag", value = "房间类型", required = true),
        })
        @GetMapping("addSocketBefore")
        public AjaxResult addSocketBefore(String userId,String content,String groupPrefix,Integer msgType,Integer groupFlag){ 
            Message message = new Message();
            message.setFromUser(userId);
            message.setContent(content);
            message.setGroupPrefix(groupPrefix);
            message.setGroupFlag(groupFlag);
            message.setMsgType(msgType);
            return toAjax(messageService.save(message));
        }
        @ApiOperation(value = "聊天历史记录获取接口")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "groupPrefix", value = "房间号", required = true),
                @ApiImplicitParam(name = "groupFlag", value = "房间类型", required = true),
        })
        @GetMapping("/groupGetMessage")
        public AjaxResult groupGetMessage(String groupPrefix,Integer groupFlag) { 
            List<Message> messages = messageService.list(new LambdaQueryWrapper<Message>().eq(Message::getGroupPrefix,groupPrefix).eq(Message::getGroupFlag,groupFlag).orderByAsc(Message::getSendTime));
            return AjaxResult.success(messages);
        }

#### 五、定义实体类 ####

package com.easy.talk_socket.entity;
    
    import com.baomidou.mybatisplus.annotation.TableName;
    import com.mbyte.easy.common.entity.BaseEntity;
    import java.time.LocalDateTime;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    
    /** * <p> * * </p> * * @author zte * @since 2020-08-28 */
    @Data
    @EqualsAndHashCode(callSuper = true)
    @Accessors(chain = true)
    @TableName("t_message")
    public class Message extends BaseEntity { 
    
        private static final long serialVersionUID = 1L;
    
        /** * 发送人 */
        private String fromUser;
    
        /** * 接收人 */
        private String toUser;
    
        /** * 消息内容 */
        private String content;
    
        /** * 消息类型:1 文字 ；2语音； 3图片； 4 视频 5 礼物 6邀请入队 默认为1 */
        private Integer msgType;
    
        /** * 是否已读， 0：未读， 1：已读 */
        private Integer readFlag;
    
        /** * 正常为 0 删除为1 */
        private Integer deleteFlag;
    
        /** * 发送时间 */
        private LocalDateTime sendTime;
    
        /** * 语音时长 */
        private Integer voiceTime;
    
        /** * 发送人昵称 */
        private String fromNick;
    
        /** * 接受人昵称 */
        private String toNick;
    
        /** * 组名称 如：群聊编号， 直播编号， 话题编号 */
        private String groupPrefix;
    
        /** * 组标记,0:是私聊 1：是多人聊天; 3是临时会话；4：是客服聊天 */
        private Integer groupFlag;
    
        /** * 发送人头像 */
        private String fromMsg;
    
        /** * 接受人头像 */
        private String toMsg;
    
        /** * 发送人的大v图片 */
        private String fromMsgSignV;
    
        /** * 发送人的皇冠图片 */
        private String fromMsgSignAnCrown;
    
        /** * 接受人大v图片 */
        private String toMsgSignV;
    
        /** * 接受人皇冠图片 */
        private String toMsgSignAnCrown;
    
        /** * 最佳吐槽 1为最佳吐槽 */
        private Integer bestBlowing;
    
        /** * 用户类型 普通用户：1；客服 2；会员：3 ；超级会员 4 ；直播人：5； */
        private Integer userType;
    
        /** * 平台标识 */
        private String platCode;
    
    
    }

#### 六、定义Vo类（可选） ####

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

package com.easy.webscoket.vo;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    /** * @program: easy * @description: 客户端发过来的消息 * @author: zte * @create: 2019-05-06 10:22 **/
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class ClientMessage { 
        private int id;
        private String name;
    
    }

package com.easy.webscoket.vo;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    /** * @program: easy * @description: 服务端返回消息 * @author: zte * @create: 2019-05-06 10:25 **/
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class ServerMessage { 
        private String content;
    }

#### 七、点对点聊天（html） ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/webjars/jquery/jquery.min.js"></script>
        <script src="/webjars/sockjs-client/sockjs.min.js"></script>
        <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    </head>
    <body onload="disconnect()">
    <div>
        <div>
            <button id="connect" onclick="connect();">连接</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
        </div>
        <div id="conversationDiv">
            <label>输入你的名字</label><input type="text" id="name" />
            <button id="sendName" onclick="sendName();">发送</button>
            <p id="response"></p>
        </div>
    </div>
    
    <script type="text/javascript">
        var stompClient = null;
    
        function setConnected(connected) { 
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            $('#response').html();
        }
    
        function connect() { 
            // websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple").withSockJS()配置的地址
            var socket = new SockJS('/gs-guide-websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({ }, function(frame) { 
                setConnected(true);
                console.log('Connected: ' + frame);
                // 客户端订阅消息的目的地址：此值BroadcastCtl中被@SendTo("/topic/getResponse")注解的里配置的值
                stompClient.subscribe('/user/' + 123 + '/msg', function(respnose){ 
                    showResponse(JSON.parse(respnose.body).content);
                });
            });
        }
    
    
        function disconnect() { 
            if (stompClient != null) { 
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
    
        function sendName() { 
            var name = $('#name').val();
            // 客户端消息发送的目的：服务端使用BroadcastCtl中@MessageMapping("/receive")注解的方法来处理发送过来的消息
            stompClient.send("/app/hello", { }, JSON.stringify({  'id': 321, 'name': name }));
        }
    
        function showResponse(message) { 
            var response = $("#response");
            response.html(message + "\r\n" + response.html());
        }
    </script>
    </body>
    </html>

#### 八、群聊（html） ####

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <title>群聊</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
        <link rel="stylesheet" href="/webrtc/css/bootstrap-material-design.min.css">
        <script src="/audience/js/sockjs.min.js" defer></script>
        <script src="/audience/js/stomp.min.js" defer></script>
    </head>
    <body>
    
    <div class="col-div" style="width: 320px;align-items: center;">
        <div class="form-group bmd-form-group is-filled"
            style="width: 100%; height: 80px;align-items: center;">
            <label for="userId" class="bmd-label-floating">用户名:</label>
            <input th:value="${traName}" type="text" class="form-control" name="userId" id="userId"
                maxlength="18">
        </div>
        <div class="form-group bmd-form-group is-filled"
            style="width: 100%; height: 80px;align-items: center;display: none;">
            <label for="roomId" class="bmd-label-floating">房间号:</label>
            <input type="text" th:value="${roomId}" class="form-control" name="roomId" id="roomId"
                maxlength="18">
        </div>
        <div style="height: 40px"></div>
        
        <button id="login-btn" type="button" class="btn btn-raised btn-primary"
            style="width: 100%; height: 40px" onclick="connect($('#roomId').val(),$('#userId').val());">进入房间
            <div class="ripple-container"></div>
        </button>
    </div>
    <div style="width: 20%;height: 100%;align-items: initial !important;background: #fff;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
            style="width: 100%;display: block;margin: 0;">
            <ul class="layui-tab-title" style="display: flex;justify-content: center"
                lay-filter="queSearch">
                <li class="layui-this">简介</li>
                <li>讨论区</li>
            </ul>
            <div class="layui-tab-content" style="display: block;width: 100%;">
                <div th:utext="${introduction}" class="layui-tab-item layui-show"
                    style="color: #333;line-height: 20px;font-size: 12px;"></div>
                <div class="layui-tab-item" style="width: 100%;">
                    <div class="commentCon">
                        <div id="response"></div>
                    </div>
                    <div class="inputbottom">
                        <input type="text" id="yourMessage" placeholder="说点儿什么" maxlength="200">
                        <button onclick="sendAll();" id="sendAll" type="button"
                            class="layui-btn layui-btn-normal"
                            style="background-color: #38AAFF !important;border-radius: 5px">发送</button>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <script src="/webrtc/js/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.all.js"></script>
    </script>
        <script>
            $(document).ready(function () { 
                $('body').bootstrapMaterialDesign();
                // $('#login-btn').trigger("click");
            });
        </script>
      
        <script type="text/javascript">
            layui.use('element', function () { 
                var $ = layui.jquery
                    , element = layui.element;
                $('.layui-tab-title').on('click', function (title) { 
                    if (title.toElement.textContent == "讨论区") { 
                        setTimeout(() => { 
                            selle();
                        }, 500)
                    }
                });
            })
    
            function getGroupGetMessage() { 
                $.ajax({ 
                    url: '/rest/message/groupGetMessage',
                    type: 'GET',
                    data: { 
                        groupFlag: 1,
                        groupPrefix: $('#roomId').val()
                    },
                    success: function (data) { 
                        // console.log(data);
                        for (let i = 0; i < data.data.length; i++) { 
                            let time = changTime(data.data[i].sendTime);
                            $("#response").append(
                                '<div style="display:block">' +
                                '<div style="justify-content: space-between;">' +
                                '<div class="nickname"><span>' + data.data[i].fromUser + '</span></div>' +
                                '<div class="nickname" style="text-align: right;padding-right: 10px;display: block">' + time + '</div>' +
                                '</div>' +
                                '<div class="content"><span >' + data.data[i].content + '</span></div>' +
                                '</div>'
                            );
                        }
                    },
                    error: function () { 
                    }
                })
            }
            getGroupGetMessage();
    
            function changTime(time, format = 'M-D h:m') { 
                let timestamp;
                if (!time) { 
                    return false
                }
                time = time.replace("T", " ");
                timestamp = new Date(time.replace(/-/g, '/'));
                const formatNumber = n => { 
                    n = n.toString()
                    return n[1] ? n : '0' + n
                }
                const formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
                let returnArr = [];
                let date = new Date(timestamp);
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let hour = date.getHours()
                let minute = date.getMinutes()
                let second = date.getSeconds()
                returnArr.push(year, month, day, hour, minute, second);
                returnArr = returnArr.map(formatNumber);
                for (var i in returnArr) { 
                    format = format.replace(formateArr[i], returnArr[i]);
                }
                return format;
            }
    
            var stompClient = null;
    
            function setConnected(connected) { 
                $('#response').html();
            }
    
            function connect(a, b) { 
               // websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple").withSockJS()配置的地址
                var socket = new SockJS('/gs-guide-websocket');
                var userId = a;
                console.log("userId:" + userId);
                // sessionStorage.setItem("token", data.data.token);
                stompClient = Stomp.over(socket);
                stompClient.connect({ }, function (frame) { 
                    setConnected(true);
                    console.log('Connected: ' + frame);
                    // alert(123)
                    // 订阅 /group/to-all 实现公告
                    stompClient.subscribe('/group/' + userId + '', function (respnose) { 
                        var id = JSON.parse(respnose.body).fromUser;
                        var groupFlag = JSON.parse(respnose.body).groupFlag;
                        if (id != b && groupFlag == 1) { 
                            showResponse(JSON.parse(respnose.body).content, JSON.parse(respnose.body).fromUser, 2);
                        }
                    });
                })
            }
            function sendAll() { 
                var userId = $("#userId").val();
                var content = $('#yourMessage').val();
                con = content.replace(/(^\s+)|(\s+$)/g, "")
                if (con == '') { 
                    layer.msg("发送内容不能为空");
                } else { 
                    // 客户端消息发送的目的：服务端使用BroadcastCtl中@MessageMapping("/receive")注解的方法来处理发送过来的消息
                    stompClient.send("/app/group", { }, JSON.stringify({ 
                        'groupFlag': 1,
                        'groupPrefix': $("#roomId").val(),
                        'fromUser': userId,
                        'content': content,
                        'msgType': 1
                    }));
                    showResponse(content, userId, 1);
                }
            }
    
            function num(num){ 
                if(num < 10){ 
                    num = '0' + num;
                }
                return num
            }
    
            function showResponse(content, userId, type) { 
                var response = $("#response");
                var length = content.length * 15 + 'px';
                // if (type == 1){ 
                let time = num(new Date().getMonth() + 1) + '-' + num(new Date().getDate()) + ' ' + num(new Date().getHours()) + ':' + num(new Date().getMinutes());
    
                let data = '<div style="display:block">' +
                    '<div style="justify-content: space-between;">' +
                    '<div class="nickname"><span>' + userId + '</span></div>' +
                    '<div class="nickname" style="text-align: right;padding-right: 10px;display: block">' + time + '</div>' +
                    '</div>' +
                    '<div class="content"><span >' + content + '</span></div>' +
                    '</div>'
                $("#response").append(data);          
                if (type == 1) { 
                    $('#yourMessage').val('');
                }
                selle();
            }
    
            function selle() { 
                var showContent = $(".commentCon");
                showContent[0].scrollTop = showContent[0].scrollHeight;
            }
    
        </script>
        <script>
    
            $("#invite").bind("click", function () { 
                var id = $("#getRoomId").val();
               layer.confirm('/traine/traine/audience?id=' + id, { 
                    btn: ['复制', '确定'] //按钮
                }, function () { 
                    $('.layui-layer-btn0').attr('data-clipboard-text', 'https://medical.yinqianshan.org/traine/traine/audience?id=' + id);
                    var clipboard = new ClipboardJS('.layui-layer-btn0');
                    clipboard.on('success', function (e) { 
                        //成功后执行这里
                        layer.msg('复制成功');
                    });
                    clipboard.on('error', function (e) { 
                        console.log(e);
                    });
                }, function () { 
                });
            });
    
            document.onkeydown = function (event) { 
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) { 
                    sendAll();
                }
            };
        </script>
    </body>
    </html>

#### 九、对应sql ####

/* Navicat Premium Data Transfer Source Server : hfky Source Server Type : MySQL Source Server Version : 50723 Source Host : 49.233.66.170:3306 Source Schema : hfky Target Server Type : MySQL Target Server Version : 50723 File Encoding : 65001 Date: 24/09/2020 17:10:39 */
    
    SET NAMES utf8mb4;
    SET FOREIGN_KEY_CHECKS = 0;
    
    -- ----------------------------
    -- Table structure for t_message
    -- ----------------------------
    DROP TABLE IF EXISTS `t_message`;
    CREATE TABLE `t_message`  (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `from_user` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '发送人',
      `to_user` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '接收人',
      `content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '消息内容',
      `msg_type` int(4) NULL DEFAULT 1 COMMENT '消息类型:1 文字 ；2图片； 默认为1',
      `read_flag` int(2) NULL DEFAULT 0 COMMENT '是否已读， 0：未读， 1：已读',
      `delete_flag` int(2) NULL DEFAULT 0 COMMENT ' 正常为 0 删除为1',
      `send_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '发送时间',
      `voice_time` int(4) NULL DEFAULT NULL COMMENT '语音时长',
      `from_nick` varchar(80) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '发送人昵称',
      `to_nick` varchar(80) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '接受人昵称',
      `group_prefix` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '组名称 如：群聊编号， 直播编号， 话题编号',
      `group_flag` int(2) NULL DEFAULT 0 COMMENT '组标记,1:培训讨论；2:会诊直播',
      `from_msg` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '发送人头像',
      `to_msg` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '接受人头像',
      `from_msg_sign_v` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '发送人的大v图片',
      `from_msg_sign_an_crown` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '发送人的皇冠图片',
      `to_msg_sign_v` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '接受人大v图片',
      `to_msg_sign_an_crown` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '接受人皇冠图片',
      `best_blowing` int(11) NULL DEFAULT 0 COMMENT '最佳吐槽 1为最佳吐槽 ',
      `user_type` int(11) NULL DEFAULT NULL COMMENT '用户类型 普通用户：1；客服 2；会员：3 ；超级会员 4 ；直播人：5； ',
      `plat_code` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '平台标识',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 4044 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = COMPACT;
    
    SET FOREIGN_KEY_CHECKS = 1;

[WebSocket_]: https://www.jianshu.com/p/3444ea70b6cb
[20200924165622551.png_pic_center]: /images/20221123/f721264f462941f0961b6777bc313bae.png