NodeJS中Web-Push结合Socket.io实现推送通知的最佳实践问询

嘿，作为Node.js新手能想到把Web Push订阅端点和用户ID绑定，这个思路其实是对的！不过你当前代码里的问题在于socket.request.body并不是获取订阅信息的正确方式，咱们一步步来理清楚怎么解决这个问题，同时优化你的实现。

问题根源 #

Socket.IO的connection回调里的socket.request.body是建立WebSocket连接时的HTTP请求体，而Web Push的订阅信息是客户端在完成浏览器推送订阅后，需要主动传递给服务器的，无法通过这个请求体直接获取。

你的思路修正：正确存储订阅信息 #

把订阅端点和用户ID关联存储的方向完全没问题，但需要调整存储的时机：

1. 客户端完成Web Push订阅后，通过一个单独的Socket.IO事件（比如save-subscription）把订阅对象和用户ID一起发送给服务器。
2. 服务器将订阅信息与用户ID绑定，存储到内存（测试用）或持久化存储（生产用）中。
3. 当需要发送推送时，从存储中取出对应用户的订阅信息，传给sendWebPush函数。

修改后的代码示例 #

服务器端（server.js） #

const webpush = require('web-push');
const { Server } = require('socket.io');

// 配置Web-Push的VAPID密钥（建议用环境变量管理，不要硬编码）
webpush.setVapidDetails(
  'mailto:your-email@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

// 存储用户ID与订阅信息的映射（生产环境建议用MongoDB/Redis等持久化存储）
const USER_SUBSCRIPTIONS = {};
const USERS = {};

const sendWebPush = (subscription, payload) => {
  webpush.sendNotification(subscription, payload)
    .catch(err => {
      console.error('推送失败:', err);
      // 处理订阅失效的情况：如果返回410 Gone，删除无效订阅
      if (err.statusCode === 410) {
        const userId = Object.keys(USER_SUBSCRIPTIONS).find(id => 
          JSON.stringify(USER_SUBSCRIPTIONS[id]) === JSON.stringify(subscription)
        );
        if (userId) delete USER_SUBSCRIPTIONS[userId];
      }
    });
};

const io = new Server(/* 你的服务器配置 */);

io.sockets.on('connection', function(socket) { 
  // 处理客户端发送的订阅信息
  socket.on('save-subscription', ({ userID, subscription }) => {
    USER_SUBSCRIPTIONS[userID] = subscription;
    console.log(`已保存用户 ${userID} 的订阅信息`);
  });

  socket.on('join', function(userID) { 
    const payload = JSON.stringify({ title: "New Member Joined" }); 
    // 从存储中获取用户的订阅信息
    const userSubscription = USER_SUBSCRIPTIONS[userID];
    
    if (userSubscription) {
      sendWebPush(userSubscription, payload);
    } else {
      console.log(`用户 ${userID} 未找到有效的订阅信息`);
    }

    USERS[userID] = socket.id; 
    io.emit('join', USERS); 
  }); 
});

客户端示例 #

// 假设客户端已经登录，拿到了当前用户的userID
const currentUserID = 'your-user-id';
const socket = io();

// 完成Web Push订阅并发送给服务器
async function initPushSubscription() {
  // 检查浏览器权限
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.error('用户未允许推送通知');
    return;
  }

  // 注册Service Worker
  const registration = await navigator.serviceWorker.register('/sw.js');
  // 创建订阅
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: '你的VAPID公钥（base64格式）'
  });

  // 通过Socket.IO发送订阅信息给服务器
  socket.emit('save-subscription', {
    userID: currentUserID,
    subscription: subscription
  });
}

// 页面加载时初始化订阅
window.addEventListener('load', initPushSubscription);

生产环境的最佳实践 #

• 持久化存储：内存存储会在服务器重启后丢失订阅信息，生产环境建议用MongoDB、PostgreSQL或Redis来保存订阅数据，同时维护订阅的有效性（定期清理失效订阅）。
• 安全处理：VAPID密钥不要硬编码在代码里，用环境变量（比如dotenv包）管理；传输订阅信息时尽量用HTTPS。
• 错误处理增强：除了处理410失效状态，还要处理其他HTTP错误码，比如400（无效订阅格式），避免重复发送无效请求。
• 订阅更新：客户端的订阅可能会变更（比如浏览器重置、设备更换），要监听pushsubscriptionchange事件，及时更新服务器上的订阅信息。

你的核心思路（绑定用户ID与订阅端点）是正确的，只需要调整订阅信息的传递和存储方式，就能顺利在Socket.IO回调中调用sendWebPush函数啦！

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