前言

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的官方示例)

<!doctype html>
<html>
<head>
<title>Socket.IO Notification</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>

新建一个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页面中的</body>上方引入socket.io文件,并用emit向服务器提交数据以及监听事件notification,接收服务器推送的消息
注意,引入socket.io的方式在运行node index.js之后才有效果,直接打开index.html是找不到这个文件的

    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
let socket = io();
$('form').submit(function(){
socket.emit('notification', $('#m').val());
$('#m').val('');
return false;
});
socket.on('notification', function(msg){
console.log(msg);
});
</script>

浏览器打开http://localhost:8080 后,在input框中输入,点击发送,在nodejs运行的控制台可以看到如下信息:

a user connected //以下数据是输入框输入的数据
hello
test
测试

实现自定义消息推送

完整代码:

    <script>
let socket = io();
$('form').submit(function(){
socket.emit('notification', $('#m').val());
$('#m').val('');
return false;
});
socket.on('notification', function(msg){
notice(msg); //若允许通知,待输入消息后监听变化就会调用通知方法
}); Notification.requestPermission(function(permission) {}); //询问浏览器是否允许通知 function notice(msg) {
let _notification = new Notification(`消息通知`,{
body:`${msg}`,
icon:'http://localhost:8080/23539868.jpg'
}); setTimeout(function(){
_notification.close(); //设置5秒后自动关闭通知框
},5000); }
</script>

运行截图

完整示例代码见GitHub

本文转载于:猿2048Socket.io+Notification实现浏览器消息推送

Socket.io+Notification实现浏览器消息推送的更多相关文章

  1. node.js中使用socket.io + express进行实时消息推送

    socket.io是一个websocket库,包含客户端的js和服务端的node.js,可以在不同浏览器和移动设备上构建实时应用. 一.安装 socket.io npm install socket. ...

  2. ZH奶酪:基于ionic.io平台的ionic消息推送功能实现

    Hybrid App越来越火,Ionic的框架也逐渐被更多的人熟知. 在mobile app中,消息推送是很必要的一个功能. 国内很多ionic应用的推送都是用的极光推送,最近研究了一下Ionic自己 ...

  3. 【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)

    序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式).感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下 ...

  4. socket.io与redis构建实时推送

    准备工作 1:准备nodejs环境 2:使用npm工具安装 socket.io  npm install socket.io 3:下载客户端socket.io文件 解压附件中的文件 node app. ...

  5. Notification web 桌面消息推送

    var NotificationHandler = { isNotificationSupported: 'Notification' in window, isPermissionGranted: ...

  6. 【springboot】【socket】spring boot整合socket,实现服务器端两种消息推送

    参考地址:https://www.cnblogs.com/hhhshct/p/8849449.html

  7. How Javascript works (Javascript工作原理) (九) 网页消息推送通知机制

    个人总结: 1.介绍了网页消息推送通知机制 全文地址:https://github.com/Troland/how-javascript-works 这是 JavaScript 工作原理的第九章. 现 ...

  8. IOS - 消息推送原理和实现

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...

  9. iOS 消息推送原理及实现Demo

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...

随机推荐

  1. Word:在文中插入对参考文献的引用

    1.工具栏→插入→交叉引用 2."交叉引用"工具栏 引用类型:编号项: 引用内容:段落编号 选中要引用的参考文献编号 3.结果

  2. Flutter 设计模式|工厂模式家族

    文/ 杨加康,CFUG 社区成员,<Flutter 开发之旅从南到北>作者,小米工程师 在围绕设计模式的话题中,工厂这个词频繁出现,从 简单工厂 模式到 工厂方法 模式,再到 抽象工厂 模 ...

  3. JZ-013-调整数组顺序使奇数位于偶数前面

    调整数组顺序使奇数位于偶数前面 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对 ...

  4. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  5. phpStudy 升级 MySQL5.7

    最新在开发项目中需要使用到mysql5.7以上版本,但是phpStudy的版本是5.5,所以需要针对MySQL升级一下 步骤  1.备份原本MySQL 备份:原本phpStudy中的MySQL文件夹改 ...

  6. ASP.NET Core框架探索之Authentication

    今天我们来探索一下ASP.NET Core中关于权限认证,所谓权限认证,就是通过某些方式获取到用户的信息. 需要开启权限认证,我们首先需要在容器中注入认证服务,使用services.AddAuthen ...

  7. centos网卡配置修改

    centos网卡配置文件一般位于:/etc/sysconfig/network-scripts/ 文件名一般为:ifcfg-eno或者ifcfg-eth0类似的文件,可以先用ip addr 命令或者是 ...

  8. 【黑马程序员C++ STL】学习记录

    黑马程序员 2017 C++ STL 教程(STL 部分已完结) 基于黑马STL课程整理:黑马程序员2017C++STL教程 视频链接 专栏:本STL专栏目录 文章目录 黑马程序员 2017 C++ ...

  9. Linux检查服务器是否被入侵

    Linux检查服务器是否被入侵 检查root用户是否被纂改 awk -F: '$3==0{print $1}' /etc/passwd awk -F: '$3==0 {print}' /etc/pas ...

  10. java web中统一结果返回封装类JsonResult

    废话不多说,直接上代码,源代码是慕课网老师风间影月写的,我拿来直接用了. package com.yb.entity; import java.util.List; import com.faster ...