ttt

ps:本人技术能力也不怎么好,闲的时间也看看技术学习,之前看到项目中有signalR ,也跟着敲过,就是不明白有些地方跟着敲都跟博主都跑步起来。不知道原理,度娘了好久都找不到原因。看了一线码农的这个系列才有点明白。所以很是支持。同时也希望自己脚踏实地的学习,就算跟着博主抄吧。就当成知识点的积累。

1.安装SignalR:NuGet命令:

PM> Install-Package Microsoft.AspNet.SignalR

2.安装完成后,nuget 会为我们生成添加类库和js的引用

QQ截图20161211115240.pngQQ截图20161211115259.png

3.博主采用两种模式暂时学习也按两种来吧

1.1模拟RPC模式的Hub操作

  1.新建Hub集线器层  

选择web模板,下面有一个singlaR集线器类的模板,新建即可,在这个模板中有一个示例代码,Clients.All.hello() 就是用来调用客户端的hello方法,

而MyHub1中的Hello()用来让客户端调用,如此这样来实现双向通讯

214741-20160328155118863-1510354353.png

2.在Startup中注册  

其实注册很简单,比持久连接还容易,因为持久连接需要一个“类”map一个“url”这样的模式,而Hub就不需要了,它就是用一个默认的singlar路径

map整个hub,比如下图中的提示:

214741-20160328155632379-998037595.png

3.实现客户端

客户端实现的话,有代理一说和无代理一说,无代理的话,我们自己createProxy,有代理的话就是利用动态生成一个js文件进行编程。(这个地方比较坑,上图上有一个"/signalr",看了好多博客他们都用的有代理模式吧,页面上会有一个“<script src="signalr/hubs"></script>”,就是不知道怎么来的,跟着敲总是实现不了,看了博主的才明白。也是无语啊)

  1.有代理类的就上面说的

  有代理的模式下,需要动态生成一个js,使用方式就是script引用。

  214741-20160328160858129-697280920.png

有了这个js之后,我们就可以方便的编程了,但是有个遗憾点就是,js是在程序运行后才生成的,这样的话,在代码编程的时候是无法有这个动态生

成的js文件,唯一可以做到的就是:先将运行好的js代码copy到script文件夹下面,添加引用之后,就可以在vs中编程了,如下图:

QQ截图20161211134746.png

2.无代理模式

   <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.js"></script>
<script type="text/javascript">
//无代理
var conn = $.hubConnection();
var proxy = conn.createHubProxy("MyHub");

//注册客户端方法 “hello”
proxy.on("hello", function (data) {
console.log("客户端方法被调用");
});

conn.start().done(function (data) {

//调用服务器方法
proxy.invoke("Hello");

});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>

从上面可以看到,invoke方法就是调用服务器方法的操作,比如这里服务端的Hello方法,js中的on就是用来绑定客户端方法,让服务器调用,

然后我们运行一下:

214741-20160328160351457-85623962.png

hub这两种说完了,跟着博主的教程。下边来说说另外一种

1.2采用 PersistentConnection模式

 1.在新建项目中,我们选择”Sig“这里我们就使用默认的名字MyConnection1。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace WebApplication1
{
public class MyConnection1 : PersistentConnection
{
protected override Task OnConnected(IRequest request, string connectionId)
{
return Connection.Send(connectionId, "Welcome!");
}

protected override Task OnReceived(IRequest request, string connectionId, string data)
{
return Connection.Broadcast(data);
}
}
}

在上面,我们简单的看出来了,"持久连接“类有点像socket连接,有OnConnected和OnReceived事件,这里我们就不过多介绍,只要知道

Connection.Send方法中有一个叫做connectionID就好了,而这个connectionID就是客户端和服务器建立连接的唯一标识,比如上面我们看到的

return Connection.Send(connectionId, "Welcome!");就是当客户端连接到服务器之后,服务器主动将客户端推送一个”Welcome",以示欢迎。

214741-20160315161808178-760183228.png

2.startup类

由于signalR采用的是Owin中间件的模式来把signalR和FCL进行隔离,这样的话,大家就可以相互独立,谁也不依赖于谁,也就方便signalR快速独立

发展和更新,而Startup类的Configuration方法就是将一些中间件配置送到Owin管道中,下面我们要做的就是把MyConnection1和"/myconnection"

地址的映射送到Owin管道中,这样当我访问”/myconnection“的时候,就可以触发MyConnection1这个类了,如下图:

214741-20160315180652490-1950913803.png

[assembly: OwinStartup(typeof(WebApplication1.Startup1))]

namespace WebApplication1
{
public class Startup1
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR<MyConnection1>("/myconnection");
}
}
}

3.新建客户端

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script src="/scripts/jquery-1.10.2.js"></script>
<script src="/scripts/jquery.signalR-2.1.2.js"></script>
<script type="text/javascript">
var conn = $.connection("/myconnection");

conn.start().done(function (data) {
console.log("当前clientID=" + data.id);
});

//接受服务器的推送
conn.received(function (data) {
console.log("server返回的数据: " + data);
});
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/taidi/p/6189122.html