Asp.net使用SignalR实现消息提醒

2024-10-21 03:48:30

一、引言
　　前面一篇文章我介绍了如何使用SignalR实现图片的传输，然后对于即时通讯应用来说，消息提醒是必不可少的。现在很多网站的都有新消息的提醒功能。自然对于SignalR系列也少不了这个功能的实现了。在这篇文章中将介绍如何使用SignalR+iNotify库来实现新消息的声音和弹框提醒。

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

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

　　这里需要先在Index.cshtml页面引入INotify库的JS文件。即：

 <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
 <script src="~/signalr/hubs"></script>
 <script src="~/Scripts/layer/layer.min.js"></script>
 <script src="~/Scripts/iNotify.js"></script>

　　然后将下面JS代码加入到receivePrivateMessage方法内

 var active = true;
 window.onfocus = window.onblur = function(e) {
  active = (e || event).type === "focus";
 };

 // 接收消息
  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();
   }
  };
}

　　经过上面的2步，新消息声音和弹框提醒就完成了，但是这个弹框功能不支持IE浏览器，因为弹框效果使用的Html5 Notifination API 来实现的，这个特性在IE浏览器中不支持，所以也就不能实现了。从而可以看出微软的IE浏览器真是一个坑啊，所以微软果断放弃它，推出Edge，Edge具体怎么我自己没有试验过，不过很多朋友评论说仍然是个坑。

　　接下来让我们看看具体的运行效果吧。

源码下载：使用SignalR实现消息提醒

到此，本篇文章的内容就结束到此。本篇博文之后，SignalR系列也就告一段落了，谢谢大家的阅读。

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

前言浏览器访问网页通过的是 HTTP 协议,浏览器发送一个请求,服务器返回一个结果.服务器是被动接收请求,如果想反过来,服务器主动发送信息给浏览器咋办呢? 有很多解决方法,比如轮循(浏览器定时去向服务器询问是否有新数据).WebSocket(HTML 5)-- 而 SignalR 就是把这些技术综合在一起,它自动识别当前浏览器支持哪些方式,然后选择最优的方式.我们开发时不必去关注这些细节,SignalR 会帮我们实现,而且 SignalR 是微软开发的,好用是一贯风格. 环境 .NET 4.5
Asp.net使用SignalR实现聊天室的功能

一.引言在前一篇文章<Asp.net使用SignalR实现酷炫端对端聊天功能>中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识.那SignalR类库里面是否有这样现有的方法呢?答案是肯定的. // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 //
Asp.net SignalR快速入门

今天的专题就是让大家可以快速的上手Asp.net SignalR.废话不多说了,下面正式进入今天专题的内容. 二.Asp.net SignalR 是个什么东东 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主
Asp.net使用SignalR实现酷炫端对端聊天功能

一.引言在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,
Asp.net SignalR支持的平台有哪些

SignalR支持多种服务器和客户端配置.此外,每种传输方式都有自身的要求限制:如果某种传输方式不被系统支持,SignalR能够优雅地将故障转移到其他类型的传输方式. 系统要求 SignalR服务器组件可以被多种服务器配置所支持.本节介绍所支持的操作系统,.Net框架,IIS及其他组件. 支持的服务器操作系统 SignalR的服务器组件被以下服务器和客户端操作系统支持. Windows Server 2012 Windows Server 2008 R2 Windows 8 Windows 7
Asp.net使用SignalR实现发送图片

一.引言在前一篇已经介绍了如何使用SignalR来实现聊天室的功能,在这篇文章中,将实现如何使用SignalR来实现发送图片的功能. 二.实现发送图片的思路我还是按照之前的方式来讲述这篇文章,首先,让我们来理清下实现发送图片功能的思路. 图片的显示,除了直接指定图片的路径外(这种实现方式也称为:http URI schema),还可以通过Data Uri Schema的方式来显示图片.这种方式允许在网页里以字符串形式直接内嵌图片.形式如下所示: 复制代码代码如下: <img src="
ASP.NET MVC中SignalR的简单应用

一.简介 ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据.--百度百科首先ASP.NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.让客户端(Web页面)和服务器端可以互相通知消息及调用方法. SignalR自动处理连接
Asp.NET MVC中使用SignalR实现推送功能

一.简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请求或使用轮询技术来获取消息. 可访问其官方网站:https://github.com/SignalR/ 获取更多资讯. 二.Asp.net SignalR 是个什么东东 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(lo
Asp.net SignalR创建实时聊天应用程序

一.概述使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习SignalR 开发任务包括︰向 MVC 5 应用程序添加那么 SignalR 图书馆. 创建集线器和浩然启动类,以将内容推送到客户端. 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器. 下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序. 二.实现创建一个 ASP
详解在ASP.NET Core下使用SignalR技术

一.前言上次我们讲到过如何在ASP.NET Core中使用WebSocket .这次的主角是SignalR它为我们提供了简化操作WebSocket的框架. ASP .NET SignalR 是一个ASP.NET 下的类库,可以在ASP.NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的.WebSockets是HTML5提供的新的API,可以在Web网页与服务器端间建立Socket连接,当WebSock

Asp.net使用SignalR实现消息提醒

相关推荐

随机推荐