消息通知是 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 等
你會得到什麼?
- Node.js + Express + Socket.io 實現的消息推送後台服務的中轉站源碼,利用這套 “中轉站” ,可結合任何前後端技術,實現系統消息的實時推送。
- Vue.js + Element-UI + Notification API 實現客户端實時接收消息和通過瀏覽器將消息通知到用户桌面並顯示在電腦任務通知欄中的核心代碼。
- 瞭解消息實時推送的整體流程,包括數據庫表結構基本設計。
- 瞭解這套系統部署到服務器生成環境下遇到的坑,及對應解決方案。
- 瞭解 Nginx、 Node.js、IIS 部署 https 的解決方案。