189 8069 5689

SpringBoot开发私有即时通信系统(WebSocket)

1/ 概述

目前成都创新互联公司已为上千家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、徐水网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

利用Spring Boot作为基础框架,Spring Security作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天。

2/ 所需依赖

Spring Boot 版本 1.5.3,使用MongoDB存储数据(非必须),Maven依赖如下:


 1.8
 3.0.0.RELEASE
 2.0.0
 

 

 
 
  org.springframework.boot
  spring-boot-starter-websocket
  
  
   org.springframework.boot
   spring-boot-starter-tomcat
  
  
 

 
 
  org.springframework.boot
  spring-boot-starter-undertow
 

 
 
  org.springframework.boot
  spring-boot-starter-security
 

 
 
  org.springframework.boot
  spring-boot-starter-data-mongodb
 

 
 
  org.springframework.boot
  spring-boot-starter-thymeleaf
 

 
  org.projectlombok
  lombok
  1.16.16
 

 
  com.alibaba
  fastjson
  1.2.30
 

 
 
  org.webjars
  webjars-locator
 
 
  org.webjars
  sockjs-client
  1.0.2
 
 
  org.webjars
  stomp-websocket
  2.3.3
 
 
  org.webjars
  bootstrap
  3.3.7
 
 
  org.webjars
  jquery
  3.1.0
 

 

配置文件内容:

server:
 port: 80

# 若使用MongoDB则配置如下参数
spring:
 data:
 mongodb:
  uri: mongodb://username:password@172.25.11.228:27017
  authentication-database: admin
  database: chat

大致程序结构,仅供参考:

Spring Boot 开发私有即时通信系统(WebSocket)

3/ 创建程序启动类,启用WebSocket

使用@EnableWebSocket注解

@SpringBootApplication
@EnableWebSocket
public class Application {

 public static void main(String[] args) {
 SpringApplication.run(Application.class, args);
 }

}

4/ 配置Spring Security

此章节省略。(配置好Spring Security,用户能正常登录即可)

5/ 配置Web Socket(结合第7节的JS看)

@Configuration
@EnableWebSocketMessageBroker
@Log4j
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

 // 此处可注入自己写的Service

 @Override
 public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
 // 客户端与服务器端建立连接的点
 stompEndpointRegistry.addEndpoint("/any-socket").withSockJS();
 }

 @Override
 public void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) {
 // 配置客户端发送信息的路径的前缀
 messageBrokerRegistry.setApplicationDestinationPrefixes("/app");
 messageBrokerRegistry.enableSimpleBroker("/topic");
 }

 @Override
 public void configureWebSocketTransport(final WebSocketTransportRegistration registration) {
 registration.addDecoratorFactory(new WebSocketHandlerDecoratorFactory() {
  @Override
  public WebSocketHandler decorate(final WebSocketHandler handler) {
  return new WebSocketHandlerDecorator(handler) {
   @Override
   public void afterConnectionEstablished(final WebSocketSession session) throws Exception {
   // 客户端与服务器端建立连接后,此处记录谁上线了
   String username = session.getPrincipal().getName();
   log.info("online: " + username);
   super.afterConnectionEstablished(session);
   }

   @Override
   public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
   // 客户端与服务器端断开连接后,此处记录谁下线了
   String username = session.getPrincipal().getName();
   log.info("offline: " + username);
   super.afterConnectionClosed(session, closeStatus);
   }
  };
  }
 });
 super.configureWebSocketTransport(registration);
 }
}

6/ 点对点消息,群消息

@Controller
@Log4j
public class ChatController {

 @Autowired
 private SimpMessagingTemplate template;

 // 注入其它Service

 // 群聊天
 @MessageMapping("/notice")
 public void notice(Principal principal, String message) { 
 // 参数说明 principal 当前登录的用户, message 客户端发送过来的内容
 // principal.getName() 可获得当前用户的username 

 // 发送消息给订阅 "/topic/notice" 且在线的用户
 template.convertAndSend("/topic/notice", message); 
 }

 // 点对点聊天
 @MessageMapping("/chat")
 public void chat(Principal principal, String message){
 // 参数说明 principal 当前登录的用户, message 客户端发送过来的内容(应该至少包含发送对象toUser和消息内容content)
 // principal.getName() 可获得当前用户的username

 // 发送消息给订阅 "/user/topic/chat" 且用户名为toUser的用户
 template.convertAndSendToUser(toUser, "/topic/chat", content);
 }

}

7/ 客户端与服务器端交互

 var stompClient = null;

 function connect() {
  var socket = new SockJS('/any-socket');
  stompClient = Stomp.over(socket);
  stompClient.connect({}, function (frame) {
   // 订阅 /topic/notice 实现群聊
   stompClient.subscribe('/topic/notice', function (message) {
    showMessage(JSON.parse(message.body));
   });
   // 订阅 /user/topic/chat 实现点对点聊
   stompClient.subscribe('/user/topic/chat', function (message) {
    showMessage(JSON.parse(message.body));
   });
  });
 }

 function showMessage(message) {
  // 处理消息在页面的显示
 }

 $(function () {
  // 建立websocket连接
  connect();
  // 发送消息按钮事件
  $("#send").click(function () {
   if (target == "TO_ALL"){
    // 群发消息
    // 匹配后端ChatController中的 @MessageMapping("/notice")
    stompClient.send("/app/notice", {}, '消息内容');
   }else{
    // 点对点消息,消息中必须包含对方的username
    // 匹配后端ChatController中的 @MessageMapping("/chat")
    var content = "{'content':'消息内容','receiver':'anoy'}";
    stompClient.send("/app/chat", {}, content);
   }
  });
 });

8/ 效果测试

登录三个用户:Anoyi、Jock、超级管理员。

群消息测试,超级管理员群发消息:Spring Boot 开发私有即时通信系统(WebSocket)

Spring Boot 开发私有即时通信系统(WebSocket)

Spring Boot 开发私有即时通信系统(WebSocket)

点对点消息测试,Anoyi给Jock发送消息,只有Jock收到消息,Anoyi和超级管理员收不到消息:

Spring Boot 开发私有即时通信系统(WebSocket)

Spring Boot 开发私有即时通信系统(WebSocket)

Spring Boot 开发私有即时通信系统(WebSocket)

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


网页标题:SpringBoot开发私有即时通信系统(WebSocket)
路径分享:http://cdxtjz.com/article/jdipce.html

其他资讯