如何使用JavaScript实现个人网站接收Twitter推送通知

实现整体思路 #

你需要用Node.js搭建后端中间层对接Twitter官方API，再通过服务端主动推送技术把新动态通知推送给前端Web应用，不要直接在前端调用Twitter API，会有跨域、密钥泄露的风险。

核心实现步骤 #

• 第一步：申请Twitter开发者账号，创建项目后获取Bearer Token等API访问凭证，同时拿到你要监听的目标用户的数字ID，可通过用户名调用API转换得到。
• 第二步：编写后端监听逻辑，你可以选择定时轮询或者流式API两种方式监听目标用户的新推文，示例代码如下：

// Node.js后端代码，需先安装twitter-api-v2依赖
const { TwitterApi } = require('twitter-api-v2');
// 填入你自己的Bearer Token，绝对不要暴露给前端
const twitterClient = new TwitterApi('YOUR_BEARER_TOKEN');
// 存储上次拉取到的最新推文ID，用来判断是否有新内容
let lastTweetId = '';
const TARGET_USER_ID = '目标用户的数字ID';

async function checkNewTweets() {
  const timeline = await twitterClient.v2.userTimeline(TARGET_USER_ID, {
    max_results: 10,
    exclude: ['retweets', 'replies'] // 可配置是否排除转推、回复
  });
  const latestTweet = timeline.data.data[0];
  if (latestTweet && latestTweet.id !== lastTweetId) {
    // 检测到新推文，推送给所有在线的前端客户端
    sendNotifyToFrontend(latestTweet);
    lastTweetId = latestTweet.id;
  }
}
// 每2分钟轮询一次，可根据API配额调整频率
setInterval(checkNewTweets, 120000);

• 第三步：实现服务端到前端的推送，你可以选择SSE或者WebSocket方案，前端接收消息后触发浏览器通知，前端示例代码如下：

// 前端Web页面JS代码
// 先申请浏览器通知权限
if (Notification.permission !== 'granted') {
  Notification.requestPermission();
}
// 建立SSE连接接收后端推送
const eventSource = new EventSource('/api/tweet-notify');
eventSource.onmessage = (e) => {
  const tweetData = JSON.parse(e.data);
  // 弹出系统通知
  new Notification('你关注的用户发布了新动态', {
    body: tweetData.text.substring(0, 50) + '...',
    tag: 'twitter-notify'
  });
  // 你也可以在这里自定义页面内的提示逻辑
};

注意事项 #

• 所有Twitter API调用必须在后端执行，禁止把API凭证写在前端代码中，避免被盗用
• 不要设置过高的轮询频率，避免触发API速率限制，普通开发者账号的配额可以在开发者后台查看
• 如果需要更高的实时性，可以替换轮询方案为Twitter官方的流式过滤API，延迟可以降低到秒级
• 国内访问Twitter API需要额外配置网络代理，你可以在Node.js后端的请求中统一配置代理逻辑

内容的提问来源于stack exchange，提问作者Le Van Quang