npm 包 open-twitch-dashboard 使用教程

阅读时长 6 分钟读完

介绍

open-twitch-dashboard 是一个为 Twitch 平台构建的开源仪表板,该仪表板提供了有关 Twitch 频道和用户的实时数据统计信息。该 npm 包提供了一个方便的使用界面,允许用户基于自己的需要使用模块化的方式来展示和解释 Twitch 数据。

安装

安装 open-twitch-dashboard 版本适用于 npm 环境。在安装该包之前,请确保已经拥有 npm 环境。

使用方式

从 Twitch 获得数据是通过 Twitch 的 API 实现的。在使用 open-twitch-dashboard 之前,必须在 Twitch 开发人员门户网站上注册一个应用程序并获取 Client ID 和 Client Secret。

在引入 open-twitch-dashboard 之前需要引入 twitch-auth 和 twitch-api。

-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - --------- - ---- -------------
------ --------------- ---- ------------------------

----- ---- - --- ------------
  --------- -----------------
  ------------- ---------------------
  ------------ ------------------
---

----- --- - --- -----------
  ------------- -----
  --------- ----------------
---

----- --------------- - --- -----------------
  ----
  ------------ ---------------
  -------- ----------- ------------
---

-------------------------------------

该示例代码展示了如何将 open-twitch-dashboard 与 twitch-auth 和 twitch-api 一同使用。

首先,创建 TwitchAuth 实例以获取 Client ID 和 Client Secret。

接下来,创建 TwitchApi 实例并将其设置为认证提供程序。

最后,创建 TwitchDashboard 实例,设置要展示的频道名称和要展示的模块列表。

最后,调用 twitchDashboard.render 方法,将仪表板呈现在 DOM 中。

指南

该 npm 包提供了丰富的选项和配置。在以下示例中,我们将重点介绍这些选项和配置方法。

模块

open-twitch-dashboard 可以显示许多不同类型的信息,这些信息可以通过模块配置进行启用。

以下是可以启用的模块及其选项:

  • viewers:展示实时观看人数。可选参数:refreshIntervalInSeconds(int)。
  • followers:展示实时关注人数。可选参数:refreshIntervalInSeconds(int)。
  • chat:展示最近几个聊天消息。可选参数:messageLimit(int),refreshIntervalInSeconds(int)。
  • bits:展示实时比特币数量。可选参数:refreshIntervalInSeconds(int)。
  • subscribers:展示实时订阅者数量。可选参数:refreshIntervalInSeconds(int)。

使用模块配置的最简单示例如下所示:

布局

可以使用 layout 配置项进行适当的布局。默认布局为 COLUMN

以下是可用的布局选项:

  • ROW:在一行上水平排列所有模块。
  • COLUMN:按列排列所有模块。

以下示例演示如何将布局设置为 ROW

主题

可以使用 theme 配置项来更改仪表板的外观。默认主题为 DEFAULT

以下是可用的主题选项:

  • DEFAULT:白色背景,黑色文本。
  • DARK:黑色背景,白色文本。
  • LIGHT:深蓝色背景,白色文本。

以下示例演示如何将主题设置为 DARK

常规选项

以下示例演示了如何使用常规选项:

-- -------------------- ---- -------
----- --------------- - --- -----------------
  ----
  ------------ ---------------
  -------- ----------- -------------
  ------- ------
  ------ -------
  ---------- -------------
  -------- ---------- -
    ---------------------- -- ---------
  -
---
  • container:要在其中呈现仪表板的容器的 ID。
  • onReady:当仪表板准备好后要调用的回调函数。

结论

open-twitch-dashboard 是一个非常实用的 npm 包,使得构建 Twitch 仪表板变得非常容易。通过了解本文中详细的使用指南,你现在应该已经了解了如何使用 open-twitch-dashboard 建立一个漂亮且丰富的 Twitch 数据仪表板。在使用该 npm 包时,请始终遵循 Twitch API 的使用规则并确保保护用户隐私。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f7277584122

纠错
反馈