【Java分享客栈】SpringBoot整合WebSocket+Stomp搭建群聊项目

前言

前两周经常有大学生小伙伴私信给我,问我可否有偿提供毕设帮助,我说暂时没有这个打算,因为工作实在太忙,现阶段无法投入到这样的领域内,其中有两个小伙伴又问到我websocket该怎么使用,想给自己的项目中加入这样的技术。

刚好我所在的公司有做问诊服务,里面就使用了websocket实现聊天通讯,就在闲暇之余专门把部分代码摘取出来,做了一个简单的demo分享给他们了,之后想想这块可以再丰富一下,就花时间又做了一个更完整的小项目出来,且加了详细的注释说明,分享给对websocket感兴趣的小伙伴们。

案例展示

聊天案例演示.gif

技术栈

考虑到不同群体对vue等前端技术的接受程度,本案例采用了HTML+CSS+JQuery来实现,代码直接复制到vue项目中也是一样的,只是赋值和取值的方式改变而已,很多Java程序员其实对于一门简单案例的学习不喜欢牵扯太多前端技术,而是单纯学习想知道的这门技术就好,太多其他的引入反而影响跟踪调试,而原始的HTML+JS方式更有利于我们学习和理解,只需要右键HTML页面在浏览器打开进行F12调试即可。

技术 版本
Java 1.8
SpringBoot 2.3.12.RELEASE
WebSocket 2.3.12.RELEASE
Hutools 5.8.0.M1
SockJS 1.6.0
StompJS 1.7.1

实现过程

1、引入依赖

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

<!-- Hutools工具类 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.0.M1</version>
</dependency>

2、订阅常量类

后面的websocket配置类会用到这几个常量

stomp端点地址: 连接websocket时的后缀地址,比如127.0.0.1:8888/websocket。

websocket前缀:前端调服务端消息接口时的URL都加上了这个前缀,比如默认是/send,变成/app/send。

点对点代理地址:如果websocket配置类中设置了代理路径,一般点对点订阅路径喜欢用/queue。

广播代理地址:如果websocket配置类中设置了代理路径,一般广播订阅路径喜欢用这个/topic。

package com.simple.ws.constants;

/**
 * <p>
 * websocket常量
 * </p>
 *
 * @author 福隆苑居士,公众号:【Java分享客栈】
 * @since 2022-04-02 10:11
 */
public class WsConstants {

   // stomp端点地址
   public static final String WEBSOCKET_PATH = "/websocket";

   // websocket前缀
   public static final String WS_PERFIX = "/app";

   // 消息订阅地址常量
   public static final class BROKER {
      // 点对点消息代理地址
      public static final String BROKER_QUEUE = "/queue/";
      // 广播消息代理地址
      public static final String BROKER_TOPIC = "/topic";
   }
}

3、WebSocket配置类

核心内容讲解:

1)、@EnableWebSocketMessageBroker:用于开启stomp协议,这样就能支持@MessageMapping注解,类似于@requestMapping一样,同时前端可以使用Stomp客户端进行通讯;

2)、registerStompEndpoints实现:主要用来注册端点地址、开启跨域授权、增加拦截器、声明SockJS,这也是前端选择SockJS的原因,因为spring项目本身就支持;

3)、configureMessageBroker实现:主要用来设置客户端订阅消息的路径(可以多个)、点对点订阅路径前缀的设置、访问服务端@MessageMapping接口的前缀路径、心跳设置等;

package com.simple.ws.config;

import com.simple.ws.constants.WsConstants;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;

/**
 * <p>
 * websocket核心配置类
 * </p>
 *
 * @author 福隆苑居士,公众号:【Java分享客栈】
 * @since 2022/4/1 22:57
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfig implements WebSocketMessageBrokerConfigurer {

   /**
    * 注册stomp端点
    *
    * @param registry stomp端点注册对象
    */
   @Override
   public void registerStompEndpoints(StompEndpointRegistry registry) {
      registry.addEndpoint(WsConstants.WEBSOCKET_PATH)
            .setAllowedOrigins("*")
            .withSockJS();
   }

   /**
    * 配置消息代理
    *
    * @param registry 消息代理注册对象
    */
   @Override
   public void configureMessageBroker(MessageBrokerRegistry registry) {

      // 配置服务端推送消息给客户端的代理路径
      registry.enableSimpleBroker(WsConstants.BROKER.BROKER_QUEUE, WsConstants.BROKER.BROKER_TOPIC);
      
      // 定义点对点推送时的前缀为/queue
      registry.setUserDestinationPrefix(WsConstants.BROKER.BROKER_QUEUE);
      
      // 定义客户端访问服务端消息接口时的前缀
      registry.setApplicationDestinationPrefixes(WsConstants.WS_PERFIX);
   }
}

特别说明:如果对于配置类中这几个路径的设置看不明白,没关系,后面的前端部分你一看就懂了。

4、消息接口

说明:

1)、消息接口使用@MessageMapping注解,前面讲的配置类@EnableWebSocketMessageBroker注解开启后才能使用这个;

2)、这里稍微提一下,真正线上项目都是把websocket服务做成单独的网关形式,提供rest接口给其他服务调用,达到共用的目的,本项目因为不涉及任何数据库交互,所以直接用@MessageMapping注解,后续完整IM项目接入具体业务后会做一个独立的websocket服务,敬请关注哦!

package com.simple.ws.controller;

import com.simple.ws.constants.WsConstants;
import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.*;

import java.util.Map;

/**
 * <p>
 * 消息接口
 * </p>
 *
 * @author 福隆苑居士,公众号:【Java分享客栈】
 * @since 2022-04-02 12:00
 */
@RestController
@RequestMapping("/api")
@Slf4j
public class MsgController {

   private final SimpMessagingTemplate messagingTemplate;

   public MsgController(SimpMessagingTemplate messagingTemplate) {
      this.messagingTemplate = messagingTemplate;
   }

   /**
    * 发送广播消息
    * -- 说明:
    *       1)、@MessageMapping注解对应客户端的stomp.send('url');
    *       2)、用法一:要么配合@SendTo("转发的订阅路径"),去掉messagingTemplate,同时return msg来使用,return msg会去找@SendTo注解的路径;
    *       3)、用法二:要么设置成void,使用messagingTemplate来控制转发的订阅路径,且不能return msg,个人推荐这种。
    *
    * @param msg 消息
    */
   @MessageMapping("/send")
   public void sendAll(@RequestParam String msg) {

      log.info("[发送消息]>>>> msg: {}", msg);

      // 发送消息给客户端
      messagingTemplate.convertAndSend(WsConstants.BROKER.BROKER_TOPIC, msg);
   }
   

5、前端项目结构

很简单,就是HTML+CSS和几个js文件,sockjs和stompjs就是和服务端通信的实现,可以从GitHub官网下载,而websocket.js是我们自己封装的和服务端通信的内容。

111.png

6、Stomp客户端使用

页面结构样式这里就省略不讲了,直接开始正文。

stompjs,是对websocket原生使用的一层封装,提供了更简单的调用方法。

这里先看看我们自己封装的websocket.js的实现:

1)、声明URL

也就是服务端配置类的端点地址

var url = "http://127.0.0.1:8888/websocket"; // 改成自己的服务端地址

2)、建立websocket连接

stompClient = Stomp.over(socket)就是覆盖了sockjs使用自己的客户端来操作ws;

进入stompClient.connect()中就代表连接成功,可以进行自己的业务处理比如广播通知某人上线等等,重要的是连接成功后要声明订阅列表,这样服务端转发的消息才会根据这些订阅地址发送过来,否则收不到;

最后就是有一个回调可以捕获异常情况,在里面可以做一些操作比如重连等等。

/**
 * 连接
 */
function connect() {
    userId =  GetUrlParam("userId");
    var socket = new SockJS(url, null, { timeout: 15000});
    stompClient = Stomp.over(socket); // 覆盖sockjs使用stomp客户端
    stompClient.connect({}, function (frame) {

        console.log('frame: ' + frame)

        // 连接成功后广播通知
        sendNoticeMsg(userId, "in");

        /**
         * 订阅列表,订阅路径和服务端发消息路径一致就能收到消息。
         * -- /topic: 服务端配置的广播订阅路径
         * -- /queue/: 服务端配置的点对点订阅路径
         */
        stompClient.subscribe("/topic", function (response) {
                showMsg(response.body);
        });

        stompClient.subscribe("/queue/" + userId + "/topic", function (response) {
                showMsg(response.body);
        });

        // 异常时进行重连
        }, function (error) {
            console.log('connect error: ' + error)
            if (reConnectCount > 10) {
                    console.log("温馨提示:您的连接已断开,请退出后重新进入。")
                    reConnectCount = 0;
            } else {
                    wsReconnect && clearTimeout(wsReconnect);
                    wsReconnect = setTimeout(function () {
                            console.log("开始重连...");
                            connect();
                            console.log("重连完毕...");
                            reConnectCount++;
                    }, 1000);
            }
        }
    )
}

3)、断开websocket连接

断开很简单,但要注意一点,不要根据关闭窗口或浏览器的事件来控制断开,这是一个误区,首先浏览器兼容性差异较大,传统的js在监听窗口关闭事件的兼容性上是很差的,这个可以自己试验就知道了,有些浏览器可以有些不可以;

其次,可以参考QQ,你自己在退出一个群聊的时候实际上你就单纯是关闭了,并没有离线,而是你退出QQ时才真正离线,所以真正控制这个断开方法的位置应该是点击退出按钮时,这一点不要理解错了。

/**
 * 断开
 */
function disconnect() {
    if (stompClient != null) {
        // 断开连接时进行广播通知
        sendNoticeMsg(userId, "out");
        // 断开连接
        stompClient.disconnect(function(){
                // 有效断开的回调
                console.log(userId + "断开连接....")
        });
    }
}

4)、消息滚动到底部

这个没什么说的,在进入页面以及发送消息后渲染页面时使用即可。

// 消息窗口滚动到底部
function scrollBotton(){
    var div = document.getElementById("content");
    div.scrollTop = div.scrollHeight;
}

5)、聊天消息渲染到页面

这里就是单纯的JQuery操作了,注意的一点是这里加了个type判断是系统消息还是聊天消息,在本案例中,系统消息就是某人上下线的提示,聊天消息就是发送出来的内容。

在vue这样的框架中,这部分的操作其实会很简单。

/**
 * 聊天消息渲染到页面中
 */
function showMsg(obj) {
    obj = JSON.parse(obj);
    var userId = obj.userId;
    var sendTime = obj.sendTime;
    var info = obj.info;
    var type = obj.type;

    if (1 === type) {
        // 聊天消息
        console.log("聊天消息...")
        var msgHtml = "<div class=\"msg\" id=\"msg\">" + 
                          "  <div class=\"first-line\">" + 
                          "	   <div class=\"userName\" id=\"userName\">" + userId + "</div>" +  
                          "	   <div class=\"sendTime\" id=\"sendTime\">" + sendTime + "</div>" + 
                          "  </div>" + 
                          "  <div class=\"second-line\">" + 
                          "    <div class=\"sendMsg\" id=\"sendMsg\">" + info + "</div>" + 
                          "  </div>" + 
                          "</div>";

        // 渲染到页面	
        $("#content").html($("#content").html() + "\n" + msgHtml);

} else if (2=== type) {
        // 系统消息
        console.log("系统消息...")
        var msgHtml = "<div class=\"notice\">" + 
                                "<div class=\"notice-info\">" + info + "</div>" + 
                          "</div>";

        // 渲染到页面	
        $("#content").html($("#content").html() + "\n" + msgHtml);
    }

    // 消息窗口滚动到底部
    scrollBotton();
}

6)、发送群聊消息

这里传递的obj定义了一个消息体,就是一个对象,真正项目中也是这般使用,而不是单纯传递一个文本;

stompClient.send中的url,其中/app是服务端配置类中设置的ApplicationDestinationPrefixes,而/send就是controller接口中@MessageMapping(“/send”)的路径,两个加在一起就是这里前端发送的路径,少一个或多一个斜杠都会导致服务端收不到消息。

/**
* 发送群聊消息
* -- 这里我们传递消息体对象 
* 	{
*         "userId": userId, // 发送者
*         "sendTime": sendTime, // 发送时间
*         "info": info, // 发送内容
*         "type": 1  // 消息类型,1-聊天消息,2-系统消息
*       }
*/
function sendAll(obj) {
    stompClient.send("/app/send", {}, JSON.stringify(obj));
}

7)、发送系统消息

就是传递type=2即可,info做了下判断返回不同的消息内容。

/**
 * 发送系统通知消息
 * @param userId 用户id 
 */
function sendNoticeMsg(userId, action) {
    var obj = {
        "userId": userId,
        "sendTime": new Date().Format("HH:mm:ss"),
        "info": "in" === action ? userId + "进入房间" : userId + "离开房间",
        "type": 2
    }
    sendAll(obj);
}

7、聊天页发消息

index.html就是聊天主页面,直接调用我们前面封装好的websocket.js方法即可。

主要步骤为:进入页面时建立websocket连接 –> 获取登录用户信息 –> 监听按钮点击事件和键盘事件 –> 发送websocket消息 –> 清空文本框内容

这样,一旦发送消息成功,服务端就可以看到接收到的消息体并根据发送路径进行转发,前端websocket.js中订阅列表中的路径一旦和服务端转发的路径匹配上,就会收到消息,我们把消息渲染到页面上即可。

这个过程其实也就是websocket全双工通信的原理

<script>

    $(function() {
        // 启动websocket
        connect();

        // 获取用户信息
        getUser();

        // 消息窗口滚动到底部
        scrollBotton();

        // 监听键盘Enter键,要用keyup,否则无法清除换行符。
        $("#send-info").keyup(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                $("#send-btn").click();
            }
        });

        // 监听发送按钮点击事件
        $("#send-btn").click(function() {
            send();
        });

        // 监听退出按钮点击事件
        $("#exit-btn").click(function() {
            layer.confirm('你确定要退出吗?', {
                time: 0, // 不自动关闭
                btn: ['确定退出', '再玩玩'],
                yes: function(index){
                    layer.close(index);
                    disconnect();
                    window.location.href = 'login.html';
                }
            });
        });


    });

    // 获取用户信息
    function getUser() {
        var userId =  GetUrlParam("userId");
        $("#userId").text(userId);
    }

    // 发送广播消息,这里定义一个type:1-聊天消息,2-系统消息。
    function send() {
        var userId = $("#userId").text().trim();
        var sendTime = new Date().Format("HH:mm:ss");
        var info = $("#send-info").val().replace("\n", "");
        var msg = {
            "userId": userId,
            "sendTime": sendTime,
            "info": info,
            "type": 1
        }
        // 发送消息
        sendAll(msg);

        // 清空文本域内容
        $("#send-info").val("");
    }

</script>

避坑指南

1)、版本问题,经本人专门花时间测试,SpringBoot2.4.0以下版本才能整合SockJS和StompJS成功,以上的版本都不行,会报 Main site uses: “1.6.0”, the iframe: “1.0.0” 这样的错误,将StompJS换成低版本也不行,所以这里整合时用了SpringBoot2.3.12.RELEASE版本,但这个没关系,websocket服务一般都是单独做成一个服务的,如果是微服务,你的其他业务服务使用高版本的SpringBoot就行了;

2)、监听窗口关闭事件不可取,这个在前面已经讲过了,浏览器兼容性差,我试过好几个浏览器监听效果都各不相同甚至完全无效,其次本身这样操作也不合理,我们只要保证退出时触发断开事件即可,无需在这样的事情上浪费时间,可以参考QQ;

3)、服务端编写消息接口时推荐使用SimpMessagingTemplate来控制发送,而不是@SendTo注解,因为前者更符合程序员开发思路,后期独立websocket服务暴露rest接口时也更简单;

4)、配置类中其实还有很多其他配置项,比如心跳配置、拦截器配置等,本案例没有加入进来,因为我自己公司的项目中其实使用过心跳,但后来又去掉了,因为对这块了解不深入的话贸然使用容易出现稀奇古怪的问题。

讲个趣事,我们前端工程师当初就因为心跳这块调试了挺久,上线后依然会出现时好时坏的情况,因为他之前也没做过websocket都是现学的,而且线上环境和测试环境差异难明,包含程序缺陷、网络环境因素等等,后来我们决定去掉心跳检测,之后两年也没出任何问题。

所以有时候保证项目稳定性反而更有用,但处于学习的角度而言,心跳检测是一定需要的,否则所有的socket框架也不会专门提供这样的方案了。

总结

SpringBoot+websocket的实现其实不难,你可以使用原生的实现,也就是websocket本身的OnOpen、OnClosed等等这样的注解来实现,以及对WebSocketHandler的实现,类似于netty的那种使用方式,而且原生的还提供了对websocket的监听,服务端能更好的控制及统计。

但根据我个人的经验而言,真实项目中还是使用Stomp实现的居多,因为独立服务更方便,便于后期搭建集群环境做横向扩展,且内置的方法也很简单,既然如此,我们还是以主流实现方式为准来学习吧。

源码

链接: https://pan.baidu.com/doc/share/tt1_DVkvVQ9BQoXJiM07hg-793418840542403
提取码: agiu
后续会根据本案例进行优化,设计具体的业务表,实现群聊、单聊、心跳检测,同时前端以vue3来搭建,实现一个完整的IM应用,有兴趣的可以关注下本人以获取最新资讯哦~


本人原创文章纯手打,觉得有一滴滴帮助的话,就请点个赞和推荐吧,鞠躬~

 1 total views,  1 views today

页面下部广告