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

SpringBoot的WebSocket实现单聊群聊

 更新时间：2021年02月25日 17:24:48   作者：皮皮大虾  
这篇文章主要为大家详细介绍了SpringBoot的WebSocket实现单聊群聊，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了SpringBoot的WebSocket实现单聊群聊，供大家参考，具体内容如下

说在开头

在HTTP协议中，所有的请求都是由客户端发送给服务端，然后服务端发送请求
要实现服务器向客户端推送消息有几种methods:

1、轮询

大量无效请求，浪费资源

2、长轮询

有新数据再推送，但这会导致连接超时，有一定隐患

3、Applet和Flash

过时，安全隐患，兼容性不好

消息群发

创建新项目:

添加依赖：

<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>
 <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.3.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>

创建WebSocket配置类:WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker//注解开启webSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 /**
 * 配置webSocket代理类
 * @param registry
 */
 @Override
 public void configureMessageBroker(MessageBrokerRegistry registry) {
 registry.enableSimpleBroker("/topic"); //代理消息的前缀
 registry.setApplicationDestinationPrefixes("/app");  //处理消息的方法前缀
 }
 @Override
 public void registerStompEndpoints(StompEndpointRegistry registry) {
 registry.addEndpoint("/chat").withSockJS();  //定义一个/chat前缀的endpioint,用来连接
 }
}

创建Bean

/**
 * 群消息类
 */
public class Message {
 private String name;
 private String content;
//省略getter& setter
}

定义controller的方法:

/**
 * MessageMapping接受前端发来的信息
 * SendTo 发送给信息WebSocket消息代理，进行广播
 * @param message 页面发来的json数据封装成自定义Bean
 * @return 返回的数据交给WebSocket进行广播
 * @throws Exception
 */
 @MessageMapping("/hello")
 @SendTo("/topic/greetings")
 public Message greeting(Message message) throws Exception {
 return message;
 }
<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>
 <script>
 var stompClient = null;
 //点击连接以后的页面改变
 function setConnected(connection) {
  $("#connect").prop("disable",connection);
  $("#disconnect").prop("disable",!connection);
  if (connection) {
  $("#conversation").show();
  $("#chat").show();

  } else {
  $("#conversation").hide();
  $("#chat").hide();
  }
  $("#greetings").html("");
 }
 //点击连接按钮建立连接
 function connect() {
  //如果用户名为空直接跳出
  if (!$("#name").val()) {
  return;
  }
  //创建SockJs实例,建立连接
  var sockJS = new SockJS("/chat");
  //创建stomp实例进行发送连接
  stompClient = Stomp.over(sockJS);
  stompClient.connect({}, function (frame) {
  setConnected(true);
  //订阅服务端发来的信息
  stompClient.subscribe("/topic/greetings", function (greeting) {
   //将消息转化为json格式，调用方法展示
   showGreeting(JSON.parse(greeting.body));
  });
  });
 }
 //断开连接
 function disconnect() {
  if (stompClient !== null) {
  stompClient.disconnect();
  }
  setConnected(false);
 }
 //发送信息
 function sendName() {
  stompClient.send("/app/hello",{},JSON.stringify({'name': $("#name").val() , 'content': $("#content").val()}));
 }
 //展示聊天房间
 function showGreeting(message) {
  $("#greetings").append("<div>"+message.name + ":" + message.content + "</div>");
 }
 $(function () {
  $("#connect").click(function () {
  connect();
  });
  $("#disconnect").click(function () {
  disconnect();
  });
  $("#send").click(function () {
  sendName();
  })
 })
 </script>
</head>
<body>
<div>
 <label for="name">用户名</label>
 <input type="text" id="name" placeholder="请输入用户名">
</div>
<div>
 <button id="connect" type="button">连接</button>
 <button id="disconnect" type="button">断开连接</button>
</div>
<div id="chat" style="display: none;">
 <div>
 <label for="name"></label>
 <input type="text" id="content" placeholder="聊天内容">
 </div>
 <button id="send" type="button">发送</button>
 <div id="greetings">
 <div id="conversation" style="display: none;">群聊进行中</div>
 </div>
</div>
</body>
</html>

私聊

既然是私聊，就要有对象目标，也是用户，可以用SpringSecurity引入
所以添加额外依赖：

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

配置SpringSecurity

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
 @Bean
 PasswordEncoder passwordEncoder(){
 return new BCryptPasswordEncoder();
 }
 @Override
 protected void configure(AuthenticationManagerBuilder auth) throws Exception {
 auth.inMemoryAuthentication()
  .withUser("panlijie").roles("admin").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi")
  .and()
  .withUser("suyanxia").roles("user").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi");
 }
 @Override
 protected void configure(HttpSecurity http) throws Exception {
 http.authorizeRequests()
  .anyRequest().authenticated()
  .and()
  .formLogin()
  .permitAll();
 }
}

在原来的WebSocketConfig配置类中修改：也就是多了一个代理消息前缀:"/queue"

@Configuration
@EnableWebSocketMessageBroker//注解开启webSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 /**
 * 配置webSocket代理类
 * @param registry
 */
 @Override
 public void configureMessageBroker(MessageBrokerRegistry registry) {
 registry.enableSimpleBroker("/topic","/queue"); //代理消息的前缀
 registry.setApplicationDestinationPrefixes("/app");  //处理消息的方法前缀
 }
 @Override
 public void registerStompEndpoints(StompEndpointRegistry registry) {
 registry.addEndpoint("/chat").withSockJS();  //定义一个/chat前缀的endpioint,用来连接
 }
}

创建Bean:

public class Chat {
 private String to;
 private String from;
 private String content;
//省略getter& setter
}

添加controller方法：

 /**
 * 点对点发送信息
 * @param principal 当前用户的信息
 * @param chat 发送的信息
 */
 @MessageMapping("chat")
 public void chat(Principal principal, Chat chat) {
 //获取当前对象设置为信息源
 String from = principal.getName();
 chat.setFrom(from);
 //调用convertAndSendToUser("用户名","路径","内容");
 simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);
 }

创建页面：

<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>
 <script>
 var stompClient = null;
 function connect() {
  var socket = new SockJS("/chat");
  stompClient = Stomp.over(socket);
  stompClient.connect({}, function (frame) {
  stompClient.subscribe('/user/queue/chat', function (chat) {
   showGreeting(JSON.parse(chat.body));
  });
  });
 }
 function sendMsg() {
  stompClient.send("/app/chat",{},JSON.stringify({'content' : $("#content").val(), 'to': $("#to").val()}));
 }
 function showGreeting(message) {
  $("#chatsContent").append("<div>" + message.from + ":" + message.content + "</div>");
 }
 $(function () {
  connect();
  $("#send").click(function () {
  sendMsg();
  });
 });
 </script>
</head>
<body>
<div id="chat">
 <div id="chatsContent">
 </div>
 <div>
 请输入聊天内容
 <input type="text" id="content" placeholder="聊天内容">
 <input type="text" id="to" placeholder="目标用户">
 <button type="button" id="send">发送</button>
 </div>
</div>
</body>
</html>

暂结！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 如何解决SpringBoot集成百度UEditor图片上传后直接访问404

    如何解决SpringBoot集成百度UEditor图片上传后直接访问404

    在本篇文章里小编给大家整理的是一篇关于如何解决SpringBoot集成百度UEditor图片上传后直接访问404相关文章，需要的朋友们学习下。
    2019-11-11
  • Java 线程的生命周期完整实例分析

    Java 线程的生命周期完整实例分析

    这篇文章主要介绍了Java 线程的生命周期,结合完整实例形式分析了java线程周期相关的加锁、释放锁、阻塞、同步等原理与操作技巧,需要的朋友可以参考下
    2019-10-10
  • SpringBoot+MinIO实现文件切片极速详解

    SpringBoot+MinIO实现文件切片极速详解

    在现代Web应用中,文件上传是一个常见的需求,尤其是对于大文件的上传,如视频、音频或大型文档,所以本文就来为大家介绍一下如何使用Spring Boot和MinIO实现文件切片极速上传技术吧
    2023-12-12
  • SpringMVC中常用注解与使用方法详解

    SpringMVC中常用注解与使用方法详解

    这篇文章主要介绍了SpringMVC中常用注解与使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-05-05
  • 一文详解如何使用线程池来优化我们的应用程序

    一文详解如何使用线程池来优化我们的应用程序

    线程池是一种工具，但并不是适用于所有场景。在使用线程池时，我们需要根据应用程序的性质、计算资源的可用性和应用程序的需求进行适当的配置。本文主要介绍了如何使用线程池来优化我们的应用程序，需要的可以参考一下
    2023-04-04
  • MyBatis加载映射文件和动态代理的实现

    MyBatis加载映射文件和动态代理的实现

    本文主要介绍了MyBatis加载映射文件和动态代理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 在IDEA使用中directory和package的操作

    在IDEA使用中directory和package的操作

    这篇文章主要介绍了在IDEA使用中directory和package的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-02-02
  • Spring Cloud Config对特殊字符加密处理的方法详解

    Spring Cloud Config对特殊字符加密处理的方法详解

    这篇文章主要给大家介绍了关于Spring Cloud Config对特殊字符加密处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下
    2018-05-05
  • 关于Spring MVC同名参数绑定问题的解决方法

    关于Spring MVC同名参数绑定问题的解决方法

    Spring MVC中的参数绑定还是蛮重要的，最近在使用中遇到了同名参数绑定的问题，想着总结分享出来，下面这篇文章主要给大家介绍了关于Spring MVC同名参数绑定问题的解决方法，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • 记一次Maven项目改造成SpringBoot项目的过程实践

    记一次Maven项目改造成SpringBoot项目的过程实践

    本文主要介绍了Maven项目改造成SpringBoot项目的过程实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论