Asp.net SignalR 让实时通讯变得如此简单

巡更项目中,需要发送实时消息,以及需要任务开始提醒,于是便有机会接触到SignalR,在使用过程中,发现用SignalR实现通信非常简单,下面我思明将从三个方面分享一下:

一、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

聊天室,如在线客服系统,IM系统等

消息的实时推送服务

巡更人员位置的实时推送

三、怎么实现SignalR,下面主要介绍一下SignalR第一大功能,聊天。以下是一个简单的DEMO:

1、新建一个asp.net web 应用程序

2、选择模板MVC,同时更改无身份验证

3、选择新建的项目,右击-->选择管理NuGet程序包-->搜索 signalr--> 安装Microsoft ASP.NET SignalR

4、新建启动程序 Startup.cs

在类中添加代码:

app.MapSignalR();

5、新建SignalR集线器类ChatHub.cs

6、在集线器类ChatHub.cs中添加如下代码

public class ChatHub : Hub
 {
  /// <summary>
  /// 供客户端调用的服务器端代码
  /// </summary>
  /// <param name="message"></param>
  public void Send(string message)
  {
   var name = Guid.NewGuid().ToString().ToUpper();
   // 调用所有客户端的sendMessage方法
   Clients.All.sendMessage(name, message);
  }

  /// <summary>
  /// 客户端连接的时候调用
  /// </summary>
  /// <returns></returns>
  public override Task OnConnected()
  {
   Trace.WriteLine("客户端连接成功");
   return base.OnConnected();
  }
 }

7、修改Index.cshtml页面代码

@{
 ViewBag.Title = "聊天窗口";
}

<h2>Chat</h2>

<div class="container">
 <input type="text" id="message" />
 <input type="button" id="sendmessage" value="Send" />
 <input type="hidden" id="displayname" />
 <ul id="discussion"></ul>
</div>

@section scripts
{
 <!--引用SignalR库. -->
 <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
 <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
 <script src="~/signalr/hubs"></script>

 <script>
  $(function () {
   // 1、引用自动生成的集线器代理 必须用小写字母开头
   var chat = $.connection.chatHub;

   // 2、开始连接服务器 done函数表明建立连接成功后为发送按钮注册了一个click事件
   $.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
     // 调用服务器端集线器的Send方法 也要小写开头
     chat.server.send($('#message').val());
     // 清空输入框信息并获取焦点
     $('#message').val('').focus();
    });
   });

   // 3、定义服务器端调用的客户端sendMessage来显示新消息
   chat.client.sendMessage = function (name, message) {
    // 向页面添加消息
    $('#discussion').append('<li><strong>' + htmlEncode(name)
     + '</strong>: ' + htmlEncode(message) + '</li>');
   };

   // 设置焦点到输入框
   $('#message').focus();
  });

  // 为显示的消息进行Html编码
  function htmlEncode(value) {
   var encodedValue = $('<div />').text(value).html();
   return encodedValue;
  }
 </script>
}

8、直接运行程序,打开多个网页,都可以收到相同的消息。。如下:

综上所述,SignalR使用起来很方便,而且配置很简单,功能也很强大。

以上这篇Asp.net SignalR 让实时通讯变得如此简单就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Asp.NET MVC中使用SignalR实现推送功能
  • Asp.net SignalR创建实时聊天应用程序
  • ASP.NET MVC中SignalR的简单应用
(0)

相关推荐

  • 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 MVC中SignalR的简单应用

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

  • Asp.net SignalR 让实时通讯变得如此简单

    巡更项目中,需要发送实时消息,以及需要任务开始提醒,于是便有机会接触到SignalR,在使用过程中,发现用SignalR实现通信非常简单,下面我思明将从三个方面分享一下: 一.SignalR是什么 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅

  • B/S(Web)实时通讯解决方案分享

    B/S的实时通讯实现起来比较麻烦,因为http协议是无状态的,导致一些实时消息通知和聊天等功能比较难以实现,本文主要简述几种自己之前常用的几种方式. 1.传统的HTTP协议是无状态的 传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如 浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据,多个用户进行实时的交流也比较困难,比如聊天系统. 2.目前比较流量的实时通讯方式 轮询 条件:任何Web端 客户端定时向服务器发送Ajax请求,服务

  • Asp.net SignalR应用并实现群聊功能

    ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据.(来自官方介绍.) SignalR官网 -1.写这篇的原因 在上篇文章B/S(Web)实时通讯解决方案中,并没有详情介绍SignalR,所以另起一篇专门介绍SignalR,本文的侧重点是Hub功能. 0.先看最终实现效果 github

  • Asp.net SignalR快速入门

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

  • WPF+ASP.NET SignalR实现后台通知功能的示例代码

    目录 涉及知识点 前提条件 服务端 客户端 运行示例 在实际业务中,当后台数据发生变化,客户端能够实时的收到通知,而不是由用户主动的进行页面刷新才能查看,这将是一个非常人性化的设计.比如数字化大屏,并没有人工的干预,而是自动的刷新数据,那如何才能实现数据的实时刷新呢?本文以一个简单示例,简述如何通过WPF+ASP.NET SignalR实现消息后台通知以及数据的实时刷新,仅供学习分享使用,如有不足之处,还请指正. 通过上一篇文章的学习,了解了如何通过SignalR实现在线聊天功能,在示例中,我们

  • WPF+ASP.NET SignalR实现简易在线聊天功能的示例代码

    目录 涉及知识点 什么是ASP.NET SignalR 在线聊天整体架构 ASP.NET SignalR在线聊天服务端 1. 创建ASP.NET Web API项目 2. 创建消息通知中心Hub 3. 注册服务和路由 4. ASP.NET SignalR中心对象生存周期 SignalR客户端 1. 安装SignalR客户端依赖库 2. 客户端消息接收发送 运行示例 在实际业务中,当后台数据发生变化,客户端能够实时的收到通知,而不是由用户主动的进行页面刷新才能查看,这将是一个非常人性化的设计.有没

  • react.js 父子组件数据绑定实时通讯的示例代码

    react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </

  • 微信小程序webview与h5通过postMessage实现实时通讯的实现

    在做 React Native 应用时,如果需要在 App 里面内嵌 H5 页面,那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯,但是在小程序里面,虽然也提供了一个 webview 组件,但是,在进行 postMessage 通讯时,官方文档里面给出了一条很变态的说明: 网页向小程序 postMessage 时,会在特定时机(小程序后退.组件销毁.分享)触发并收到消息.e.detail = { data },data 是多次 postMess

  • nodejs 使用nodejs-websocket模块实现点对点实时通讯

    1.首先安装好nodejs-websocket npm install nodejs-websocket --save -g 2.编写服务端 var ws = require("nodejs-websocket") var AllUserData = new Array() // Scream server example: "hi" -> "HI!!!" var server = ws.createServer(function (con

随机推荐