SpringBoot + WebSocket 实现聊天室功能

最新推荐文章于 2024-09-14 18:07:09 发布

一天无聊

最新推荐文章于 2024-09-14 18:07:09 发布

阅读量1.3k

点赞数

分类专栏：学习文章标签： websocket

本文链接：https://blog.csdn.net/cenrc/article/details/119183942

版权

学习专栏收录该内容

11 篇文章 4 订阅

订阅专栏

本内容根据江南一点雨松哥的 SpringBoot 付费视频所做的学习笔记，想具体详细了解内容的，请关注微信公众号：江南一点雨。

实现聊天室需要使用到前端的一些 js 库的支持，为了方便对 js 版本信息的管理，我们可以使用 webjars的方式导入 js 库依赖。 webjars 依赖库

创建一个 SpringBoot 项目添加一下依赖：

完整的依赖：

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <!--通过 webjars 的方式导入前端库-->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>sockjs-client</artifactId>
      <version>1.5.1</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>stomp-websocket</artifactId>
      <version>2.3.4</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.6.0</version>
    </dependency>
    <!--定位器，省略在 HTML 中引入文件的版本信息-->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator</artifactId>
      <!--可以不指定版本号，会自动使用最新版本，但是我在加载时，如果不随便指定一个版本号，那么显示无法下载。-->
      <version>0.31</version>
    </dependency>

在完成项目的创建和依赖导入之后，我们就可以进行 WebSocket 相关配置了。

WebSocketConfig 配置类需要添加 @EnableWebSocketMessageBroker，并且实现 WebSocketMessageBrokerConfigurer接口。

@Configuration
@EnableWebSocketMessageBroker
public class WebSoketConfig implements WebSocketMessageBrokerConfigurer {

    /**
     *  注册端点
     * @param registry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 添加一个以 "/chat" 为前缀的端点，开启 SocketJS 支持
        registry.addEndpoint("/chat").withSockJS();
    }

    /**
     * 配置消息代理
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //" /topic" 表示消息代理的前缀，消息代理将接收到消息广播给当前所有连接上来的客户端
        registry.enableSimpleBroker("/topic");
    }
}

在以上代码中，我们主要实现接口的两个方法。第一个重载方法public void registerStompEndpoints(StompEndpointRegistry registry)主要作用是注册端点用于进行连接。第二个重载方法public void configureMessageBroker(MessageBrokerRegistry registry)主要作用是将带有定义好的前缀接口所传的消息进行广播，让所有订阅监听这个接口的连接获取到消息。

有关 WebSocket 相关配置类已经配置好了，接下来我们需要提供一个接口，用于消息的接收和转发。

首先，我们先定义一个 Message 用于定义消息的类型。

public class Message {
    private String name;
    private String content;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

其次，定义消息接口。其中，@MessageMapping是前端将要发送消息的接口。@SendTo("/topic/greetings") 是消息代理的接口以及前端订阅监听的接口。

@Controller
public class GreetingController {

    /**
     *  消息处理的接口
     *  @MessageMapping("/hello") ：表示客户端发送到服务端的地址
     *  @SendTo("/topic/greetings") ：表示服务端将接收到的信息转发到"/topic/greetings"，该地址我们在配置类中配好了 "/topic",也就是说到时候前端只需要监听好该接口就可以获取到聊天室里的信息
     * @param message
     * @return
     */
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greetings(Message message){
        return message;
    }
}

接下来，就是设计用户页面以及脚本代码了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>
<div>
  <label for="username">请输入用户名：</label>
  <input type="text" id="username" placeholder="用户名">
</div>
<div>
  <input type="button" value="连接" id="connect">
  <input type="button" value="断开连接" id="disconnect" disabled="disabled">
</div>
<div id="chat"></div>
<div>
  <label for="content">请输入聊天内容</label>
  <input type="text" id="content" placeholder="聊天内容">
</div>
<input type="button" id="send" value="发送" disabled="disabled">
<script>
  var stompClient;
  $(function () {
      // 给连接按钮绑定点击事件
      $("#connect").click(function () {
          connect();
      })
      $("#send").click(function () {
          // 通过 stompClient.send 发送消息，第一个参数为发送的消息接口，第二个参数是优先级，第三个参数是要发送的 JSON 数据
          stompClient.send("/hello",{},JSON.stringify({'name':$("#username").val(),'content':$("#content").val()}))
      })

  })
  // 连接方法
  function connect() {
      // 首先判断用户有没有输入用户名，如果没有则直接return
      if (!$("#username").val()) {
          return;
      }
      // 获取 SockJS 连接地址，"/chat" 就是我们之前配置的注册端点
      var socketjs = new SockJS("/chat");
      stompClient = Stomp.over(socketjs);
      // 通过 stompClient 建立连接，第一个参数不需要，第二个参数为回调函数
      stompClient.connect({},function (frame) {
          setConnect(true);
          // 通过 stompClient.subscribe 订阅消息。"/topic/greeting" 就是服务端转发的地址
          stompClient.subscribe("/topic/greetings",function (greeting) {
              // 将回调函数传过来的字符串数据转成 JSON 对象，不然无法解析
              var msgContent = JSON.parse(greeting.body);
              // 将信息追加到 div 中
              $("#chat").append("<div>" + msgContent.name + " : " + msgContent.content + "</div>")

          })
      });
  }
  // 设置连接成功后连接按钮状态
  function setConnect(connect) {
      $("#connect").prop("disabled",connect);
      $("#disconnect").prop("disabled",!connect);
      $("#send").prop("disabled",!connect);
  }
</script>
</body>
</html>