Socket.io+Notification实现浏览器消息推送

williamwen1986 发布于2019-08-20 14:26 / 2367人阅读

摘要：新特性，用于浏览器的桌面通知，只有部分浏览器支持。通过实现服务端往浏览器客户端发送自定义消息。转载请注明出处原文链接实现浏览器消息推送开发前提本地安装以及对以及框架有一定了解。运行用浏览器打开成功的话即可看到页面的内容。

前言

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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