title: SignalR Page Refresh Makes Multiple Connection
body: <p>I want to show some live random data on client using SignalR.</p>
  
  <blockquote>
    <p>Problem Is whenever I refresh the page it creates one more connection
    and shows multiple data.</p>
  </blockquote>
  
  <p>Mostly I think my approach is wrong.</p>
  
  <p>So what I have done.</p>
  
  <p>Step 1: Installed SignalR Using Nuget <code>Install-Package Microsoft.AspNet.SignalR</code></p>
  
  <p>Step 2: Made changes in Startup.cs File as follows.</p>
  
  <pre><code>public partial class Startup
  {
      public void Configuration(IAppBuilder app)
      {
          ConfigureAuth(app);
          app.MapSignalR(); //Added this line for SignalR
      }
  }
  </code></pre>
  
  <p>Step 3: Created Hub Class. "ServerStatisticsHub.cs"</p>
  
  <pre><code>public class ServerStatisticsHub : Hub
  {
      public void ServerParameter()
      {
          Random r = new Random();
          int p = 0;
          int m = 0;
          int s = 0;
  
          while(true) //May be this is the foolish thing I'm doing
          {
              p = r.Next(0, 100);
              m = r.Next(0, 100);
              s = r.Next(0, 100);
              Clients.All.broadcastServerStatistics("{\"processor\":" + p + ", \"memory\":" + m + ", \"storage\":" + s + "}");
              System.Threading.Thread.Sleep(2000);
          }
      }
  }
  </code></pre>
  
  <p>Step 4: Created an View in Home "ServerState.cshtml".</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"&gt;
      &lt;title&gt;TestSignalR&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="serverProcessor"&gt;&lt;/div&gt;
      &lt;div id="serverMemory"&gt;&lt;/div&gt;
      &lt;div id="serverStorage"&gt;&lt;/div&gt;
  
      &lt;script src="@Url.Content("~/Scripts/jquery-2.2.3.min.js")"&gt;&lt;/script&gt;    
      &lt;script src="@Url.Content("~/Scripts/jquery.signalR-2.2.1.min.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/signalr/hubs")"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function () {
              // Reference the auto-generated proxy for the hub.
              var serverStatistics = $.connection.serverStatisticsHub;
  
              // Create a function that the hub can call back to display messages.
              serverStatistics.client.broadcastServerStatistics = function (serverStat) {
                  var serverStatistic = JSON.parse(serverStat);
                  console.log(serverStatistic);
  
                  $('#serverProcessor').html(serverStatistic.processor + "%");
                  $('#serverMemory').html(serverStatistic.memory + "%");
                  $('#serverStorage').html(serverStatistic.storage + "%");
              };
  
              // Start the connection.
              $.connection.hub.start().done(function () {
                  serverStatistics.server.serverParameter();
              });
          });
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>