使用SignalR实现消息提醒

Asp.net SignalR是微软为实现实时通信的一个类库。一般情况下，SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信，随着Html5中WebSockets出现，SignalR也支持WebSockets通信。另外SignalR开发的程序不仅仅限制于宿主在IIS中，也可以宿主在任何应用程序，包括控制台，客户端程序和Windows服务等，另外还支持Mono，这意味着它可以实现跨平台部署在Linux环境下。

SignalR内部有两类对象：

Http持久连接(Persisten Connection)对象：用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据，而服务器端不需要实现太多细节，只需要处理PersistentConnection 内所提供的五个事件：OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
Hub（集线器）对象：用来解决实时(realtime)信息交换的功能，服务端可以利用URL来注册一个或多个Hub，只要连接到这个Hub，就能与所有的客户端共享发送到服务器上的信息，同时服务端可以调用客户端的脚本。

SignalR将整个信息的交换封装起来，客户端和服务器都是使用JSON来沟通的，在服务端声明的所有Hub信息，都会生成JavaScript输出到客户端，.NET则依赖Proxy来生成代理对象，而Proxy的内部则是将JSON转换成对象。

消息提醒也就是当客户有新消息来时，在客户端的右下角进行弹框提醒。要实现这个功能的思路是：

SignalR服务端推送消息到客户端的实现方式为调用客户端的receiveMessage方法来将消息附加到聊天记录内，所以我们可以在客户端的receiveMessage方法中实现弹框的逻辑。
找好了方法定义的位置后，自然是去找一个比较好的弹框效果JS类库了，这里使用的是iNotify库来实现的。该库的github地址为：https://github.com/jaywcjlove/iNotify，在线测试地址为：http://jslite.io/iNotify/
你看QQ或者微信的消息提醒，消息提醒一般是在你不在聊天的当前Tab页面才会弹出，我们可以利用Html5 visibilitychange事件来实现，不过我这里是通过失焦点的方式，也就是focus事件。

JavaScript

// 接收消息

        systemHub.client.receivePrivateMessage = function(fromUserId, userName, message) {

       // 专题二中的代码 

      // 消息提醒的代码

    if (active == false) {

                var iN = new iNotify({

                    effect: 'flash',

                    interval: 500,

                    audio: {

                        file: ['/Music/msg.mp3']

                    },

                    notification: {

                        title: "通知！",

                        body: '您有一条新消息'

                    }

                }); 

                iN.setTitle(true).player();

                iN.setFavicon(true).setTitle(true).notify();

            }

        };

}

巴特西

使用SignalR实现消息提醒

最新文章

热门文章