一、添加依赖

加入前端需要用到的依赖：

      org.webjars
      sockjs-client
      1.1.2
    
    
      org.webjars
      jquery
      3.4.1
    
    
      org.webjars
      stomp-websocket
      2.3.3
    
    
      org.webjars
      webjars-locator-core
    

二、配置 WebSocketConfig

@Configuration
//开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  /**
   * 配置消息代理
   * @param registry
   */
  @Override
  public void configureMessageBroker(MessageBrokerRegistry registry) {
    //定义消息代理的前缀
    registry.enableSimpleBroker("/topic");
    //配置一个或者多个前缀，过滤出需要代理方法处理的消息
    registry.setApplicationDestinationPrefixes("/app");
  }

  /**
   * 注册STOMP协议的节点，并指定映射的URL
   * @param registry
   */
  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    //注册STOMP协议节点，同时指定使用 SockJS 协议
    registry.addEndpoint("/chat").withSockJS();
  }
}

三、配置 Message 类

Message 类用来接收浏览器发送的信息

public class Message {
  private String name;
  private String content;

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getContent() {
    return content;
  }

  public void setContent(String content) {
    this.content = content;
  }
}

四、配置控制器 GreetingController

@Controller
public class GreetingController {
  /**
   * 这个方法用来处理浏览器发送来的消息，对其进行处理
   * @param message
   * @return
   */
  //@MessageMapping 类似 @RequestMapping
  @MessageMapping("/hello")
  //处理完之后对其进行转发到 SendTo 中的路径
  @SendTo("/topic/greetings")
  public Message greeting(Message message) {
    return message;
  }
}

这里也可以使用 SimpMessagingTemplate 来进行设置：

@Controller
public class GreetingController {
  @Autowired
  SimpMessagingTemplate simpMessagingTemplate;
  @MessageMapping("/hello")
  public void greeting(Message message) {
    simpMessagingTemplate.convertAndSend("/topic/greetings", message);
  }
}

SimpMessagingTemplate这个类主要是实现向浏览器发送消息的功能。

五、设置前端页面 chat.html

  
  
  
  
  




  

    
请输入用户名
    

  
  

    

    

  


  

    

      
请输入聊天内容
      

      

    
  
  
群聊进行中...

六、登录测试

打开两个浏览器，实现群聊功能：