文地址:https://dwz.cn/Z1O56dnu
作者:Rude3Knife
本文中搭建了一個簡易的多人聊天室,使用了WebSocket的基礎特性。
源代碼來自老外的一篇好文:
https://www.callicoder.com/spring-boot-websocket-chat-example/
本文內容摘要:
此外,在下一篇文章中,我們將做到:
WebSocket多人在線聊天室
本文工程源代碼:
https://github.com/qqxx6661/springboot-websocket-demo
新建工程
我們新建一個SpringBoot2的項目工程,在默認依賴中,添加websocket依賴:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
WebSocket 配置
我們先來設置websocket的配置,新建config文件夾,在里面新建類WebSocketConfig
import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.*; @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } }
代碼解釋:
@EnableWebSocketMessageBroker用于啟用我們的WebSocket服務器。
我們實現了WebSocketMessageBrokerConfigurer接口,并實現了其中的方法。
在第一種方法中,我們注冊一個websocket端點,客戶端將使用它連接到我們的websocket服務器。
withSockJS()是用來為不支持websocket的瀏覽器啟用后備選項,使用了SockJS。
方法名中的STOMP是來自Spring框架STOMP實現。STOMP代表簡單文本導向的消息傳遞協議。它是一種消息傳遞協議,用于定義數據交換的格式和規則。為啥我們需要這個東西?因為WebSocket只是一種通信協議。它沒有定義諸如以下內容:如何僅向訂閱特定主題的用戶發送消息,或者如何向特定用戶發送消息。我們需要STOMP來實現這些功能。
在configureMessageBroker方法中,我們配置一個消息代理,用于將消息從一個客戶端路由到另一個客戶端。
第一行定義了以“/app”開頭的消息應該路由到消息處理方法(之后會定義這個方法)。
第二行定義了以“/topic”開頭的消息應該路由到消息代理。消息代理向訂閱特定主題的所有連接客戶端廣播消息。
在上面的示例中,我們使用的是內存中的消息代理。
之后也可以使用RabbitMQ或ActiveMQ等其他消息代理。
創建 ChatMessage 實體
ChatMessage用來在客戶端和服務端中交互
我們新建model文件夾,創建實體類ChatMessage。
實體中,有三個字段:
類型有三種:
創建Controller來接收和發送消息
創建controller文件夾,在controller文件夾添加類ChatController
代碼解釋:
我們在websocket配置中,從目的地以/app開頭的客戶端發送的所有消息都將路由到這些使用@MessageMapping注釋的消息處理方法。
例如,具有目標/app/chat.sendMessage的消息將路由到sendMessage()方法,并且具有目標/app/chat.addUser的消息將路由到addUser()方法
添加WebSocket事件監聽
完成了上述代碼后,我們還需要對socket的連接和斷連事件進行監聽,這樣我們才能廣播用戶進來和出去等操作。
創建listener文件夾,新建WebSocketEventListener類
代碼解釋:
我們已經在ChatController中定義的addUser()方法中廣播了用戶加入事件。因此,我們不需要在SessionConnected事件中執行任何操作。
在SessionDisconnect事件中,編寫代碼用來從websocket會話中提取用戶名,并向所有連接的客戶端廣播用戶離開事件。
創建前端聊天室頁面
我們在src/main/resources文件下創建前端文件,結構類似這樣:
static └── css └── main.css └── js └── main.js └── index.html
1. HTML文件 index.html
HTML文件包含用于顯示聊天消息的用戶界面。它包括sockjs和stomp 兩個js庫。
SockJS是一個WebSocket客戶端,它嘗試使用本機WebSockets,并為不支持WebSocket的舊瀏覽器提供支持。STOMP JS是javascript的stomp客戶端。
筆者在文件里使用了國內的CDN源
2. JavaScript main.js
添加連接到websocket端點以及發送和接收消息所需的javascript。
代碼解釋:
connect()函數使用SockJS和stomp客戶端連接到我們在Spring Boot中配置的/ws端點。
成功連接后,客戶端訂閱/topic/public,并通過向/app/chat.addUser目的地發送消息將該用戶的名稱告知服務器。
stompClient.subscribe()函數采用一種回調方法,只要消息到達訂閱主題,就會調用該方法。
其它的代碼用于在屏幕上顯示和格式化消息。
3. CSS main.css
整個項目結構如下:
啟動
啟動SpringBoot項目
效果入下:
補充:使用RabbitMQ代替內存作為消息代理
添加依賴:
然后將WebSocketConfig類中configureMessageBroker方法改為使用RabbitMq,完成!
如此一來,便可以通過RabbitMq進行消息的訂閱。
使你完全不懂html,javascript,css,也能做出漂亮的網頁,這在以前是不可想象的,而現在確是可行的,因為有這樣一個項目:openUI。
openUI不僅僅能生成html頁面,還能生成自適應網頁,適配電腦端和手機端,還能把頁面代碼轉換為React和vue等。
第1步,創建Python虛擬環境。
pyenv virtualenv 3.12.2 openui
pyenv local openui
第2步,你需要到github下載這個項目的源代碼。
git clone https://github.com/wandb/openui
第3步,進入這個目錄
cd openui/backend
第4步,安裝依賴環境
pip install .
第5步,導入你的openAI的apikey
export OPENAI_API_KEY=xxx
第6步,運行openui程序
python -m openui
看到這個界面,就成功了,你可以用對話方式讓程序生成網頁,也可以上傳一個截圖,按截圖樣式生成html代碼。很簡單吧。
在企業網站,特別是移動端頁面,聊天界面一般都模仿某些大的平臺。今天就用 java來實現一款聊天界面互發送消息功能!
看看下面效果:
代碼如下
html+css
javascript
*請認真填寫需求信息,我們會在24小時內與您取得聯系。