Twitch项目：如何实现用户在线/直播时按钮/图标亮起的JS方案？

完全不需要从零开发！你可以基于通用的JavaScript模式，结合Twitch官方API来快速实现这个功能——核心就是通过API获取主播在线状态，然后动态切换UI元素的样式/状态。下面是具体的思路和可复用的代码示例：

核心逻辑拆解 #

其实这个需求本质是「状态驱动UI更新」，通用流程是：

• 定期调用Twitch API查询目标主播的在线/直播状态
• 根据返回的状态结果，触发按钮/图标的亮暗切换
• 重复这个查询过程，保证状态实时同步

具体实现步骤（附代码） #

1. 准备Twitch API访问权限 #

首先你需要在Twitch开发者平台注册应用，获取Client ID和生成一个OAuth Token（权限只需要基础的主播状态查询权限即可）。

2. 基础HTML结构 #

假设你的按钮/图标是这样的：

<!-- 单个主播状态按钮示例 -->
<button id="twitch-streamer-alice" class="stream-btn">
  <img src="offline-icon.png" alt="Alice状态" class="status-icon">
  Alice
</button>

<!-- 多个主播可以复制这个结构，修改ID和文字 -->
<button id="twitch-streamer-bob" class="stream-btn">
  <img src="offline-icon.png" alt="Bob状态" class="status-icon">
  Bob
</button>

对应的CSS先写好亮暗状态的样式：

.stream-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #666;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 亮起状态的样式 */
.stream-btn.active {
  background-color: #9146ff; /* Twitch标志性紫色 */
  box-shadow: 0 0 8px rgba(145, 70, 255, 0.5);
}
.stream-btn.active .status-icon {
  content: url("online-icon.png");
}

3. JavaScript核心代码 #

这部分是通用的，你可以直接复用或者改造现有代码：

// 配置信息，替换成你自己的
const TWITCH_CLIENT_ID = "你的Client ID";
const TWITCH_OAUTH_TOKEN = "你的OAuth Token";
const TARGET_STREAMERS = ["alice", "bob"]; // 主播的Twitch用户名，小写
const CHECK_INTERVAL = 30000; // 30秒刷新一次，避免API调用过于频繁

// 查询主播状态的函数
async function checkStreamerStatus() {
  try {
    // 调用Twitch API批量查询主播状态
    const response = await fetch(
      `https://api.twitch.tv/helix/streams?user_login=${TARGET_STREAMERS.join("&user_login=")}`,
      {
        headers: {
          "Client-ID": TWITCH_CLIENT_ID,
          "Authorization": `Bearer ${TWITCH_OAUTH_TOKEN}`
        }
      }
    );
    const data = await response.json();
    
    // 整理在线主播的用户名列表
    const onlineStreamers = data.data.map(stream => stream.user_login.toLowerCase());
    
    // 更新每个按钮的状态
    TARGET_STREAMERS.forEach(streamer => {
      const btn = document.getElementById(`twitch-streamer-${streamer}`);
      const isOnline = onlineStreamers.includes(streamer);
      
      // 切换active类来控制亮暗
      if (isOnline) {
        btn.classList.add("active");
        // 如果你的现有代码有专门的"亮起"函数，比如turnButtonOn()，在这里调用它就行
        // turnButtonOn(btn);
      } else {
        btn.classList.remove("active");
        // turnButtonOff(btn);
      }
    });
  } catch (error) {
    console.error("查询主播状态出错:", error);
  }
}

// 页面加载时先执行一次，然后定时刷新
window.addEventListener("load", () => {
  checkStreamerStatus();
  setInterval(checkStreamerStatus, CHECK_INTERVAL);
});

如何改造你现有的按钮亮起代码 #

如果已经有能实现按钮亮起的示例代码，只需要做两步替换：

• 把原来触发按钮亮起的条件判断（比如某个本地事件）替换成「主播是否在线」的判断（也就是上面代码里的isOnline变量）
• 把原来控制按钮亮暗的执行逻辑（比如修改样式、调用特定函数）和这个判断绑定就行

比如你原来的代码是点击按钮触发亮起，现在改成：当isOnline为true时，调用你原来的亮按钮函数；为false时调用暗按钮函数。

这样就不用从零写所有代码，只需要把状态源从本地事件换成Twitch API的结果就好啦！

内容的提问来源于stack exchange，提问作者codebwoy