CODEWITHSUNDEEP
asp.net.netsignalr
Peter Sun
Peter Sun

Reputation: 1835

Failed to load resource with SignalR

I am new to signalR. I been trying to get this code to work. I am getting an error in the console. error

I assume that the second error is a product of the first.

I am not sure what this means or how to fix it. I looked at several different tutorials, but I haven't been able to figure it out. I tried searching the interwebs and i couldn't find. I obviously don't have a solid understanding of this and learn best getting my hands dirty (so to speak). I hope someone could help out. Below is my code

Start Up:

using Microsoft.Owin;
using Owin;
using SignalR_Test;

namespace SignalR_Test
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Hub:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalR_Test
{
    [HubName("employeeHub")]//the name through which in js file we init and call hub start fuction. 
    public class EmployeeHub : Hub
    {
        private readonly Employee _employee;
        public EmployeeHub() : this(Employee.Instance)
        {

        }
        public EmployeeHub(Employee stockTicker)
        {
            _employee = stockTicker;
        }
        [HubMethodName("getAllEmployee")]
        public IEnumerable<Emp> GetAllEmployee()
        {
            return _employee.GetEmployee();
        }
    }
}

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml Jump ">
<head>
    <title>SignalR Example</title>
</head>
<body>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.3.0.js"></script>
    <script src="../signalr/hubs"></script>
    <!--generate a javascript proxy class for our server class-->
    <script>

        $(function () {
            var hub = $.connection.employeeHub;
            hub.client.getAllEmployee = function (eItems) {
                eItems.each(function (i) {
                    $("htmlCode") = "<tr>";
                    $("htmlCode") = $("htmlCode") + "<td>" + this.EmpId + "</td><td>" + this.EName + "</td><td>" + this.DeptNo + "</td>"
                    $("htmlCode") = "</tr>";
                    $("#code").html($("htmlCode"));
                });
            };
        });

    </script>
    <h1>SqlTableDependencly with SignalR</h1>
    <div class="col-sm-6">
        <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>
                    EmpId
                </th>
                <th>
                    EName
                </th>
                <th>
                    DeptNo
                </th>
            </tr>
            <tbody>
                <span id="code"></span>
            </tbody>
        </table>
    </div>
</body>
</html>

web.config

<?xml version="1.0" encoding="utf-8"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <connectionStrings>
         <add name="sqlCon" connectionString="data source=RANCOR\HARDAC;Integrated Security=SSPI;initial catalog=signalR" providerName="System.Data.SqlClient" />
  </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.6.1"/>
    <httpRuntime targetFramework="4.6.1"/>
  </system.web>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs"
        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701"/>
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb"
        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/>
    </compilers>
  </system.codedom>
</configuration>

Made changes to the script section based on the suggestion below. I am stilling getting an error. The error: Failed to load resource: the server responded with a status of 404 (Not Found) EDIT index.html 

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml Jump ">
<head>
    <title>SignalR Example</title>
</head>
<body>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.3.0.js"></script>
    <script src="~/signalr/hubs"></script> <!-- ERROR happening here -->
    <!--generate a javascript proxy class for our server class-->
    <script>

        $(function () {
            var hub = $.connection.employeeHub;
            // If you like to call methodes on client from server. Do it here
            $.connection.hub.start().done(function () {
                // In the case the connection is started you call the method on the server
                hub.client.getAllEmployee = function (eItems) {
                    // Do your stuff here
                    $("htmlCode") = "<tr>";
                    $("htmlCode") = $("htmlCode") + "<td>" + this.EmpId + "</td><td>" + this.EName + "</td><td>" + this.DeptNo + "</td>"
                    $("htmlCode") = "</tr>";
                    $("#code").html($("htmlCode"));
                }
            });
        });
    </script>
    <h1>SqlTableDependencly with SignalR</h1>
    <div class="col-sm-6">
        <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>
                    EmpId
                </th>
                <th>
                    EName
                </th>
                <th>
                    DeptNo
                </th>
            </tr>
            <tbody>
                <span id="code"></span>
            </tbody>
        </table>
    </div>
</body>
</html>

EDIT: Responding to comment I tried variations to get the hub js. 1. <script src="/signalr/hubs"></script> 2. <script src="signalr/hubs"></script> 3. <script src="~/signalr/hubs"></script> 4. <script src="../signalr/hubs"></script>

I also tried to add the following code to Web.config file:

  <appSettings>
    <add key="owin:AutomaticAppStartup" value="true"></add>
  </appSettings>

Upvotes: 0

Views: 2592

Answers (1)

Stephu
Stephu

Reputation: 3334

I see two problems:

1. Connection should be started first

2. In the case you like to call something on server you need to do it on the server property not on client

Sample:

var hub = $.connection.employeeHub;
     // If you like to call methodes on client from server. Do it here
     $.connection.hub.start().done(function () {
       // In the case the connection is started you call the method on the server
        hub.client.getAllEmployee = function (eItems) {
        // Do your stuff here
        }
     });
});

Upvotes: 1

Related Questions