成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Socket.io+Notification實現(xiàn)瀏覽器消息推送

williamwen1986 / 2582人閱讀

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

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

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

環(huán)境搭建

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

npm初始化package.json文件 npm init

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

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

編寫代碼 構(gòu)建通信環(huán)境

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



  
    Socket.IO Notification

    新建一個index.js文件，并在js文件中構(gòu)建相應(yīng)的對象和變量，創(chuàng)建監(jiān)聽端口為8080 的服務(wù)器，以及添加映射到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頁面的內(nèi)容。
    在index.js的監(jiān)聽端口代碼上方添加socket.io的監(jiān)聽事件，監(jiān)聽用戶連接的connection。

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

    創(chuàng)建監(jiān)聽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向服務(wù)器提交數(shù)據(jù)以及監(jiān)聽事件notification，接收服務(wù)器推送的消息
    注意，引入socket.io的方式在運行node index.js之后才有效果，直接打開index.html是找不到這個文件的

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

    a user connected //以下數(shù)據(jù)是輸入框輸入的數(shù)據(jù)
hello   
test
測試
    實現(xiàn)自定義消息推送

    完整代碼：
    運行截圖

    完整示例代碼見GitHub

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81628.html

    相關(guān)文章

    • 基于workerman實現(xiàn)的web消息推送站內(nèi)信功能

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

      YFan 評論0 收藏0

    • 利用 socket.io 實現(xiàn)消息實時推送

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

      RobinQu 評論0 收藏0

    • 基于node+socket.io+redis的多房間多進程聊天室

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

      Guakin_Huang 評論0 收藏0

    • 介紹一下漸進式 Web App(消息推送) - Part 3

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

      vslam 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <