Socket.io+Notification實現瀏覽器消息推送

williamwen1986 發布于2019-08-20 14:26 / 2571人閱讀

摘要：新特性，用于瀏覽器的桌面通知，只有部分瀏覽器支持。通過實現服務端往瀏覽器客戶端發送自定義消息。轉載請注明出處原文鏈接實現瀏覽器消息推送開發前提本地安裝以及對以及框架有一定了解。運行用瀏覽器打開成功的話即可看到頁面的內容。

前言

socket.io: 包含對websocket的封裝，可實現服務端和客戶端之前的通信。詳情見官網(雖然是英文文檔，但還是通俗易懂)。
Notification: Html5新特性，用于瀏覽器的桌面通知，只有部分瀏覽器支持。
通過nodejs+Socket.io+Notification實現服務端往瀏覽器客戶端發送自定義消息。
若有問題可加群264591039與我討論。
轉載請注明出處！
原文鏈接：https://yezihaohao.github.io/2017/02/20/Socket-io-Notification實現瀏覽器消息推送/

開發前提

本地安裝nodejs以及npm
對nodejs以及express框架有一定了解。（本篇將和官方文檔一樣，采用express 4.10.2）

環境搭建

新建一個文件夾notification（以下操作都在該文件夾的根目錄進行）

npm初始化package.json文件 npm init

安裝express(指定版本4.10.2，沒有試過其他版本，感興趣可以試下) npm install --save express@4.10.2

安裝socket.io(本人安裝的版本是1.7.3) npm install --save socket.io

編寫代碼 構建通信環境

在根目錄下新建一個index.html（注：index頁面的樣式來自socket.io的官方示例）



  
    Socket.IO Notification

新建一個index.js文件，并在js文件中構建相應的對象和變量，創建監聽端口為8080 的服務器，以及添加映射到index.html的路由。

let express = require("express"),
    app = express(),
    http = require("http").Server(app),
    io = require("socket.io")(http);
app.use(express.static(__dirname + "/public"));

app.get("/", function(req, res){
    res.sendfile("index.html");
});

http.listen(8080, function(){
    console.log("listening on port 8080");
});

運行 node index.js 用瀏覽器打開http://localhost:8080 成功的話即可看到index.html頁面的內容。
在index.js的監聽端口代碼上方添加socket.io的監聽事件，監聽用戶連接的connection。

io.on("connection", function(socket){
    console.log("a user connected");
});

創建監聽Event事件:notification，并用emit向客戶端推送消息

io.on("connection", function(socket){
    console.log("a user connected");
    socket.on("notification", function(msg){
        console.log(msg);
         io.emit("notification", msg);
    });
});

在index.html頁面中的上方引入socket.io文件，并用emit向服務器提交數據以及監聽事件notification，接收服務器推送的消息
注意，引入socket.io的方式在運行node index.js之后才有效果，直接打開index.html是找不到這個文件的

瀏覽器打開http://localhost:8080 后，在input框中輸入，點擊發送，在nodejs運行的控制臺可以看到如下信息：

a user connected //以下數據是輸入框輸入的數據
hello   
test
測試

實現自定義消息推送

完整代碼：

運行截圖

完整示例代碼見GitHub

GPU云服務器云服務器 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81628.html

基于workerman實現的web消息推送站內信功能

摘要：客戶端訪問后端，確認是否有發送給自己的站內信，如有，播放消息提示音，并更改頁面站內信未讀數。登陸請求成功，服務器監聽程序會以作為用戶的連接標識。調用上述的服務將信息推送到服務器監聽程序。流程說明使用 web-msg-sender 作為服務器監聽程序。客戶端（瀏覽器）通過websocket連接服務器監聽程序。服務器應用程序（后端）通過curl訪問服務器監聽程序，將需...

YFan 2019-06-28 13:38 評論0 收藏0
利用 socket.io 實現消息實時推送

摘要：為了達到這種雙向的實時消息傳遞，很明顯地考慮用來實現。注意這個文件并不能用在實際的項目中，只是用來顯示消息推送的效果而已。參考資料本文在我博客上的原地址利用實現消息實時推送項目背景介紹最近在寫的項目中存在著社交模塊，需要實現這樣的一個功能：當發生了用戶被點贊、評論、關注等操作時，需要由服務器向用戶實時地推送一條消息。最終完成的項目地址為：socket-message-push，這里...

RobinQu 2019-08-20 19:06 評論0 收藏0
基于node+socket.io+redis的多房間多進程聊天室

摘要：并且指定收到消息，以及端口的監聽方法。四代碼示例多房間實時聊天室配置版本須在里配置定義，并設置。使同一個的請求能夠落在同一個機器同一個進程中。通過主進程統一管理維護子進程，每個進程監聽一個端口。 showImg(http://7tszky.com1.z0.glb.clouddn.com/FkhApdRySR927nkdDZuUPBQbJtXG); 一、相關技術介紹：消息實時推送，指的...

Guakin_Huang 2019-08-22 11:02 評論0 收藏0
介紹一下漸進式 Web App(消息推送) - Part 3

摘要：在的的監聽事件下，可以接收任何傳入的消息。這個也將負責向已激活推送消息的所有用戶發送消息。上面的代碼負責彈出請求用戶是否允許或阻止瀏覽器中的推送消息。這個處理了保存和刪除訂閱同時也處理了消息推送的功能。我們將使用作為我們的消息服務。在第一篇：介紹一下漸進式 Web App(離線) - Part 1中我們介紹了一個典型的PWA應該是什么樣子的，并且介紹了一下sercer worker和...

vslam 2019-08-22 11:19 評論0 收藏0