文地址：https://dwz.cn/Z1O56dnu

作者：Rude3Knife

前言

本文中搭建了一個簡易的多人聊天室，使用了WebSocket的基礎特性。

源代碼來自老外的一篇好文：

https://www.callicoder.com/spring-boot-websocket-chat-example/

本文內容摘要：

• 初步理解WebSocket的前后端交互邏輯
• 手把手使用 SpringBoot + WebSocket 搭建一個多人聊天室Demo
• 代碼源碼及其解釋
• 前端展示頁面

此外，在下一篇文章中，我們將做到：

• 對該WebSocket聊天室進行分布式改造，同時部署多臺機器來作為集群，支撐高并發。
• 保存用戶session，并且在集群上實現session同步，比如實時展示當前在線的用戶！

正文

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。

實體中，有三個字段：

• type:消息類型
• content：消息內容
• sender：發送者

類型有三種：

• CHAT: 消息
• JOIN：加入
• LEAVE：離開

創建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進行消息的訂閱。

在企業網站，特別是移動端頁面，聊天界面一般都模仿某些大的平臺。今天就用 java來實現一款聊天界面互發送消息功能！

看看下面效果：

代碼如下

html+css

javascript