SignalR connection with typescript in ASP.NET Core MVC project

Question

I already have SignalR installed in my project. I implemented an example with jQuery. I want to do the same example with TypeScript.enter image description here

Vıew:

const a = "Hollo Word";
document.getElementById('textDiv').textContent = a;

var connection = new signalR.HubConnectionBuilder().withUrl("/CovidHub").build();
connection.start().then(() => {
    debugger;

}).catch((err) => {
    alert('Error:' + err);
});



@section Scripts{
    <script src="~/microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script src ="~/js/TsConvertToJs/app.js"></script>
}
<div class="row">
    <div class="col-md-8 offset-2">
        <div class="row">
            <div class="col-12">
                <div id="textDiv"></div>
            </div>
        </div>
    </div>
</div>

I have TypeScript code like below. But I can't connect to signalR.

var connection = new signalR.HubConnectionBuilder().withUrl("/CovidHub").build();
connection.start().then(() => {
    debugger;

}).catch((err) => {
    alert('Error:' + err);
});

Error:TS2304: (TS) Connot find name 'signalR'

tsconfig.json:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js/TsConvertToJs",
    "rootDir": "TypeScript"
  },
  "include": [
    "TypeScript/**/*"
  ]
}

libman.json:

{
  "version": "1.0",
  "defaultProvider": "unpkg",`
  "libraries": [`
    {
      "library": "@microsoft/signalr@6.0.6",
      "destination": "wwwroot/microsoft/signalr/",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}

package.json:

{
  "dependencies": {
    "gulp": "4.0.2",
    "gulp-typescript": "5.0.1",
    "typescript": "5.0.0-dev.20230131"
  }
}

Answer 1

I already have SignalR installed in my project. I implemented an example with jQuery. I want to do the same example with TypeScrip. I have TypeScript code like below. But I can't connect to signalR.

Well, based on your description it seems that your client is not getting the proper referece of your hub and throwing that error. As per my investigation, I think your following script causing the issue as it doesn't seems correct.

    <script src="~/microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script src ="~/js/TsConvertToJs/app.js"></script>

If you follow correct steps as per official guidelines, your script should be as following:

   <script src="~/js/signalr/dist/browser/signalr.js"></script>
   <script src="~/js/chat.js"></script>

Please, make sure you have gone through the following steps:

About Typescript and javascript Implememtation:

As you may know SignalR both has Typescript and Javascript implementations which are quite different than each other. In this reagards, make sure, you have followed exact architecture and steps.

TypeScript Architecture:

Note: Please check our official document for details steps with working sample.

Output:

Javascript Architecture:

Chat.js Implementation:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Note: Please check our official document for details steps for Javascript with working sample.

Output:

Note: I would suggest you to follow either of the implementation guideline first. Once you would be familier with the configuration and steps, you would be more competent for any customization. Therefore, this official document help you to implement correctly.