介绍
open-twitch-dashboard 是一个为 Twitch 平台构建的开源仪表板,该仪表板提供了有关 Twitch 频道和用户的实时数据统计信息。该 npm 包提供了一个方便的使用界面,允许用户基于自己的需要使用模块化的方式来展示和解释 Twitch 数据。
安装
安装 open-twitch-dashboard 版本适用于 npm 环境。在安装该包之前,请确保已经拥有 npm 环境。
npm install open-twitch-dashboard
使用方式
从 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。
const auth = new TwitchAuth({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", redirectUri: "http://localhost" });
接下来,创建 TwitchApi 实例并将其设置为认证提供程序。
const api = new TwitchApi({ authProvider: auth, clientId: "YOUR_CLIENT_ID" });
最后,创建 TwitchDashboard 实例,设置要展示的频道名称和要展示的模块列表。
const twitchDashboard = new TwitchDashboard({ api, channelName: "CHANNEL_NAME", modules: ["viewers", "followers"] });
最后,调用 twitchDashboard.render 方法,将仪表板呈现在 DOM 中。
twitchDashboard.render("#dashboard");
指南
该 npm 包提供了丰富的选项和配置。在以下示例中,我们将重点介绍这些选项和配置方法。
模块
open-twitch-dashboard 可以显示许多不同类型的信息,这些信息可以通过模块配置进行启用。
以下是可以启用的模块及其选项:
viewers
:展示实时观看人数。可选参数:refreshIntervalInSeconds
(int)。followers
:展示实时关注人数。可选参数:refreshIntervalInSeconds
(int)。chat
:展示最近几个聊天消息。可选参数:messageLimit
(int),refreshIntervalInSeconds
(int)。bits
:展示实时比特币数量。可选参数:refreshIntervalInSeconds
(int)。subscribers
:展示实时订阅者数量。可选参数:refreshIntervalInSeconds
(int)。
使用模块配置的最简单示例如下所示:
const twitchDashboard = new TwitchDashboard({ api, channelName: "CHANNEL_NAME", modules: ["viewers", "followers"] });
布局
可以使用 layout
配置项进行适当的布局。默认布局为 COLUMN
。
以下是可用的布局选项:
ROW
:在一行上水平排列所有模块。COLUMN
:按列排列所有模块。
以下示例演示如何将布局设置为 ROW
:
const twitchDashboard = new TwitchDashboard({ api, channelName: "CHANNEL_NAME", modules: ["viewers", "followers"], layout: "ROW" });
主题
可以使用 theme
配置项来更改仪表板的外观。默认主题为 DEFAULT
。
以下是可用的主题选项:
DEFAULT
:白色背景,黑色文本。DARK
:黑色背景,白色文本。LIGHT
:深蓝色背景,白色文本。
以下示例演示如何将主题设置为 DARK
:
const twitchDashboard = new TwitchDashboard({ api, channelName: "CHANNEL_NAME", modules: ["viewers", "followers"], theme: "DARK" });
常规选项
以下示例演示了如何使用常规选项:
-- -------------------- ---- ------- ----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------- ------- ------ ------ ------- ---------- ------------- -------- ---------- - ---------------------- -- --------- - ---
container
:要在其中呈现仪表板的容器的 ID。onReady
:当仪表板准备好后要调用的回调函数。
结论
open-twitch-dashboard 是一个非常实用的 npm 包,使得构建 Twitch 仪表板变得非常容易。通过了解本文中详细的使用指南,你现在应该已经了解了如何使用 open-twitch-dashboard 建立一个漂亮且丰富的 Twitch 数据仪表板。在使用该 npm 包时,请始终遵循 Twitch API 的使用规则并确保保护用户隐私。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f7277584122