Vue

项目概述 项目地址：https://github.com/sirius2alpha/scoreboard 使用Redis在服务器上对用户的点击数排序，并返回点击次数排行榜。 技术栈 整体设计 用户界面 排行榜展示区: 显示当前排行榜的状态。 点击按钮: 用户点击来增加他们的计分。 昵称输入和提交: 允许新用户输入昵称并参与排行榜。 实时更新监听: 不需要用户交互，自动更新排行榜。 WebSocket客户端逻辑 建立连接: 当用户访问网站时，建立WebSocket连接。 发送点击事件: 当用户点击按钮时，发送消息到服务器。 接收排行榜更新: 监听来自服务器的排行榜更新，并更新界面。 用户注册: 发送新用户的昵称到服务器。 处理断开连接: 如果用户20秒未操作，发送断开消息到服务器。 后端设计（Gin + Redis） WebSocket服务器 处理WebSocket连接: 接受和管理WebSocket连接。 接收消息: 解析从客户端接收到的消息（点击事件，新用户注册）。 Redis交互: 更新用户的分数并重新排序排行榜。 广播排行榜更新: 将更新后的排行榜发送给所有连接的客户端。 处理断开: 移除30秒未操作的用户。 Redis逻辑 用户分数管理: 存储和更新用户分数。 排行榜排序: 实时更新排行榜。 数据持久化: 保证数据在服务重启后仍然可用。 API设计 本项目API设计采用的是websocket实现。 由于考虑到用户在点击比较频繁，如果采用HTTP会造成头部开销较大，而websocket的头部开销会相对小一些。 消息类型 UserClick: { type: “UserClick”, nickname: “用户昵称” } NewUser: { type: “NewUser”, nickname: “用户昵称” } UserInactive: { type: “UserInactive”, nickname: “用户昵称” }...