使用 Spring Boot 和 WebSocket 构建聊天应用程序

在本文中，您将学习如何在 Spring Boot 中使用 WebSocket API，并在最后构建一个简单的群聊应用程序。

您可以通过单击此链接来探索应用程序的现场演示 - https://spring-ws-chat.herokuapp.com/ 。

您只需输入您的姓名并开始与他人聊天。如果聊天室中没有可用的人，那么您可以在两个选项卡中打开应用程序，使用不同的用户名登录并开始发送消息。

以下是我们将在本教程中构建的聊天应用程序的屏幕截图 -

WebSocket是一种通信协议，可以在服务器和客户端之间建立双向通信通道。

WebSocket 的工作原理是首先与服务器建立常规 HTTP 连接，然后通过发送Upgrade标头将其升级为双向 Websocket 连接。

大多数现代 Web 浏览器都支持 WebSocket，对于不支持它的浏览器，我们有一些库可以为其他技术（如 comet 和 long-polling ）提供回退。

好了，既然我们知道了 websocket 是什么以及它是如何工作的，那么让我们开始实现我们的聊天应用程序。

创建应用程序

让我们使用 Spring Boot CLI 来引导我们的应用程序。查看 官方 Spring Boot 文档 以获取有关如何安装 Spring Boot CLI 的说明。

安装 Spring Boot CLI 后，在终端中键入以下命令以生成项目 -

如果您不想安装 Spring Boot CLI ，不用担心，您可以使用 Spring Initializer Web 工具生成项目。按照以下步骤使用 Spring Initializer 生成项目 -

1. 转到 http://start.spring.io/ 。
2. 将 Artifact 的值输入为websocket-demo。
3. 在依赖项部分添加Websocket 。
4. 单击生成项目以下载项目。
5. 解压下载的 zip 文件。

生成项目后，将其导入您喜欢的 IDE。项目的目录结构应如下所示 -

WebSocket 配置

第一步是配置 websocket 端点和消息代理。config在包内创建一个新com.example.websocketdemo包，然后在包内创建一个具有以下内容的新WebSocketConfig类config-

@EnableWebSocketMessageBroker用于启用我们的 WebSocket 服务器。我们实现WebSocketMessageBrokerConfigurer了接口并为其提供了一些方法来配置 websocket 连接。

在第一种方法中，我们注册了一个 websocket 端点，客户端将使用该端点连接到我们的 websocket 服务器。

注意withSockJS()端点配置的使用。SockJS用于为不支持 websocket 的浏览器启用后备选项。

您可能已经注意到方法名称中的STOMP一词。这些方法来自 Spring 框架的 STOMP 实现。STOMP 代表简单的面向文本的消息传递协议。它是一种消息协议，定义了数据交换的格式和规则。

为什么我们需要 STOMP？好吧，WebSocket 只是一种通信协议。它没有定义诸如 - 如何仅向订阅特定主题的用户发送消息，或如何向特定用户发送消息。我们需要 STOMP 来实现这些功能。

在第二种方法中，我们正在配置一个消息代理，它将用于将消息从一个客户端路由到另一个客户端。

第一行定义目的地以“/app”开头的消息应该被路由到消息处理方法（我们将很快定义这些方法）。

并且，第二行定义了目的地以“/topic”开头的消息应该被路由到消息代理。消息代理向订阅特定主题的所有连接的客户端广播消息。

在上面的示例中，我们启用了一个简单的内存消息代理。但是您可以自由使用任何其他功能齐全的消息代理，例如 RabbitMQ 或 ActiveMQ 。

创建 ChatMessage 模型

ChatMessagemodel 是将在客户端和服务器之间交换的消息负载。model在包内创建一个新包com.example.websocketdemo，然后在包内创建具有以下内容的ChatMessage类-model

创建用于发送和接收消息的控制器

我们将在控制器中定义消息处理方法。这些方法将负责从一个客户端接收消息，然后将其广播给其他客户端。

在基础包中创建一个新包controller，然后使用以下内容创建 ChatController 类 -

如果您从 websocket 配置中回想一下，所有从客户端发送的目标以 开头的/app消息都将路由到这些以@MessageMapping.

例如，带有目的地的消息/app/chat.sendMessage将被路由到sendMessage()方法，带有目的地的消息/app/chat.addUser将被路由到addUser()方法。

添加 WebSocket 事件监听器

我们将使用事件侦听器来侦听套接字连接和断开连接事件，以便我们可以记录这些事件并在用户加入或离开聊天室时广播它们 -

我们已经在addUser()内部定义的方法中广播用户加入事件ChatController。所以，我们不需要在 SessionConnected 事件中做任何事情。

在 SessionDisconnect 事件中，我们编写了代码来从 websocket 会话中提取用户名并向所有连接的客户端广播用户离开事件。

创建前端

在目录中创建以下文件夹和文件src/main/resources-

该src/main/resources/static文件夹是 Spring Boot 中静态文件的默认位置。

1. 创建 HTML -index.html

HTML 文件包含用于显示聊天消息的用户界面。它包括sockjs和stompjavascript 库。

SockJS 是一个 WebSocket 客户端，它尝试使用本机 WebSockets，并为不支持 WebSocket 的旧浏览器提供智能回退选项。STOMP JS 是 javascript 的 stomp 客户端。

以下是完整的代码index.html-

2. JavaScript -main.js

现在让我们添加连接到 websocket 端点以及发送和接收消息所需的 javascript。首先，将以下代码添加到main.js文件中，然后我们将探索该文件中的一些重要方法——

该connect()函数使用SockJS和stomp客户端连接到/ws我们在 Spring Boot 中配置的端点。

连接成功后，客户端订阅/topic/public目的地，并通过向目的地发送消息告诉服务器用户的姓名/app/chat.addUser。

该stompClient.subscribe()函数采用一个回调方法，只要消息到达订阅的主题，就会调用该方法。

其余代码用于在屏幕上显示和格式化消息。

3.添加CSS -main.css

最后，将以下样式添加到main.css文件中 -

运行应用程序

您可以通过在终端中键入以下命令来运行 Spring Boot 应用程序 -

应用程序在 Spring Boot 的默认端口 8080 上启动。您可以在 http://localhost:8080 浏览应用程序。

使用 RabbitMQ 作为消息代理

如果你想使用像 RabbitMQ 这样的全功能消息代理而不是简单的内存消息代理，那么只需在pom.xml文件中添加以下依赖项 -

添加上述依赖项后，您可以WebSocketConfig.java像这样在文件中启用 RabbitMQ 消息代理 -

结论

恭喜各位！在本教程中，我们使用 Spring Boot 和 WebSocket 从头开始​​构建了一个成熟的聊天应用程序。

您可以在我的 github 存储库 中找到此应用程序的完整代码。如果您喜欢您所读的内容，请在 github 上给我一颗星，并与您的朋友和同事分享这篇文章。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/18205.html。