Socket.io+Notification完成浏览器音讯推送

2019年8月31日 262次阅读 来源: kira

媒介

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

《Socket.io+Notification完成浏览器音讯推送》

    原文作者：kira
    原文地址: https://segmentfault.com/a/1190000008428028
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞