Angular 2 使用 SignalR 的 TypeScript

Question

我正在尝试设置 Angular 2 应用程序以使用 Microsoft 的 SignalR。我一直在关注 this tutorial，虽然这很好，但我不喜欢 jQuery 和 SignalR 通过 index.html 文件中的脚本标记加载到应用程序中这一事实这两个库都不使用它们各自的类型定义。

考虑到这一点，我一直在尝试使用节点模块和相应的类型定义在我的应用程序中包含 jQuery 和 SignalR。我已经通过 Microsoft 的 TypeSearch.

搜索了要使用的正确类型定义文件

由于 SignalR 对 jQuery 的依赖，我只在我的应用程序中包含 jQuery。

jQuery

我首先开始在我的应用程序中安装 jQuery 模块，我还必须将其添加到 Webpack 配置中。设置完成后，由于 Protractor，我面临 "conflict" 问题。 Aurelia JS Rocks' website. Although it suggests uninstalling the protractor typings I tried our another solution for now described in this answer 上对此进行了描述。我不知道这是不是最好的解决方案。

信号R

关于 SignalR，我有点困惑 - 到目前为止，似乎没有为 SignalR 提供 "official" 节点模块。我不确定是否应该通过下载文件并将其包含在我的应用程序中来包含 Microsoft 的 SignalR Javascript 库。

问题是我已经安装了 SignalR 的类型定义。但是现在我不确定如何实际使用 SignalR，因为当我键入 $ 或 jQuery 时，我没有被建议 .connections 例如 - 这是有道理的，因为这不是jQuery 库的一部分。

我确定我可能对获取它有误解 "set up"。在 Angular2 TypeScript 应用程序中使用 SignalR 的最佳方式是什么？

Answer 1

这是您可以使用的启动代码。

C#

//create an interface that contains definition of client side methods
public interface IClient
{
    void messageReceived(string msg);
}

//create your Hub class that contains implementation of client methods
public class ChatHub : Hub<IClient>
{
    public void sendMessage(string msg)
    {
        //log the incoming message here to confirm that its received

        //send back same message with DateTime
        Clients.All.messageReceived("Message received at: " + DateTime.Now.ToString());
    }
}

HTML

添加对 jQuery 和 signalR.[=28 的 script 文件的引用=]

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.signalR.min.js"></script>

<!--this is the default path where SignalR generates its JS files so you don't need to change it.-->
<script src="~/signalr/hubs"></script>

JS

您需要为 SignalR 和 jQuery 安装 TypeScript 定义文件。如果您正在使用 TypeScript 2，则在使用它时不需要添加对 index.d.ts 文件的引用。只需使用以下命令安装 typings。

npm install --save @types/jquery npm install --save @types/signalr

完成所有设置后，您可以编写一个简单的 TypeScript class 来处理发送和接收消息的逻辑。

export class MessageService { //signalR connection reference private connection: SignalR; //signalR proxy reference private proxy: SignalR.Hub.Proxy; constructor() { //initialize connection this.connection = $.connection; //to create proxy give your hub class name as parameter. IMPORTANT: notice that I followed camel casing in giving class name this.proxy = $.connection.hub.createHubProxy('chatHub'); //define a callback method for proxy this.proxy.on('messageReceived', (latestMsg) => this.onMessageReceived(latestMsg)); this.connection.hub.start(); } private onMessageReceived(latestMsg: string) { console.log('New message received: ' + latestMsg); } //method for sending message broadcastMessage(msg: string) { //invoke method by its name using proxy this.proxy.invoke('sendMessage', msg); } }

我正在使用上面的代码，显然是根据我的需要修改的，并且运行良好。

更新 1： 这是一个很老的答案，从那以后情况发生了很大变化。使用 npm 安装 jQuery 和 SignalR，然后使用 angular.json 文件加载它们，如下所示：

1- 安装 npm install jquery signalr

2- 载入 angular.json -> projects -> your-app -> architect -> build -> options

scripts: [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/signalr/jquery.signalR.min.js" ]

感谢更新。

Answer 2

@Syed Ali Taqi 的回答基本上可以，但并不完美（如果你错过配置 ts 编译器，甚至无法工作）。这是我最新 Angular（撰写本文时的版本 8）的步骤：

安装 jquery 和 signalr 运行时间库：npm install jquery signalr

通过配置 angular.json 告诉 Angular 在运行时间加载库，就好像它们在 <script></script> 标记中一样：

projects:
  <your-app>:
    architect:
      build:
        options:
          ...
          scripts: [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/signalr/jquery.signalR.min.js"
          ]
      ...
      test:
        options:
          ...
          scripts: [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/signalr/jquery.signalR.min.js"
          ]

安装 jquery 和 signalr 的类型以便 ts 编译器可以识别它们：npm install @types/jquery @types/signalr --save-dev
通过编辑 tsconfig.app.json 和 tsconfig.spec.json 的 types 部分，告诉 ts 编译器默认加载类型：
```
compilerOptions:
  types: [..., "jquery", "signalr"]
```

好的，全部搞定！快乐的 SignalR 编码！

let conn = $.hubConnection("<base-path>");
let proxy = conn.createHubProxy("<some-hub>");
...

注意：永远不要在代码中明确地尝试从 jquery import ...，如 https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app

所说

有关 angular.json 配置的详细信息，请参阅 https://angular.io/guide/workspace-config

Angular 2 使用 SignalR 的 TypeScript

Angular 2 TypeScript using SignalR

jquery

signalr

typescript

webpack

angular