Ajax+SignalR实现多客户端数据同步更新（1） 经验分享

初学SignalR，仅供大家参考，本来是想实现更改数据库，客户端实时更新的，现在只是实现客户端之前的无刷新同步更新，后期解决了会继续更新，记录下来方便以后回忆

首先创建一个Web工程 ，然后在项目中引入SignalR的包以及JQuery的包，我个人的如下图，具体需要什么可以根据个人需要

第一步把需要的环境准备好之后，接着就可以开始编码了

首先创建一个Startup.cs类，该类的作用就是启用SignalR，类代码如下：

</pre><pre class="objc" name="code">using Microsoft.Owin;
using Owin;
using System.Configuration;
using System.Data.SqlClient;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

然后就要创建一个SignalR的类了，如果项目中引入了SignalR，可以直接在添加项中找到添加SignalR的类。如下图

<img src="https://img-blog.youkuaiyun.com/20160813103650455?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

定义了SignalR的类之后，可以看到类自动继承了Hub类，然后我们在类里添加一个方法

        public void updateTa()//<strong><u><span style="background-color: rgb(255, 255, 51);">这里注意：如果我们定义的名称是大写开头(如：UpdateTa)，但是我们调用的时候要 写成 updateTa()</span></u></strong>
        {
            Clients.All.displayDatas();//所有客户端触发的函数
        }

然后创建一个 Global.asax，该全局调用类是为了与数据库更新保持一致用的，多客户端 之间的同步不需要使用该类

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;

namespace SignalR
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {

	    //开始数据库的更新监听
            SqlDependency.Start(ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
        }

        protected void Session_Start(object sender, EventArgs e)
        {

        }

        protected void Application_BeginRequest(object sender, EventArgs e)
        {

        }
        protected void Application_AuthenticateRequest(object sender, EventArgs e)
        {

        }

        protected void Application_Error(object sender, EventArgs e)
        {

        }

        protected void Session_End(object sender, EventArgs e)
        {

        }

        protected void Application_End(object sender, EventArgs e)
        {

	   //停止数据库的更新监听
            SqlDependency.Stop(ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
        }
    }
}

然后就可以 编写view页面了，创建一个main.aspx页面，引入下面几个js和为SignalR使用的文件夹

 <span style="color:#ff0000;"><script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <span style="color:#000000;"><!--Reference the SignalR library. --></span>
    <script src="/Scripts/jquery.signalR-2.0.0.js" type="text/javascript"></script>
<span style="color:#000000;">    <!--Reference the autogenerated SignalR hub script. --></span>
    <script src="/signalr/hubs"></script></span>

<span style="color:#000000;">然后加入下列js语句</span>

<span style="color:#ff0000;"></span><pre class="javascript" name="code"><span style="color:#000000;">     <script type="text/javascript">
         $(function () {
             var chat = $.connection.chatHub;//调用类
             $.connection.hub.start();
             getData();
             $.connection.hub.start().done(function () {
                 getData();
                 chat.server.updateTa();//启动完后，调用SignalR定义类中的方法，就会触发下面的displayDatas的方法，从而获取数据
                
             });
             
             chat.client.displayDatas = function () {
                 getData();
             };
             function getData() {
                 $.ajax({
                     type: 'POST',
                     url: 'DataPage.aspx',
                     datatype: 'text',
                     success: function (data) {
                         $("#Label1").text(data);
                     },
                     error: function (XMLHTTPRequest,textStatus,errorThrown) {
                         alert(XMLHTTPRequest + "||" + textStatus + "||" + errorThrown);
                     }
                 })
             }
         });
     </script></span>

<span style="color:#000000;">（注：这里main页面为了简便就简单加一个label1）</span>

<span style="color:#000000;">DataPage.aspx页面在page_load里加上</span>

<span style="color:#000000;"> 	     Response.Clear();
             Response.Write(returnMsg);//returnMsg为返回的string类型
             Response.End();
             return;</span>

<span style="color:#000000;">到这里我的SignalR的第一个项目就算完成了</span>

其实我发现SignalR的整个使用方法都很简单，主要就分为启动，客户端调用方法，其他都已经封装好了，不用太多的考虑。

参考：http://www.th7.cn/Program/net/201607/891335.shtml