SpringBoot整合WebSocket

1. WebSocket实现在线群聊
2. WebSocket实现在线单聊
3. WebSocket实现在线群聊

 

---

创建项目，添加web依赖，添加Messaging下的web Socket依赖 在pom中添加前端库依赖

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>sockjs-clinet</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实现WebSocketMessageBrokerConfigurer

@Configuration
@EnalbeWebSockeMessageBroker  //开启消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
        
    }
    //建立连接点
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }
}

 创建一个Bean，Messgae对象

public class Message{
    private String name;
    private String content;
    get/set()
    ......
}

 创建一个Controller

@Controller
public class GreetingController {
   @MessageMapping("/hello") //获取浏览器请求的消息
   @SendTo("/topic/greetings")  //消息在方法里面处理完之后再转发
     public Message greeting(Message message){
        return message;
    }
 //也可以用下面这种
    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;
  @MessageMapping("/hello") //获取浏览器请求的消息
     public void greeting(Message message){
        simpMessagingTemplate.convertAndSend("/topic/greetings",message);
    }
    
    
}

 创建一个html聊天页面

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

<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 stomClient=null;
     function connect(){
         if(!$("#name").val()){
             return;
         }
         var scoket = new SockJS('/chat');
         stomClient=stomp/over(socket);
         stomClient.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>                 

 

• WebSocket实现在线单聊(消息的点对点发送，引入用户的概念)

再pom中引入

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

 创建SecurityConfig配置

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Bean
    PasswordEncoder passwordEncoder(){
        return NoOpPasswordEncoder.getInstance();
    }
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
        .withUser("zenghao")
        .password("123")
        .roles("admin")
        .and()
         .withUser("zahgnsan")
        .password("123")
        .roles("user");
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        thhp.authorizeReuqests()
                .anyRequest().authenticated()
                .and()
                .forimLogin().permitAll();
    }
}

 改造上面WebSocketConfig

@Configuration
@EnalbeWebSockeMessageBroker  //开启消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic","/queue"); //发送到queue就实现单聊的效果
        registry.setApplicationDestinationPrefixes("/app");
        
    }
    //建立连接点
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }
}

 创建一个Chat对象

public class Chat{
    private String from; //消息从哪来
    private String content;//消息内容
    private String to;//消息要发到那里去
    get()/set()
    .......
}

 创建一个Controller

@Controller
public class GreetingController {
 @AutoWired
 SimpMessagingTemplate simpMessagingTemplate;
 
 @MessageMapping("/chat")
 public void chat(Principal principal,Chat chat) {
     chat.setFrom(principal.getName()) //谁登录的就是谁
     simpMessagingTemplate.convertAndSendToUser(char.getTo(),"/queue/chat",chat); 
 } 
}

---