罪恶克星 发表于 2022-8-9 14:42:57

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

Spring Boot整合WebSocket 消息群发

 
添加依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency> 
配置Spring Security:

对Spring Security进行配置,添加两个用户,同时配置所有地址都认证后才能访问
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    PasswordEncoder passwordEncoder() {
      return new BCryptPasswordEncoder();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
      auth.inMemoryAuthentication()
                .withUser("admin")
                .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
                .roles("admin")
                .and()
                .withUser("sang")
                .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
                .roles("user");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
      http.authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .formLogin().permitAll();
    }
}  
改造WebSocket配置:

@Configuration
@EnableWebSocketMessageBroker // 开启WebSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
      /*
         * 表示设置消息代理的前缀,即如果消息的前缀是“/topic”,就会将消息转发给消息代理(broker),再由消息代理将消息广播给当前连接的客户端。
         */
      config.enableSimpleBroker("/topic", "/queue");
      /*
         * 表示配置一个或多个前缀,通过这些前缀过滤出需要被注解方法处理的消息
         * 例如,前缀为“/app”的destination可以通过@MessageMapping注解的方法处理,
         * 而其他destination(例如“/ topic”“/ queue”)将被直接交给broker处理。
         */
      config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
      /*
         * 表示定义一个前缀为“/chat”的endPoint,并开启sockjs支持,
         * sockjs可以解决浏览器对WebSocket的兼容性问题,
         * 客户端将通过这里配置的URL来建立WebSocket连接。
         */
      registry.addEndpoint("/chat").withSockJS();
    }

}这里的修改是在config.enableSimpleBroker("/topic");方法的基础上又增加了一个broker前缀“/queue”,方便对群发消息和点对点消息进行管理。
 
配置Controller:

对WebSocket的Controller进行改造
@Controller
public class GreetingController {

    @Autowired
    SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/hello") // 用来接收“/app/hello”路径发送来的消息 在注解方法中对消息进行处理后,再将消息转发到@SendTo定义的路径上
    @SendTo("/topic/greetings") // @SendTo路径是一个前缀为“/topic”的路径,因此该消息将被交给消息代理broker,再由broker进行广播。
    public Message greeting(Message message) {
      return message;
    }

    /**
   * 点对点的消息发送
   *
   * @param principal 用来获取当前登录用户的信息
   * @param chat      客户端发送来的消息
   */
    @MessageMapping("/chat") // 注解表示来自“/app/chat”路径的消息将被chat方法处理
    public void chat(Principal principal, Chat chat) {
      String from = principal.getName(); // 首先获取当前用户的用户名
      chat.setFrom(from); // 设置给chat对象的from属性
      /*
         * 再将消息发送出去,发送的目标用户就是chat对象的to属性值
         * 消息发送使用的方法是convertAndSendToUser,该方法内部调用了convertAndSend方法,并对消息路径做了处理
         * chat是一个普通的JavaBean,to属性表示消息的目标用户,from表示消息从哪里来,content则是消息的主体内容
         */
      messagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);
    }

}  
创建在线聊天页面:

在resources/static目录下创建onlinechat.html页面作为在线聊天页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单聊</title>
   
   
   
   
</head>
<body>

   
   
   
      请输入聊天内容:
      <input type="text" id="content" placeholder="聊天内容">
      目标用户:
      <input type="text" id="to" placeholder="目标用户">
      <button id="send" type="button">发送</button>
   

</body>
</html>这个页面和chat.html页面基本类似,不同的是,为了演示方便,这里需要用户手动输入目标用户名。另外,还有一个chat.js文件
var stompClient = null;

function connect() {
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      // 连接成功后,订阅的地址为“/user/queue/chat”,该地址比服务端配置的地址多了“/user”前缀,这是因为SimpMessagingTemplate类中自动添加了路径前缀。
      stompClient.subscribe('/user/queue/chat', function (chat) {
            showGreeting(JSON.parse(chat.body));
      });
    });
}

function sendMsg() {
    // 聊天消息发送路径为“/app/chat”
    stompClient.send("/app/chat", {},
      JSON.stringify({
            'content': $("#content").val(),
            'to': $("#to").val() // 发送的消息内容中有一个to字段,该字段用来描述消息的目标用户
      }));
}

function showGreeting(message) {
    $("#chatsContent")
      .append("" + message.from + ":" + message.content + "");
}

$(function () {
    connect();
    $("#send").click(function () {
      sendMsg();
    });
});  
测试:

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Spring Boot整合WebSocket 消息点对点发送