前言

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. 递归——深度优先搜索(DFS)——以滑雪问题为例(自顶而下)

    一.问题:滑雪 问题描述:小明喜欢滑雪,为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.小明想知道在一个区域中最长底滑坡.区域由一个二维数组给出.数组的每 ...

  2. 判断jQuery是否加载,如果未加载则加载

    一般情况返回的js这么写history.go(-1) 但是如果是从别人分享过来的,就没有反应 所以就做个判断,没有上一页就返回首页 if (typeof jQuery == 'undefined') ...

  3. Java安装与卸载

    Java安装与卸载 Java优势 面向对象 可移植性,跨平台易用 高性能 为分布式设计 具有动态性 支持多线程 安全性 健壮性,运行前会对内存进行检查 Java三大版本 JavaSE:标准版 Java ...

  4. LGP5161口胡

    大家好,我是后缀自动机套线段树魔怔人,我非常喜欢使用后缀自动机套线段树草字符串题. 看到一个区间加上一个相同的数后等于另外一个区间,很容易想到先对序列做差分,统计长度为1的答案后再来统计这些. 直接统 ...

  5. LGP4001题解

    题目大意 给定一张无向图,需要消耗代价才能使一条边被[数据删除],求使这张图不连通的最小代价. 一看就是最小割的应用啊... 从 \(u\) 到 \(v\),边权为 \(w\) 的边,建两条:一条从 ...

  6. .Net6 设置环境变量

    开发过程中经常要发布一个版本到测试服上给测试人员测试,可能需要直接输出错误信息,需要设置环境变量为Development,如果是IIS可以通过设置IIS环境变量,见下面这篇文章 https://blo ...

  7. Linux卸载源码编译安装的软件

    使用auto-apt 和 checkinstall,具体命令如下 #安装auto-apt和checkinstall apt install auto-apt checkinstall #在源码目录中 ...

  8. map, reduce和filter(函数式编程)

    # map可以用于对可遍历结构的每个元素执行同样的操作,批量操作: map(lambda x: x**2, [1, 2, 3, 4]) # [1, 4, 9, 16] map(lambda x, y: ...

  9. 2.5 C++STL stack详解

    文章目录 2.5.1引入 2.5.2 代码示例 2.5.3 代码运行结果 总结 2.5.1引入 stack是一种"先进后出"的容器. 不过值得注意的是stack是一种关联容器,是通 ...

  10. 论如何在使用RedisStandaloneConfiguration时让JedisConnectionFactory用上JedisPoolConfig

    前言 公司项目上线后经常运行一两天后就会出现延时.无响应的情况,当时第一反应觉得可能是某些业务优化不行,检查业务也没发现有什么问题,前前后后倒是修了两三个BUG,本以为没啥事儿了,但也就好了两天,很奇 ...