node.js+socket.io+express+HTML5(桌面提醒Notification)本地模拟即时通讯和弹窗提醒

新的一年开始了~

效果如图:

Snip20170131_10.png

Snip20170131_13.png

Snip20170131_12.png

Snip20170131_11.png

在腾讯微信的网页版和腾讯视频中,大致都见到了,提示"允许通知的窗口" .如图

Snip20170131_1.png

Snip20170131_4.png

微信和腾讯视频(需要获取"通知权限"),

如果允许权限后,收到来自服务器的推送消息,就可以本地打开通知,如图

Snip20170131_3.png

废话不多说,今天在这里,由一个Node服务器(Nodejs服务器如何开启,就不详细说了),配合express和socket.io框架,搭建本地服务器,演示即时通讯功能:
一.新建 本地文件夹
1.进入文件夹,我这里是 NodeNoti 文件夹

Snip20170131_5.png

2.npm init首先初始化本地文件,配置文件信息.即package.json

Snip20170131_7.png

{
    "name": "junxiao",
    "version": "0.0.1",
    "description": "socket.io",
    "main": "server.js",
    "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "start": "node server.js"
        },
     "author": "",
     "license": "ISC"
  }

3.安装express框架和socket.io

    npm install express --save-dev
    npm install socket.io --save-dev

4.在当前目录下,新建server.js

    var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    users = [];
//specify the html we will use
app.use('/', express.static(__dirname + '/www'));
//bind the server to the 80 port
//server.listen(3000);//for local test
server.listen(process.env.PORT || 3000);//publish to heroku
//server.listen(process.env.OPENSHIFT_NODEJS_PORT || 3000);//publish to openshift
//console.log('server started on port'+process.env.PORT || 3000);
//handle the socket
io.sockets.on('connection', function(socket) {
    //new user login
    socket.on('login', function(nickname) {
        if (users.indexOf(nickname) > -1) {
            socket.emit('nickExisted');
        } else {
            //socket.userIndex = users.length;
            socket.nickname = nickname;
            users.push(nickname);
            socket.emit('loginSuccess');
            io.sockets.emit('system', nickname, users.length, 'login');
        };
    });
    //user leaves
    socket.on('disconnect', function() {
        if (socket.nickname != null) {
            //users.splice(socket.userIndex, 1);
            users.splice(users.indexOf(socket.nickname), 1);
            socket.broadcast.emit('system', socket.nickname, users.length, 'logout');
        }
    });
    //new message get
    socket.on('postMsg', function(msg, color) {
        socket.broadcast.emit('newMsg', socket.nickname, msg, color);
    });
    //new image get
    socket.on('img', function(imgData, color) {
        socket.broadcast.emit('newImg', socket.nickname, imgData, color);
    });
    //new Notification
    socket.on('noti',function(config){
        socket.broadcast.emit('notification',socket.nickname,config);
    });
});

下文
Node.js+socket.io即时通讯+HTML5桌面提醒(notification)(下)

谢谢Google查到的资料:
https://developer.mozilla.org/en-US/docs/Web/API/notification
http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html

祝大家 新年快乐 工作顺利~