Spring Boot整合WebSocket 消息点对点发送

罪恶克星  金牌会员 | 2022-8-9 14:42:57 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 806|帖子 806|积分 2418

Spring Boot整合WebSocket 消息群发

 
添加依赖:
  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-security</artifactId>
  4. </dependency>
复制代码
 
配置Spring Security:

对Spring Security进行配置，添加两个用户，同时配置所有地址都认证后才能访问
  1. @Configuration
  2. public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
  4.     @Bean
  5.     PasswordEncoder passwordEncoder() {
  6.         return new BCryptPasswordEncoder();
  7.     }
  9.     @Override
  10.     protected void configure(AuthenticationManagerBuilder auth) throws Exception {
  11.         auth.inMemoryAuthentication()
  12.                 .withUser("admin")
  13.                 .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
  14.                 .roles("admin")
  15.                 .and()
  16.                 .withUser("sang")
  17.                 .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
  18.                 .roles("user");
  19.     }
  21.     @Override
  22.     protected void configure(HttpSecurity http) throws Exception {
  23.         http.authorizeRequests()
  24.                 .anyRequest().authenticated()
  25.                 .and()
  26.                 .formLogin().permitAll();
  27.     }
  28. }
复制代码
　　
改造WebSocket配置:
  1. @Configuration
  2. @EnableWebSocketMessageBroker // 开启WebSocket消息代理
  3. public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  5.     @Override
  6.     public void configureMessageBroker(MessageBrokerRegistry config) {
  7.         /*
  8.          * 表示设置消息代理的前缀，即如果消息的前缀是“/topic”，就会将消息转发给消息代理（broker），再由消息代理将消息广播给当前连接的客户端。
  9.          */
  10.         config.enableSimpleBroker("/topic", "/queue");
  11.         /*
  12.          * 表示配置一个或多个前缀，通过这些前缀过滤出需要被注解方法处理的消息
  13.          * 例如，前缀为“/app”的destination可以通过@MessageMapping注解的方法处理，
  14.          * 而其他destination（例如“/ topic”“/ queue”）将被直接交给broker处理。
  15.          */
  16.         config.setApplicationDestinationPrefixes("/app");
  17.     }
  19.     @Override
  20.     public void registerStompEndpoints(StompEndpointRegistry registry) {
  21.         /*
  22.          * 表示定义一个前缀为“/chat”的endPoint，并开启sockjs支持，
  23.          * sockjs可以解决浏览器对WebSocket的兼容性问题，
  24.          * 客户端将通过这里配置的URL来建立WebSocket连接。
  25.          */
  26.         registry.addEndpoint("/chat").withSockJS();
  27.     }
  29. }
复制代码
这里的修改是在config.enableSimpleBroker("/topic");方法的基础上又增加了一个broker前缀“/queue”，方便对群发消息和点对点消息进行管理。
 
配置Controller:

对WebSocket的Controller进行改造
  1. @Controller
  2. public class GreetingController {
  4.     @Autowired
  5.     SimpMessagingTemplate messagingTemplate;
  7.     @MessageMapping("/hello") // 用来接收“/app/hello”路径发送来的消息 在注解方法中对消息进行处理后，再将消息转发到@SendTo定义的路径上
  8.     @SendTo("/topic/greetings") // @SendTo路径是一个前缀为“/topic”的路径，因此该消息将被交给消息代理broker，再由broker进行广播。
  9.     public Message greeting(Message message) {
  10.         return message;
  11.     }
  13.     /**
  14.      * 点对点的消息发送
  15.      *
  16.      * @param principal 用来获取当前登录用户的信息
  17.      * @param chat      客户端发送来的消息
  18.      */
  19.     @MessageMapping("/chat") // 注解表示来自“/app/chat”路径的消息将被chat方法处理
  20.     public void chat(Principal principal, Chat chat) {
  21.         String from = principal.getName(); // 首先获取当前用户的用户名
  22.         chat.setFrom(from); // 设置给chat对象的from属性
  23.         /*
  24.          * 再将消息发送出去，发送的目标用户就是chat对象的to属性值
  25.          * 消息发送使用的方法是convertAndSendToUser，该方法内部调用了convertAndSend方法，并对消息路径做了处理
  26.          * chat是一个普通的JavaBean，to属性表示消息的目标用户，from表示消息从哪里来，content则是消息的主体内容
  27.          */
  28.         messagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);
  29.     }
  31. }
复制代码
　　
创建在线聊天页面:

在resources/static目录下创建onlinechat.html页面作为在线聊天页面
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>单聊</title>
  6.    
  7.    
  8.    
  9.    
  10. </head>
  11. <body>
  13.    
  14.    
  15.    
  16.         请输入聊天内容：
  17.         <input type="text" id="content" placeholder="聊天内容">
  18.         目标用户：
  19.         <input type="text" id="to" placeholder="目标用户">
  20.         <button id="send" type="button">发送</button>
  21.    
  23. </body>
  24. </html>
复制代码
这个页面和chat.html页面基本类似，不同的是，为了演示方便，这里需要用户手动输入目标用户名。另外，还有一个chat.js文件
  1. var stompClient = null;
  3. function connect() {
  4.     var socket = new SockJS('/chat');
  5.     stompClient = Stomp.over(socket);
  6.     stompClient.connect({}, function (frame) {
  7.         // 连接成功后，订阅的地址为“/user/queue/chat”，该地址比服务端配置的地址多了“/user”前缀，这是因为SimpMessagingTemplate类中自动添加了路径前缀。
  8.         stompClient.subscribe('/user/queue/chat', function (chat) {
  9.             showGreeting(JSON.parse(chat.body));
  10.         });
  11.     });
  12. }
  14. function sendMsg() {
  15.     // 聊天消息发送路径为“/app/chat”
  16.     stompClient.send("/app/chat", {},
  17.         JSON.stringify({
  18.             'content': $("#content").val(),
  19.             'to': $("#to").val() // 发送的消息内容中有一个to字段，该字段用来描述消息的目标用户
  20.         }));
  21. }
  23. function showGreeting(message) {
  24.     $("#chatsContent")
  25.         .append("" + message.from + ":" + message.content + "");
  26. }
  28. $(function () {
  29.     connect();
  30.     $("#send").click(function () {
  31.         sendMsg();
  32.     });
  33. });
复制代码
　　
测试:

接下来启动Spring Boot项目进行测试，在浏览器中输入http://localhost:8081/onlinechat.html
 
文章来源: Spring Boot+Vue全栈开发实战 - 11.3 Spring Boot整合WebSocket
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

罪恶克星

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表