zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    C#的类,构造函数以及Array阵列的数据填充与绑定
    子菜单显示了,就不想隐藏了
    获取DataTable选择第一行某一列值
    两个dropDownList和一个GridView的选择与显示
    127.0.0.1SQLEXPRESS连接异常
    Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive.
    The system cannot find the file specified
    Handler "BlockViewHandler" has a bad module "ManagedPipelineHandler" in its module list
    The Web server is configured to not list the contents of this directory.
    分布式监控系统Zabbix-图形集中展示插件Graphtree安装笔记
  • 原文地址:https://www.cnblogs.com/taidi/p/6189122.html
Copyright © 2011-2022 走看看