如何使用 NodeJS 和 Redis 构建音乐分享应用

音乐是神奇的。它具有创造新的回忆、朋友和难忘的感觉的力量。

我们所有人都喜欢音乐，但对某些人来说，这是一种激情。聆听和分享不同的曲调，触动我们的情感，这是一种爱好，可以加强社会联系，并将许多友谊凝聚在一起。

但鉴于我们生活在一个更加全球化的时代，我们的许多朋友遍布全球，因此尝试与他们组织任何社交活动都可能很困难。

作为音乐爱好者和创新者，Franco Chen 接受了这一挑战，创建了一个应用程序，允许用户与朋友一起收听、分享和发现新音乐，无论他们身在何处。

为了最大限度地提高用户体验，该应用程序需要使用一个数据库来运行，该数据库能够实时传输、处理和检索数据。借助 Redis，Franco 能够创建一个低延迟的应用程序，其中用户之间的命令和交互具有超快的响应速度。

让我们来看看 Franco 是如何将这个应用程序变为现实的。但在我们继续之前，我们想指出的是，我们还有一系列令人兴奋的应用程序供您在 Redis Launchpad 上查看。

您将构建什么？
您需要什么？
架构
开始
数据建模
如何访问/存储数据
它是如何工作的

1. 您将构建什么？

您将构建一个平台，允许您在线收听音乐并与朋友分享。该应用程序的工作方式是创建私人或公共在线房间，您可以在其中邀请具有不同品味的人加入体验。

从最纯粹的意义上讲，该应用程序是通过与对音乐有共同爱好的人互动，从而更深入地探索不同流派、品味和偏好的门户。下面，我们将向您展示如何从头开始创建此应用程序，突出显示不同的组件，并引导您完成实施过程的每个阶段。

准备好开始了？

好的，让我们开始吧！

2. 您需要什么？

Socket.IO：用作实时 Web 应用程序的 Javascript 库。

Javascript：用作首选编程语言，允许您使网页具有交互性。

RedisJSON：用于 Redis 的 JSON 数据类型，允许从 Redis 键存储、更新和获取 JSON 值

RediSearch：用于 Redis 的查询、二级索引和全文搜索。

Chakra UI：为您提供基本构建块，可以帮助您构建应用程序的前端。

Redux：用作开源 Javascript 库，用于管理和集中应用程序状态。

Axios：用作基于 Promise 的 HTTP 客户端，用于 Node.js 和浏览器。

Node.js：用作开源、跨平台的工具，可在 Web 浏览器之外执行 JavaScript 代码。

Express：用作灵活的 Node.js Web 应用程序框架，为 Web 和移动应用程序提供了一组强大的功能。

3. 架构

客户端使用 HTTP 请求和 Socket.IO 从我们的 Node.js 服务器请求和接收数据。
Redis 存储应用程序的所有数据，包括持久数据和非持久数据。这使应用程序能够以低延迟检索数据，从而创建一个更流畅和响应更快的应用程序。对于此应用程序来说，实现低延迟尤为重要，因为服务器和客户端之间存在大量数据移动。
所有 Socket.IO 数据都通过 RedisPubSub 发送，从而最大限度地减少了添加更多 Node.js 服务器的需求。

4. 开始

先决条件

Node v14.16.1
npm v6.14.12
带有 RediSearch v2.0 和 RedisJSON v1.0 的 Redis v6.2.3
Docker
Docker Compose

步骤 1：克隆存储库

git clone https://github.com/spatialdj/frontend

步骤 2：设置前端

使用 RedisMod docker 镜像来设置 Redis 模块。在前端的根目录中，键入以下代码来安装前端依赖项：

npm install

步骤 3：设置后端

转到后端的根目录并创建一个名为 config.js 的文件，其中包含以下内容

export default {
  redisHost: 'localhost',
  redisPassword: 'your_password_for_redis_here',
  sessionSecret: 'somesessionsecret',
  passwordSaltRounds: 10,
  youtube_key: 'youtube_api_key'
}

键入以下命令以安装后端依赖项：

npm install

在后端的根目录中运行以下命令：

npm start

步骤 4：访问应用程序

您的应用程序应该在 localhost:3000 上运行

5. 数据建模

房间

前缀： room:
类型：HASH
字段
- messages：Redis 键到此房间的消息
- id：此房间的 ID
- json：此房间的 JSON 表示形式（因为 RediSearch 尚不支持 JSON）
- numMembers：当前房间中的成员数
- description：房间的描述
- name：房间的名称
- private：（True | False）房间是否可搜索

genres: 房间面向的流派

索引（RediSearch）

name: TEXT
description: TEXT
genres: TAG
numMembers: NUMERIC
private: TAG

private: TAG

命令

获取此房间的 JSON 表示形式

HGET ${roomId} json

创建新房间或更新房间（并非所有字段都是必需的）

HSET room:${roomId} id ${roomId} name ${name} description ${description} private ${private} genres ${genres} numMembers ${numMembers} json ${roomJson}

检查房间是否存在（用于尝试加入房间时）:

EXISTS ${roomId}

用于搜索的房间页面

FT.SEARCH @name|description:(${searchQuery}) @private:{false} @genres:{${genres}} SORTBY numMembers DESC LIMIT ${offset} ${limit}:

用户队列

前缀： queue
类型： LIST
数据：与关联房间的队列中的用户的用户名列表
命令
- RPUSH queue:${roomId} ${username}: 将用户添加到队列或创建队列
- LRANGE queue:${roomId} 0 -1: 获取队列中的所有用户
- LREM queue:${roomId} -1, ${username}: 从队列中删除用户
- LMOVE queue:${roomId} queue:${roomId} LEFT RIGHT: 循环浏览队列（将用户从队列的前面移动到队列的后面）

会话

前缀： sess:
类型： STRING
数据：存储用于身份验证的会话数据
命令
- SET sess:${sessionId} ${data}: 创建新会话。由 connect-redis 使用
- GET sess:${sessionId}: 获取会话数据。由 connect-redis 使用
- EXISTS sess:${sessionId}: 检查会话是否存在。由 connect-redis 使用

用户

前缀： user
类型： JSON
字段
- username: 用户的用户名
- password: 使用 bcrypt 哈希和加盐的密码
- profilePicture: 图像的 URL
- selectedPlaylist: 用户当前选择的播放列表
- playlist: 播放列表对象

示例播放列表

"db168000-fa58-491b-81d0-1287d866fcf7": {
  "id": "db168000-fa58-491b-81d0-1287d866fcf7",
  "name": "Text playlist",
  "user": "exampleuser",
  "queue": [
      {
      "videoId": "TT4PHY0_hwE",
      "title": "Ekcle - Pearl Jigsaw",
      "thumbnails": {
          "default": {
          "url": "https://i.ytimg.com/vi/TT4PHY0_hwE/default.jpg",
          "width": 120,
          "height": 90
          }
      },
      "channelTitle": "Ekcle",
      "id": "2f7473db-2aec-4ec1-a2bd-623ed6b3ce48",
      "duration": 348000
      }
  ]
}

示例用户

{
    "username": ...,
    "password": ...,
    "profilePicture": ...,
    "playlist": { ... },
    "selectedPlaylist": …
 }

命令
- 创建新用户或更新用户数据

JSON.SET user:${username} ${path} ${userJson}

获取用户数据

JSON.GET user:${username} ${path}

消息

前缀： message
类型： LIST
数据：JSON 字符串化对象，具有字段 id, timeSent, text, sender（包含字段 username 和 profilePicture）
命令
- 将新消息添加到房间的消息历史记录

LPUSH message:${messagesId} ${data}

获取房间的消息历史记录，从最新的消息开始倒序排列

LRANGE message:${messagesId} ${start} ${end}

套接字 (Socket)

前缀：socket
类型：字符串 (STRING)
数据：此套接字所属的用户名
命令
- 创建一个新的套接字

SET socket:${socketId} ${username}

获取与套接字关联的用户名

GET socket:${socketId}

删除套接字

DEL socket:${socketId}

6. 数据的访问或存储方式

对于用户
- 当用户注册时，会创建一个像这样的用户

JSON.SET user:${username} . ${userJson}

要让用户登录，会创建一个新的会话

SET sess:${sessionId} ${data}

要检索用户信息

JSON.GET user:${username} ${path}

对于套接字
- 当新的套接字连接到服务器并且请求通过身份验证（用户已登录）时，将创建一个新的套接字并存储关联的用户名

SET socket:${socketId} ${username}

当套接字与服务器断开连接时，它将被删除

DEL socket:${socketId}

对于房间
- 当搜索房间时，RedisSearch 用于进行搜索

FT.SEARCH @name|description:(${searchQuery}) @private:{false} @genres:{${genres}} SORTBY numMembers DESC LIMIT ${offset} ${limit}

当创建一个新房间时，房间创建如下所示

HSET room:${roomId} id ${roomId} name ${name} description ${description} private ${private} genres ${genres} numMembers ${numMembers} json ${roomJson}

当房间更新时，它将按照如下所示进行更新（所有字段都是可选的）

HSET room:${roomId} id ${roomId} name ${name} description ${description} private ${private} genres ${genres} numMembers ${numMembers} json ${roomJson}

对于队列
- 当用户加入队列时，会创建一个队列/将用户添加到队列

RPUSH queue:${roomId} ${username}

当轮到用户播放歌曲时，该用户将移动到队列的末尾

LMOVE queue:${roomId} queue:${roomId} LEFT RIGHT

同时，播放的歌曲会被移动到用户播放列表的末尾

song = JSON.ARRPOP user:${username} .playlist.${playlistId}.queue 0

JSON.ARRAPPEND user:${username} .playlist.${playlistId}.queue song

对于播放列表
- 当创建一个新的播放列表/更新现有的播放列表时

JSON.SET user:${username} .playlist.${playlistId} ${playlistJson}

当播放列表被删除时

JSON.DEL user:${username} .playlist.${playlistId}

当用户选择一个播放列表时

JSON.SET user:${username} .selectedPlaylist ${playlistId})

当一首歌曲被添加到播放列表时

JSON.ARRAPPEND user:${username} .playlist.${playlistId}.queue ${song}

从播放列表获取歌曲

JSON.GET user:${username} .playlist.${playlistId}.queue

代码示例：从用户的播放列表中删除特定歌曲

const songs = JSON.parse(await jsonGetAsync(getUserKey(username), `.playlist.${playlistId}.queue`))
const songIndex = songs.findIndex(song => song.id === songId)
const success = songIndex !== -1
 
if (success) {
  songs.splice(songIndex, 1)
}
 
try {
  await jsonSetAsync(getUserKey(username), `.playlist.${playlistId}.queue`, JSON.stringify(songs))
} catch (error) {
  return res.status(400).json(error)
}