（通用 Socket.io、push-notification）教你實現 web 網站實時推送系統消息到「電腦任務通知欄」

消息通知是 web 網站的一個基本常規功能。web 網站消息管理模塊通常都是用戶主動請求消息通知，即便採用 socket 技術，也僅僅只是在用戶瀏覽當前系統網站時，才能發現系統推送的消息通知，這樣很容易形成消息通知不到位，發現不及時。本場 Chat 利用 HTML5 中的 JavaScript Web Notification API 新增功能，它容許 Chrome、Safari、Firefox 和 Edge 等現代瀏覽器將消息通知推送到用戶的桌面，結合 Socket.io 技術，實現網站消息實時推送至「電腦任務通知欄」。預覽地址：https://www.ctrlcv.vip （測試方式：開啓兩個瀏覽器，chrome 和 edge，分別登陸帳號： admin 密碼 ：123456 和 帳號：qwer 密碼：qwer 。在 admin 的用戶管理中給 qwer 用戶推送自定義消息。注意，首次推送，瀏覽器右上角會出現相似 「顯示通知」 的請求，選擇容許便可。）

效果圖：

所用技術棧包括：Node.js + Express + Socket.io + Vue.js + Element-UI + Notification API 等

你會獲得什麼？

1. Node.js + Express + Socket.io 實現的消息推送後臺服務的中轉站源碼，利用這套 「中轉站」 ，可結合任何先後端技術，實現系統消息的實時推送。
2. Vue.js + Element-UI + Notification API 實現客戶端實時接收消息和經過瀏覽器將消息通知到用戶桌面並顯示在電腦任務通知欄中的核心代碼。
3. 瞭解消息實時推送的總體流程，包括數據庫表結構基本設計。
4. 瞭解這套系統部署到服務器生成環境下遇到的坑，及對應解決方案。
5. 瞭解 Nginx、 Node.js、IIS 部署 https 的解決方案。

詳情請戳！！！