脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot WebSocket在线群聊

一篇文章带你使用SpringBoot基于WebSocket的在线群聊实现

 更新时间：2020年10月07日 10:28:13   作者：南淮北安  
这篇文章主要介绍了一篇文章带你使用SpringBoot基于WebSocket的在线群聊实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、添加依赖

在这里插入图片描述

加入前端需要用到的依赖：

<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>sockjs-client</artifactId>
      <version>1.1.2</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.4.1</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>stomp-websocket</artifactId>
      <version>2.3.3</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator-core</artifactId>
    </dependency>

二、配置 WebSocketConfig

@Configuration
//开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  /**
   * 配置消息代理
   * @param registry
   */
  @Override
  public void configureMessageBroker(MessageBrokerRegistry registry) {
    //定义消息代理的前缀
    registry.enableSimpleBroker("/topic");
    //配置一个或者多个前缀，过滤出需要代理方法处理的消息
    registry.setApplicationDestinationPrefixes("/app");
  }

  /**
   * 注册STOMP协议的节点，并指定映射的URL
   * @param registry
   */
  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    //注册STOMP协议节点，同时指定使用 SockJS 协议
    registry.addEndpoint("/chat").withSockJS();
  }
}

三、配置 Message 类

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;
  }
}

四、配置控制器 GreetingController

@Controller
public class GreetingController {
  /**
   * 这个方法用来处理浏览器发送来的消息，对其进行处理
   * @param message
   * @return
   */
  //@MessageMapping 类似 @RequestMapping
  @MessageMapping("/hello")
  //处理完之后对其进行转发到 SendTo 中的路径
  @SendTo("/topic/greetings")
  public Message greeting(Message message) {
    return message;
  }
}

这里也可以使用 SimpMessagingTemplate 来进行设置：

@Controller
public class GreetingController {
  @Autowired
  SimpMessagingTemplate simpMessagingTemplate;
  @MessageMapping("/hello")
  public void greeting(Message message) {
    simpMessagingTemplate.convertAndSend("/topic/greetings", message);
  }
}

SimpMessagingTemplate这个类主要是实现向浏览器发送消息的功能。

五、设置前端页面 chat.html

<!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>

<table>
  <tr>
    <td>请输入用户名</td>
    <td><input type="text" id="name"></td>
  </tr>
  <tr>
    <td><input type="button" id="connect" value="连接"></td>
    <td><input type="button" id="disconnect" disabled="disabled" value="断开连接"></td>
  </tr>
</table>
<div id="chat" style="display: none">
  <table>
    <tr>
      <td>请输入聊天内容</td>
      <td><input type="text" id="content"></td>
      <td><input type="button" id="send" value="发送"></td>
    </tr>
  </table>
  <div id="conversation">群聊进行中...</div>
</div>
<script>
  $(function () {
    $("#connect").click(function () {
      connect();
    })
    $("#disconnect").click(function () {
      if (stompClient != null) {
        stompClient.disconnect();
      }
      setConnected(false);
    })

    $("#send").click(function () {
      //将消息发送到代理方法内
      stompClient.send('/app/hello',{},JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}))
    })
  })

  var stompClient = null;

  function connect() {
    if (!$("#name").val()) {
      return;
    }
    //建立连接
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket);
    //建立连接
    stompClient.connect({}, function (success) {
      setConnected(true);
      stompClient.subscribe('/topic/greetings', function (msg) {
        //拿到输入的消息内容进行展示
        showGreeting(JSON.parse(msg.body));
      });
    })
  }
  //展示消息的内容
  function showGreeting(msg) {
    $("#conversation").append('<div>' + msg.name + ':' + msg.content + '</div>');
  }
  //设置连接按钮，已经连接上则禁止，反之不禁止
  function setConnected(flag) {
    $("#connect").prop("disabled", flag);
    $("#disconnect").prop("disabled", !flag);
    //连接上，才显示聊天区的内容
    if (flag) {
      $("#chat").show();
    } else {
      $("#chat").hide();
    }
  }
</script>
</body>
</html>

六、登录测试

打开两个浏览器，实现群聊功能：

在这里插入图片描述

到此这篇关于一篇文章带你使用SpringBoot基于WebSocket的在线群聊实现的文章就介绍到这了,更多相关SpringBoot WebSocket在线群聊内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • spring使用JavaConfig进行配置的方法

    spring使用JavaConfig进行配置的方法

    这篇文章主要介绍了spring使用JavaConfig进行配置的方法，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • Java的RocketMQ之消息存储和查询原理详解

    Java的RocketMQ之消息存储和查询原理详解

    这篇文章主要介绍了Java的RocketMQ之消息存储和查询原理详解,一台Broker服务器只有一个CommitLog文件(组),RocketMQ会将所有主题的消息存储在同一个文件中,这个文件中就存储着一条条Message,每条Message都会按照顺序写入,需要的朋友可以参考下
    2024-01-01
  • Spring@Value使用获取配置信息为null的操作

    Spring@Value使用获取配置信息为null的操作

    这篇文章主要介绍了Spring@Value使用获取配置信息为null的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-07-07
  • 关于JWT之token令牌认证登录

    关于JWT之token令牌认证登录

    这篇文章主要介绍了关于JWT之token令牌认证登录,使用JWT能够保证Token的安全性，且能够进行Token时效性的检验，使用JWT时，登录成功后将用户信息生成一串令牌字符串,需要的朋友可以参考下
    2023-05-05
  • 关于Java语法糖以及语法糖的原理和用法

    关于Java语法糖以及语法糖的原理和用法

    这篇文章主要介绍了关于Java什么是语法糖以及语法糖的种类,也称糖衣语法，是由英国计算机学家 Peter.J.Landin 发明的一个术语，指在计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用,需要的朋友可以参考下
    2023-05-05
  • IntelliJ IDEA快速查询maven依赖关系图文教程

    IntelliJ IDEA快速查询maven依赖关系图文教程

    Maven提供了来查看依赖关系,而IDE往往提供了更加便利的方式,比如Eclipse或者IDEA都有类似的功能,下面这篇文章主要给大家介绍了关于IntelliJ IDEA快速查询maven依赖关系的相关资料,需要的朋友可以参考下
    2023-11-11
  • Mybatis如何自动生成数据库表结构总结

    Mybatis如何自动生成数据库表结构总结

    这篇文章主要给大家介绍了关于Mybatis如何自动生成数据库表结构的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Mybatis具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-11-11
  • Java实战项目练习之球馆在线预约系统的实现

    Java实战项目练习之球馆在线预约系统的实现

    理论是远远不够的，只有在实战中才能获得能力的提升，本篇文章手把手带你用java+SpringBoot+maven+freemark+Mysql实现一个球馆在线预约系统,大家可以在过程中查缺补漏，提升水平
    2022-01-01
  • SpringSecurity默认登录页的使用示例教程

    SpringSecurity默认登录页的使用示例教程

    Spring 是非常流行和成功的 Java 应用开发框架,Spring Security 正是 Spring 家族中的成员,Spring Security 基于 Spring 框架,提供了一套 Web 应用安全性的完整解决方案,本文给大家介绍SpringSecurity的默认登录页的使用教程,感兴趣的朋友一起看看吧
    2023-12-12
  • spring事物传播propagation类别含义详解

    spring事物传播propagation类别含义详解

    这篇文章主要介绍了spring事物传播propagation类别含义详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12

最新评论