天天玩微信,Spring Boot 開發私有即時通訊系統瞭解一下
阿新 • • 發佈:2019-12-31
1/ 概述
利用Spring Boot作為基礎框架,Spring Security作為安全框架,WebSocket作為通訊框架,實現點對點聊天和群聊天。
2/ 所需依賴
Spring Boot 版本 1.5.3,使用MongoDB儲存資料(非必須),Maven依賴如下:
<properties>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>
<dependencies>
<!-- WebSocket依賴,移除Tomcat容器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- 使用Undertow容器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-undertow</artifactId>
</dependency>
<!-- Spring Security 框架 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<!-- MongoDB資料庫 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<!-- Thymeleaf 模版引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.16</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.30</version>
</dependency>
<!-- 靜態資源 -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>sockjs-client</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>stomp-websocket</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>複製程式碼
配置檔案內容:
server:
port: 80
# 若使用MongoDB則配置如下引數
spring:
data:
mongodb:
uri: mongodb://username:[email protected]:27017
authentication-database: admin
database: chat複製程式碼
大致程式結構,僅供參考:
程式結構
3/ 建立程式啟動類,啟用WebSocket
使用@EnableWebSocket
註解
@SpringBootApplication
@EnableWebSocket
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}複製程式碼
4/ 配置Spring Security
此章節省略。(配置好Spring Security,使用者能正常登入即可)可以參考:Spring Boot 全棧開發:使用者安全
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、超級管理員。群訊息測試,超級管理員群發訊息:
超級管理員
Anoyi
Jock
點對點訊息測試,Anoyi給Jock傳送訊息,只有Jock收到訊息,Anoyi和超級管理員收不到訊息:
Jock
超級管理員
Anoyi
9/ 輕量級DEMO(完整可執行程式碼)
Spring Boot 開發私有即時通訊系統(WebSocket)(續)
10/ 參考文獻
- spring-mongodb 官方檔案
- Spring Framework 官方檔案
- Spring Guide - stomp websocket
© 著作權歸作者所有,轉載或內容合作請聯絡作者
有任何問題,請留言告訴我們哈。
● Spring Boot 定製 parent 快速構建應用
● Spring Boot 日誌處理你還在用Logback?
● 【雙11狂歡的背後】微服務註冊中心如何承載大型系統的千萬級訪問?
本文由部落格一文多發平臺 OpenWrite 釋出!