Spring Boot 和 WebSocket 构建一个聊天室应用

原文链接：Building a chat application with Spring Boot and WebSocket - 原文作者：Ramesh Fadatare

本文采用意译的方式

本文，我们将学习如何使用 和 ，并在最后构建个简单的群聊应用。

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

WebSocket 是一个通信协议，在服务端和客户端之间建立双向沟通渠道。

工作原理是首先和服务端建立一个常规的 链接，然后通过发送一个 头来升级为双向 连接。

现在大多数的现代浏览器都支持 ，对于那些不支持的浏览器，有相关的库等技术作为后备，比如 comet 和 long-polling。

嗯，现在我们知道 是什么了，并且了解了它怎么工作。那么，我们来实现聊天程序。

本小节为译者加

本案例在以下开发环境进行复现：

• macOs Monterey 12.4 (Apple M1)
• IntelliJ IDEA 2021.2.2(Ultimate Edition)
• java --version (17.0.7)
• maven version 3.9.2
• Google Chrome 版本 119.0.6045.123（正式版本）（arm64）

浮现效果如下👇

👌，我们下面进入案例环节。

假设我们通过 创建了一个 项目。

首先，我们配置 断点和信息代理。我们在 中创建一个新的包 ，然后在该包内创建 类。

注解是用来开启 服务。我们实现了 接口，并为其中的一些方法提供了实现，以配置 连接。

在第一个方法中，我们注册了一个 端点，客户端将用它来连接 服务。

请注意 和端点配置的使用。SockJS 用于为不支持 服务的后备选项。

你可能会留意到方法名中的 STOMP 单词。这个方法来自 框架 实现。 全称 (简单文本导向信息协议)。它是一个信息协议，定义了数据交流的格式和规则。

为什么我们需要 STOMP 呢？ 嗯～ 只是一个通信协议。它并没有定义一些事情，比如 - 怎么给订阅特定主题的用户发送消息，或者说怎么给特定的用户发送消息。所以，我们需要 来实现这些功能。

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

第一行代码中，我们定义目的地以 开头的消息应路由到消息处理方法（我们后面很快会定义这些方法）。

第二行代码中，我们定义目的地以 开头的消息路由到消息代理。信息代理将向所有连接并订阅特定主题的客户端广播信息。

在上面这个例子中，我们开启了一个简单的基于内存的信息代理。但是，我们可以任意全功能信息代理，比如 RabbitMQ 和 ActiveMQ。

模型是用于在客户端和服务端交流的信息载体。我们在 包中创建一个新的包 ，然后创建名为 的类：

我们将在 里面定义处理的方法。这些方法的职责是从另外客户端接收信息，然后将其广播出去。

我们创建一个新包 ，然后常见 类：

如果你还记得 配置，所有客户端目的地以 开头的信息将被路由到以 注解处理的方法。

比如，目的地为 的信息将会路由到 方法，目的地为 的信息将会路由到 方法。

我们将使用事件监听器来监听 连接和断开，以便我们可以记录这些事件并在用户加入或者离开聊天室时候对他们广播。

内，我们在 方法中广播了用户加入的事件。所以我们并不需要在 事件中做其他事情。

在 事件，我们从 中提取用户名字，然后给所有的连接客户端广播用户离开事件。

在 文件夹中，创建下面的文件：

文件夹是 中默认的静态文件存放的位置。

文件包含用户界面，展示聊天信息。它应该可以包含 和 这两个 库。

是一个 客户端，尝试使用本地的 ，并且为不支持 老浏览器提供备选。 是 版的 客户端。

下面是 完整的代码：

2. JavaScript - main.js

现在，我们使用 来连接 端点并发送&接收信息。首先，在 文件内添加下面的代码，然后，我们将探讨其中的关键方法 -

方法使用 和 客户端来连接在 中配置的 端点。

在成功连接后，客户端订阅了目的地路径 ，然后通过目的地路径 发送消息将用户名发送给服务端。

方法的回调函数在信息发送到订阅的主题的时候被调用。

文件中剩下的代码就是用来展示和格式化屏幕上的信息。

3. 添加 CSS - main.css

最后，我们在 文件中添加下面的样式 -

译者加：样式无需多说了吧。样式只是让页面看起来更加清爽，我们可以不加。

然后我们可以在控制台上运行下面的命令行开启服务 。

当然，我们可以通过 开启

应用将会默认开启在 默认的端口号 上。我们直接在浏览器上打开 即可。

读者自行验证

如果我们想使用全信息的消息中间件，比如 来代替简单的内存消息中间件，那么我们需要在 内添加下面的依赖 -

一旦添加了上面的依赖，我们可以在文件 文件中开启 消息中间件，如下 -

海宁版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com