js怎样实现消息通知功能 Web消息通知的5种实现方式

// 请求权限
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    // 创建通知
    const notification = new Notification("您有新的消息！", {
      body: "这是一条测试消息。",
      icon: 'path/to/icon.png' // 可选，通知图标
    });

    // 点击事件处理
    notification.onclick = function(event) {
      event.preventDefault(); // 防止浏览器默认行为，例如某些浏览器会跳转到页面
      window.focus(); // 激活窗口
      this.close(); // 关闭通知
    }

    // 关闭事件处理
    notification.onclose = function() {
      console.log('通知已关闭');
    };
  } else {
    console.log("用户拒绝了通知权限。");
  }
});

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  // 模拟服务器推送消息
  setInterval(() => {
    ws.send(JSON.stringify({ message: '服务器推送的消息：' + new Date() }));
  }, 5000);

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to WebSocket server');
};

ws.onmessage = event => {
  const data = JSON.parse(event.data);
  console.log('Received:', data.message);
  // 显示通知，可以使用Notification API
  new Notification('新消息', { body: data.message });
};

ws.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

ws.onerror = error => {
  console.error('WebSocket error:', error);
};

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 模拟服务器推送消息
  setInterval(() => {
    const data = `data: ${JSON.stringify({ message: '服务器推送的消息：' + new Date() })}\n\n`;
    res.write(data);
  }, 5000);
}).listen(8080);

const eventSource = new EventSource('http://localhost:8080');

eventSource.onmessage = event => {
  const data = JSON.parse(event.data);
  console.log('Received:', data.message);
  // 显示通知
  new Notification('新消息', { body: data.message });
};

eventSource.onerror = error => {
  console.error('SSE error:', error);
  eventSource.close();
};

<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js"></script>

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.requestPermission()
  .then(() => {
    console.log('Notification permission granted.');
    // 获取 token
    return messaging.getToken();
  })
  .then((token) => {
    console.log('Token:', token);
    // 将 token 发送到服务器，服务器用 token 推送消息
  })
  .catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // 显示通知
  new Notification(payload.notification.title, { body: payload.notification.body });
});

const admin = require('firebase-admin');

const serviceAccount = require("path/to/your/serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const message = {
  notification: {
    title: '新消息',
    body: '您有一条来自服务器的新消息'
  },
  token: 'YOUR_CLIENT_TOKEN'
};

admin.messaging().send(message)
  .then((response) => {
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

function checkNewMessages() {
  fetch('/api/new-messages')
    .then(response => response.json())
    .then(data => {
      if (data.hasNewMessage) {
        // 显示通知
        new Notification('新消息', { body: data.message });
      }
    })
    .catch(error => {
      console.error('Error checking messages:', error);
    });
}

// 每隔一段时间检查一次
setInterval(checkNewMessages, 10000); // 每 10 秒检查一次

if (Notification.permission === 'granted') {
  // 可以发送通知
  new Notification('新消息', { body: '您有新的消息' });
} else if (Notification.permission === 'denied') {
  // 用户已拒绝授权
  console.log('用户已拒绝通知权限');
  // 可以显示一个友好的提示，引导用户去设置中开启通知权限
} else if (Notification.permission === 'default') {
  // 尚未请求权限
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // 可以发送通知
      new Notification('新消息', { body: '您有新的消息' });
    }
  });
}