SpringBoot 實戰 (十七) | 整合 WebSocket 實現聊天室
微信公眾號：一個優秀的廢人。如有問題，請後臺留言，反正我也不會聽。
前言
昨天那篇介紹了 WebSocket 實現廣播，也即伺服器端有消息時，將消息發送給所有連接了當前 endpoint 的瀏覽器。但這無法解決消息由誰發送，又由誰接收的問題。所以，今天寫一篇實現一對一的聊天室。
今天這一篇建立在昨天那一篇的基礎之上，為便於更好理解今天這一篇，推薦先閱讀：「SpringBoot 整合WebSocket 實現廣播消息 」
準備工作
- Spring Boot 2.1.3 RELEASE
- Spring Security 2.1.3 RELEASE
- IDEA
- JDK8
pom 依賴
因聊天室涉及到用戶相關，所以在上一篇基礎上引入 Spring Security 2.1.3 RELEASE 依賴
<!-- Spring Security 依賴 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
Spring Security 的配置
雖說涉及到 Spring Security ，但鑒於篇幅有限，這裡只對這個項目相關的部分進行介紹，具體的 Spring Security 教程，後面會出。
這裡的 Spring Security 配置很簡單，具體就是設置登錄路徑、設置安全資源以及在內存中創建用戶和密碼，密碼需要注意加密，這裡使用 BCrypt 加密演算法在用戶登錄時對密碼進行加密。 代碼注釋很詳細，不多說。
package com.nasus.websocket.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
@Configuration
// 開啟Spring Security的功能
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// 設置 SpringSecurity 對 / 和 "/login" 路徑不攔截
.mvcMatchers("/","/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
// 設置 Spring Security 的登錄頁面訪問路徑為/login
.loginPage("/login")
// 登錄成功後轉向 /chat 路徑
.defaultSuccessUrl("/chat")
.permitAll()
.and()
.logout()
.permitAll();
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
// 在內存中分配兩個用戶 nasus 和 chenzy ，用戶名和密碼一致
// BCryptPasswordEncoder() 是 Spring security 5.0 中新增的加密方式
// 登陸時用 BCrypt 加密方式對用戶密碼進行處理。
.passwordEncoder(new BCryptPasswordEncoder())
.withUser("nasus")
// 保證用戶登錄時使用 bcrypt 對密碼進行處理再與內存中的密碼比對
.password(new BCryptPasswordEncoder().encode("nasus")).roles("USER")
.and()
// 登陸時用 BCrypt 加密方式對用戶密碼進行處理。
.passwordEncoder(new BCryptPasswordEncoder())
.withUser("chenzy")
// 保證用戶登錄時使用 bcrypt 對密碼進行處理再與內存中的密碼比對
.password(new BCryptPasswordEncoder().encode("chenzy")).roles("USER");
}
@Override
public void configure(WebSecurity web) throws Exception {
// /resource/static 目錄下的靜態資源，Spring Security 不攔截
web.ignoring().antMatchers("/resource/static**");
}
}
WebSocket 的配置
在上一篇的基礎上另外註冊一個名為 "/endpointChat" 的節點，以供用戶訂閱，只有訂閱了該節點的用戶才能接收到消息；然後，再增加一個名為 "/queue" 消息代理。
@Configuration
// @EnableWebSocketMessageBroker 註解用於開啟使用 STOMP 協議來傳輸基於代理（MessageBroker）的消息，這時候控制器(controller)
// 開始支持@MessageMapping,就像是使用 @requestMapping 一樣。
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
//註冊一個名為 /endpointNasus 的 Stomp 節點(endpoint),並指定使用 SockJS 協議。
registry.addEndpoint("/endpointNasus").withSockJS();
//註冊一個名為 /endpointChat 的 Stomp 節點(endpoint),並指定使用 SockJS 協議。
registry.addEndpoint("/endpointChat").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
// 廣播式配置名為 /nasus 消息代理 , 這個消息代理必須和 controller 中的 @SendTo 配置的地址前綴一樣或者全匹配
// 點對點增加一個 /queue 消息代理
registry.enableSimpleBroker("/queue","/nasus/getResponse");
}
}
控制器 controller
指定發送消息的格式以及模板。詳情見，代碼注釋。
@Autowired
//使用 SimpMessagingTemplate 向瀏覽器發送信息
private SimpMessagingTemplate messagingTemplate;
@MessageMapping("/chat")
public void handleChat(Principal principal,String msg){
// 在 SpringMVC 中，可以直接在參數中獲得 principal，principal 中包含當前用戶信息
if (principal.getName().equals("nasus")){
// 硬編碼，如果發送人是 nasus 則接收人是 chenzy 反之也成立。
// 通過 messageingTemplate.convertAndSendToUser 方法向用戶發送信息，參數一是接收消息用戶，參數二是瀏覽器訂閱地址，參數三是消息本身
messagingTemplate.convertAndSendToUser("chenzy",
"/queue/notifications",principal.getName()+"-send:" + msg);
} else {
messagingTemplate.convertAndSendToUser("nasus",
"/queue/notifications",principal.getName()+"-send:" + msg);
}
}
登錄頁面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<meta charset="UTF-8" />
<head>
<title>登陸頁面</title>
</head>
<body>
<div th:if="${param.error}">
無效的賬號和密碼
</div>
<div th:if="${param.logout}">
你已註銷
</div>
<form th:action="@{/login}" method="post">
<div><label> 賬號 : <input type="text" name="username"/> </label></div>
<div><label> 密碼: <input type="password" name="password"/> </label></div>
<div><input type="submit" value="登陸"/></div>
</form>
</body>
</html>
聊天頁面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<head>
<title>Home</title>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>
</head>
<body>
<p>
聊天室
</p>
<form id="nasusForm">
<textarea rows="4" cols="60" name="text"></textarea>
<input type="submit"/>
</form>
<script th:inline="javascript">
$(#nasusForm).submit(function(e){
e.preventDefault();
var text = $(#nasusForm).find(textarea[name="text"]).val();
sendSpittle(text);
});
// 連接 SockJs 的 endpoint 名稱為 "/endpointChat"
var sock = new SockJS("/endpointChat");
var stomp = Stomp.over(sock);
stomp.connect(guest, guest, function(frame) {
// 訂閱 /user/queue/notifications 發送的消息，這裡與在控制器的
// messagingTemplate.convertAndSendToUser 中訂閱的地址保持一致
// 這裡多了 /user 前綴，是必須的，使用了 /user 才會把消息發送到指定用戶
stomp.subscribe("/user/queue/notifications", handleNotification);
});
function handleNotification(message) {
$(#output).append("<b>Received: " + message.body + "</b><br/>")
}
function sendSpittle(text) {
stomp.send("/chat", {}, text);
}
$(#stop).click(function() {sock.close()});
</script>
<div id="output"></div>
</body>
</html>
頁面控制器 controller
@Controller
public class ViewController {
@GetMapping("/nasus")
public String getView(){
return "nasus";
}
@GetMapping("/login")
public String getLoginView(){
return "login";
}
@GetMapping("/chat")
public String getChatView(){
return "chat";
}
}
測試
預期結果應該是：兩個用戶登錄系統，可以互相發送消息。但是同一個瀏覽器的用戶會話的 session 是共享的，這裡需要在 Chrome 瀏覽器再添加一個用戶。
具體操作在 Chrome 的 設置-->管理用戶-->添加用戶:
兩個用戶分別訪問 http://localhost:8080/login 登錄系統，跳轉至聊天界面：
相互發送消息：
完整代碼
https://github.com/turoDog/Demo/tree/master/springboot_websocket_demo
如果覺得對你有幫助，請給個 Star 再走唄，非常感謝。
後語
如果本文對你哪怕有一丁點幫助，請幫忙點好看。你的好看是我堅持寫作的動力。
另外，關注之後在發送 1024 可領取免費學習資料。
資料詳情請看這篇舊文：
一個優秀的廢人：C++、Java、Python、Linux、Go、前端、演算法資料分享
推薦閱讀：