一.前言:每次写总要说一点最近的感想

进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态。全身都有点酸痛,这个可能一个星期只有周末才打一次球有关吧。好吧还是说说正经的,厂里的牛哥昨天分配给我一个任务,大概的一个意思就是“用这个signalR发送一条消息给客户端,客户端进行反馈响应”。任务听起来似乎很简单,但是没接触过signalR这玩意,我也是挺郁闷了一大半天,虽然之前有了解到这项目中用到用redis存储signalR发送的消息,苦于没有时间去实践学习,突然想起那句话“机会永远是给有准备的人”,平时过于懒惰没有合理分配学习计划,只能临时抱佛脚,关键是还不知道从哪抱起。经过一天的探索,终于摸清了门道。
所以写了篇文章,让那些正在接触SignaIR的同学们,看了这个例子也能学会使用signalR。所谓的signalR入门教程当然肯定是能让你入门的。

二:什么是signalR

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

  signalR内部有两类对象:

  1. Http持久连接(Persisten Connection)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected,
    OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
  2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

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

客户端和服务端的具体交互情况如下图所示:(看不懂此图没关系,写完例子再看就会有新的体会)

这段是抄的哦!,如果非要用一句话来说SignaIR是什么,其实就是微软自己封装好的实现即时通讯的一个类库。

三:SignaIR入门简单的例子

这才是重点,以上的介绍大家肯定对Asp.net signalR有了一个初步的了解,接下我们开始实践操作了。
先来看一下最终要实现的效果图吧:

1.新建一个MVC项目,我用的是Vs2015默认添加的是MVC5
2."引用" 右键点击 》管理Nuget程序包》搜索signalR,添加完signalR你可以在 Scripts 文件夹下看到:

3.向项目中添加一个signalR集线器(V2)命名为ServerHub:


4.在刚刚新建的ServerHub.cs 中写入 一下代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Data;
using System.Threading.Tasks; namespace SignaIREasyDemo
{
public class ServerHub : Hub
{
public void SendMsg(string message)
{
//调用所有客户端的sendMessage方法
Clients.All.sendMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),message);
}
}
}

5.如果你是vs2015 的话添加的mvc项目 不进行身份验证的那种吧,必须得添加一个Startup 类.   
  如果没有这个类,请添加,不然的话项目运行不起来的,具体代码如下:

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRQuickStart.Startup))]
namespace SignalRQuickStart
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
// 配置集线器
app.MapSignalR();
}
}
}

6.在Control 里新建一个Chat Action方法,在Chat视图里代码如下:

@{
ViewBag.title = "SignaIR聊天窗口";
}
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="messageBox"></ul>
</div>
@section scripts
{
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
$(function () {
//引用自动生成的集线器代理
var chat = $.connection.serverHub;
//定义服务器调用的客户端sendMessage来显示新消息
chat.client.sendMessage = function (name, message)
{
//向页面添加消息
$("#messageBox").append('<li><strong style="color:green">'+htmlEncode(name)+'</strong>:'+htmlEncode(message)+'</li>');
}
//设置焦点到输入框
$('#message').focus();
//开始连接服务器
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
//调用服务器端集线器的Send方法
chat.server.sendMsg($('#message').val());
//清空输入框信息并获取焦点
$("#message").val('').focus();
})
})
});
//为显示的消息进行html编码
function htmlEncode(value)
{
var encodeValue = $('<div/>').text(value).html();
return encodeValue;
}
</script>
}
好了,一个signalR简单的入门的例子就ok了,最终的效果图在上面也已经看到了。下面我们就简单的分析一下吧
从最终的效果图 我们可以看到,在任何一个web 页面中发送的消息所有的 页面都会接收到该消息。这种应用在IM系统非常广泛常见。
当然signalR并不局限于这种B/S模式的消息推送,在C/S 同样也能应用,目前我们公司xamarin android所用的就是这个signalR实现的PC之间、PC与移动端、移动端与移动端之间的交流,使用之后会发现的确挺方便的。
有人可能感觉很郁闷了,在视图中引入 这段js有什么作用?也并有写啊。

注意!,这是虚拟目录,也就是你在OWIN Startup中注册的地址
<script src="~/signalr/hubs"></script>

其实在服务器端声明的所有Hub信息,最终都会生成JavaScript输出到客户端,其实谷歌浏览器中F12 ,在Sources你就可以看到写的源代码了:


还是来看一下在这种B/S 模式中 signalR是如何运行的吧。首先程序开始的时候,Web页面就已经与signalR的服务建立连接。
$.connection.hub.start() 意思就是有signalR服务建立连接
.done 函数表示连接成功后为发送的按钮绑定一个单击事件
发送消息的方法:chat.server.sendMsg($('#message').val())
在ServerHub重写一个 OnConnected 方法来监控客户端的连接情况,的确程序运行的时候web页面就已经开始建立连接了,在调试的时候可以在输入中看到 "客户端连接成功!"

       //重写OnConnected 方法
      public override Task OnConnected()
{
System.Diagnostics.Trace.WriteLine("客户端连接成功!");
return base.OnConnected();
}

一个简单的如何使用signalR就是这么多,用法很广泛,用的人也挺多的,所以值得学习。下一步准备在Xamarin android 中也写一个聊天的例子。希望能完整一点吧。下载地址:http://download.csdn.net/detail/kebi007/9683942

作者:张林

标题:MVC中使用SignaIR入门教程 原文地址:http://blog.csdn.net/kebi007/article/details/53167003

转载随意注明出处



[置顶] MVC中使用signalR入门教程的更多相关文章

  1. MVC中使用SignaIR入门教程

    一.前言:每次写总要说一点最近的感想 进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态.全身都有点酸痛,这个可能一个星期只有周末才打一 ...

  2. .NET轻量级MVC框架:Nancy入门教程(二)——Nancy和MVC的简单对比

    在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...

  3. MVC 中使用 SignalR 实现推送功能

    MVC 中使用 SignalR 实现推送功能 一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Pus ...

  4. 在MVC中使用SignalR

    在MVC中使用SignalR 接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET Si ...

  5. 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]

    在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...

  6. MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

    前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...

  7. MVC中使用SignalR

    MVC中使用SignalR打造酷炫实用的即时通讯功能附源码   前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...

  8. MVC中使用SignalR打造酷炫实用的即时通讯功能(轉載)

    資料來源:http://www.fangsi.net/1144.html 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯 ...

  9. 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR

    接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...

随机推荐

  1. [react] 细数 React 的原罪

    Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...

  2. Foundation基础框架

    自己总结的 // // main.m // 01-结构体 // // Created by Mac-ZhangXiaoMeng on 14/12/29. // Copyright (c) 2014年 ...

  3. C#开发Windows窗体应用程序的步骤

    使用C#开发应用程序时,一般包括创建项目.界面设计.设置属性.编写程序代码.保存项目.程序运行等6个步骤. 1.创建项目 在Visual Studio2017开发环境中选择“文件”→“新建”→“项目” ...

  4. 第七届C/C++B-方格填数 DFS

    方格填数 如下的10个格子    +--+--+--+    |  |  |  | +--+--+--+--+ |  |  |  |  | +--+--+--+--+ |  |  |  | +--+- ...

  5. 详解spl_autoload_register()函数

    一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.class.php    <?php    class  ...

  6. 用 Label 控制 Service 的位置 - 每天5分钟玩转 Docker 容器技术(106)

    上一节我们讨论了 Service 部署的两种模式:global mode 和 replicated mode.无论采用 global mode 还是 replicated mode,副本运行在哪些节点 ...

  7. 大白话Vue源码系列(01):万事开头难

    阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...

  8. python之 json里字典中的value去重

    import simplejson as json with open(r'C:\Users\Desktop\test.txt', 'r' ) as f1, open(r'C:\Users\Deskt ...

  9. 【WF2017】Mission Improbable

    http://www.lydsy.com/JudgeOnline/problem.php?id=4950 对于俯视图很好解决,把所有不是0的位置拿到剩1就可以了. 对于正视图与侧视图,稍微想一下也能发 ...

  10. HDU 4556 Stern-Brocot Tree

    题意:求SB树第N层分母分子小于均等于N的数有多少? 搞清楚了SB Tree的性质,这道题就很容易了.因为SB Tree中的数均为最简分数,所以筛一波欧拉函数即可. #include<bits/ ...