ttt

Posted wes

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于ttt的主要内容，如果未能解决你的问题，请参考以下文章

ttt

ttt

ttt

ttt

ttt

ttt