typescript SignalR与ASP.NET核心MVC项目中的类型脚本的连接

qxsslcnc 于 2023-02-05 发布在 TypeScript

关注(0)|答案(1)|浏览(151)

我已经在我的项目中安装了SignalR。我用jQuery实现了一个示例。我想用TypeScript做同样的示例。enter image description here
查看：

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>

我有下面的TypeScript代码。但是我无法连接到signalR。

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

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

错误：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"
  }
}

typescript

来源：https://stackoverflow.com/questions/75307389/signalr-connection-with-typescript-in-asp-net-core-mvc-project

1条答案

按热度按时间

1qczuiv01#

我已经在我的项目中安装了SignalR。我用jQuery实现了一个例子。我想用TypeScrip做同样的例子。我有如下的TypeScript代码。但是我不能连接到signalR。
根据您的描述，您的客户端似乎没有正确引用您的集线器，并抛出了该错误。根据我的调查，我认为您的以下脚本导致了该问题，因为它似乎不正确。

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

如果您按照官方指南中的正确步骤操作，您的脚本应该如下所示：

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

请确保您已完成以下步骤：

- 关于 typescript 和javascript实现：**

正如你可能知道SignalR都有Typescript和Javascript实现，这两个实现彼此非常不同。在这个reagards中，请确保你遵循了确切的架构和步骤。
类型脚本架构：

注：请查看我们的官方文件，了解工作样品的详细步骤.

- 输出：**

Javascript架构：

Chat.js实现：

"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();
});

注：请检查我们的官方文件的详细步骤的Javascript与工作样本.

- 输出：**

- 注：**建议您先按照其中一个实施指南进行操作，熟悉配置和步骤后，您将更有能力进行任何定制。因此，本正式文档将帮助您正确实施。

赞(0）回复(0）举报 2023-02-05

我来回答

typescript SignalR与ASP.NET核心MVC项目中的类型脚本的连接

1条答案

相关问题

热门标签

最新问答