FastAPI是一个以速度和性能著称的Python Web框架。在本文中，我们将使用FastAPI和Next.js构建一个实时投票系统。该应用程序允许用户实时创建投票并对其进行投票，我们将使用Tailwind CSS进行样式设置，使用SqlModel进行数据库交互。
让我们逐步了解我是如何创建这个实时投票应用的。
我们将首先创建一个全新的FastAPI项目并设置数据库连接。然后，我们将使用SqlModel创建此应用程序所需的模型，SqlModel在底层结合了Pydantic和SQLAlchemy的功能。以下是我们需要的所有模型。
Poll 模型用于存储所有投票。
Options 模型用于存储这些投票的可选答案。
Vote 模型用于保存所有投票。
除了这些模型，应用程序还提供了一些REST端点。
一个GET端点用于获取当前用户创建的所有投票。
另一个GET端点用于按ID获取投票。
一个DELETE端点用于删除投票。
一个POST端点用于对特定选项进行投票。
在FastAPI中处理WebSocket连接非常简单。以下是我实时投票应用程序仅暴露的WebSocket端点的代码。
首先，有一个路径参数，表示用户当前所在的投票的ID。这意味着后端应该将该投票的任何更新实时发送到传入的连接。然后有一个简单的数据库查询，检查是否实际存在具有该ID的问题。否则，内存中将存在悬空连接，这不是您想要的。
之后，只需接受该连接并将连接交给管理器。
连接管理器是一个单独的类，用于将所有连接逻辑放在一个地方。以下是该类的样子。
它只是在一个字典中跟踪所有问题及其连接的客户端，其中键是投票的ID，值是所有WebSocket连接的集合。最好将连接保存在集合中，而不是列表中，以避免重复条目和线性删除操作。
现在，每当为投票创建新的投票时，将向该特定投票的所有连接的客户端发布更新信息，以实时更新UI。
我们将使用Next.js作为应用程序的前端。我们将创建一个简单的用户界面，用户可以在其中创建投票并对其进行投票。我们将使用Tailwind CSS进行样式设置。
我们将为此应用程序创建三个主要页面：
-
投票主页，用于显示当前用户创建的所有投票。
-
创建投票页面。
-
投票页面，用于对特定投票进行投票。
这些页面只需通过REST端点获取它们感兴趣的数据，并在UI上显示它们。值得一提的是投票详情页面。该页面在 q/[qid] 动态路由上呈现。这里的 qid 是投票的ID。此ID将用于获取当前投票的数据并显示它。
一旦我们有了投票ID，我们就可以打开与后端的WebSocket连接。使用来自参数的ID连接到WebSocket端点。将事件监听器附加到WebSocket实例，以在投票上投票时更新前端的状态。
该应用程序允许用户实时创建投票并对其进行投票，我们将使用Tailwind CSS进行样式设置，使用SqlModel进行数据库交互。借助FastAPI的WebSocket功能，我们将确保所有连接的客户端在投票更新时接收实时更新。对于希望了解更多关于FastAPI和Web开发中的实时通信的开发人员来说，本教程非常适合。
同样，如果您愿意，您可以观看此视频以获取更多详细信息并查看演示应用程序。 FastAPI Websockets | 使用FastAPI创建实时投票应用 | abdadeel - YouTube
GitHub仓库链接👇
