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>

暂结!

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

(0)

相关推荐

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

    一.添加依赖 加入前端需要用到的依赖: <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <

  • SpringBoot的WebSocket实现单聊群聊

    本文实例为大家分享了SpringBoot的WebSocket实现单聊群聊,供大家参考,具体内容如下 说在开头 在HTTP协议中,所有的请求都是由客户端发送给服务端,然后服务端发送请求 要实现服务器向客户端推送消息有几种methods: 1.轮询 大量无效请求,浪费资源 2.长轮询 有新数据再推送,但这会导致连接超时,有一定隐患 3.Applet和Flash 过时,安全隐患,兼容性不好 消息群发 创建新项目: 添加依赖: <dependency> <groupId>org.sprin

  • SpringBoot+STOMP协议实现私聊、群聊

    一.为什么需要STOMP? WebSocket 协议是一种相当低级的协议.它定义了如何将字节流转换为帧.帧可以包含文本或二进制消息.由于消息本身不提供有关如何路由或处理它的任何其他信息,因此很难在不编写其他代码的情况下实现更复杂的应用程序.幸运的是,WebSocket 规范允许在更高的应用程序级别上使用子协议. 另外,单单使用WebSocket完成群聊.私聊功能时,需要自己管理session信息,通过STOMP协议时,spring已经封装好,开发者只需要关注自己的主题.订阅关系即可. 二.STO

  • Nodejs + Websocket 指定发送及群聊的实现

     目的 通过nodejs + ws (Websocket) 实现点对点发送及群聊发送 项目搭建直接跳过,这里列举一下用到的插件 yarn add ws WebSocket 话不多说,直接上码 对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用, webSocket 点对点也好,群聊也好,主要是用到一个方法 clients 它的作用就是存储了连接, 我们可以通过对每一个连接增加标识,然后根据接收到的信息进行解

  • springboot整合websocket实现群聊思路代码详解

    实现思路 发送者向服务器发送大家早上好.其它客户端可以收到对应消息. 项目展示 通过springboot引入websocket,实现群聊,通过在线websocket测试进行展示. 核心代码 pom引入jar <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2

  • 使用springboot整合websocket实现群聊教程

    目录 先上效果图: 先来准备工作导入依赖 导入依赖后扫描启用 接收前端传回数据 其中重点就是4个注解 **@OnOpen,@OnClose,@OnMessage,@OnError** 前端页面代码 模板引擎代码如下 最后效果图如下 先上效果图: 相对来说更好看那么一点但是,实现代码都是一样的. 先来准备工作导入依赖 <!--websocket依赖--> <dependency> <groupId>org.springframework.boot</groupId&

  • Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex).WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考:如何理解 TCP/IP, SPDY, WebSocket 三者之间的关系? 今天的重点是讲如何在Android中脱离WebView使用WebSocket,而不是在Web浏览器

  • 使用WebSocket实现即时通讯(一个群聊的聊天室)

    随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据. 传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据:这种客户端是主动方,服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦

  • Vue通过配置WebSocket并实现群聊功能

    原文链接:https://juejin.im/post/5e08d53a6fb9a0162b7f4bad 写JQuery项目时,使用websocket很简单,不用去考虑模块化,组件之间的访问问题,面向文档编程即可,在Vue项目中使用时,远远没有想象中的那么简单,需要考虑很多场景,本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置,用其实现群聊功能.先看下最终实现的效果 安装依赖 本文中对于 vue-native-websocket 库的讲解,项目中配置了vu

  • Asp.net SignalR应用并实现群聊功能

    ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据.(来自官方介绍.) SignalR官网 -1.写这篇的原因 在上篇文章B/S(Web)实时通讯解决方案中,并没有详情介绍SignalR,所以另起一篇专门介绍SignalR,本文的侧重点是Hub功能. 0.先看最终实现效果 github

随机推荐