websocket+nodejs实现即时通讯,及notification桌面通知的应用

WebSocket:

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

使用websocket可以实现即时通讯,如:即时聊天、消息推送等!

使用方法如下(这里服务端使用nodejs实现)

步骤一:服务端

nodejs部分

在项目里面新建一个server.js,创建服务,指定8081端口,将收到的消息打印出来。

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8081 });
wss.on('connection', function (ws) {
    ws.on('message', function (message) {
        //把消息发送到所有的客户端
        // wss.clients获取所有链接的客户端
        wss.clients.forEach(function(client){
            client.send('收到消息:' + message);
            console.log('收到消息:' + message);
        })
    });
});
注意:
这里首先需要安装ws模块插件:cnpm install ws –dev-save

 

步骤二:客户端

html部分

 <div id="demo"></div>//显示服务器发送到客户端的信息
 <div id="msg">
     <input type="text" id="input">
     <button type="button" id="btn">send</button>//将信息发送到服务器
 </div>

javascript部分

 
$(function(){
    if(!window.WebSocket){
        alert('你的浏览器不支持WebSocket');
    }else{
        //创建一个Socket实例
        var ws = new WebSocket('ws://localhost:8081', 'ljiong');
        //连接正在建立
        if(ws.readyState == WebSocket.CONNECTING){
            console.log("连接正在建立");
        }
        //打开Socket
        ws.onopen = function(e){
            if(ws.readyState == WebSocket.OPEN){
                console.log("WebSocket open!");
            }
        };
        //当socket服务器有消息更新时
        ws.onmessage = function(e){
            document.querySelector('#demo').innerHTML += '<div>' + e.data + '</div>';
            console.log('客户端接收服务端数据时触发');
            var timestamp = Date.parse(new Date());console.log(timestamp)
            //调用桌面消息通知
            var title = "日程提示";
            var body = e.data;
            var tag = timestamp;
            var icon = 'Ants.jpg';
            notice(title, body, tag, icon);
        }
        document.querySelector('#btn').addEventListener('click', function(e){
            e.preventDefault();
            var msg = document.getElementById('input').value;
            if(msg != ''){
                //向socket服务器发送消息
                ws.send(msg);
            }
        }, true)
        
    }
})
//调用浏览器通知  在桌面左下角显示
function notice(title, body, tag, icon){
    Notification.requestPermission( function(status) {
        console.log(status); // 仅当值为 "granted" 时显示通知
        var n = new Notification(title, {
            requireInteraction: true,//设置桌面通知不自动隐藏
            body: body,
            silent: true,
            tag: tag,
            icon: icon
        }); // 显示通知
    });
}

觉得不错,赞助我:




0