使用 SignalR 的 Angular 2 TypeScript

Question

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

因此，考虑到这一点，我一直在尝试使用节点模块和相应的类型定义在我的应用程序中包含 jQuery 和 SignalR。我已经通过 Microsoft 的 TypeSearch 搜索了要使用的正确类型定义文件。

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

jQuery

我首先开始在我的应用程序中安装 jQuery 模块，我还必须在 Webpack 配置中添加它。设置完成后，由于量角器，我正面临“冲突”问题。这在Aurelia JS Rocks' website 上进行了描述。虽然它建议卸载量角器类型，但我现在尝试了另一种解决方案described in this answer。我不知道这是否是最好的解决方案。

信号R

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

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

我确定我可能会误解有关“设置”的内容。在 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的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 文件的引用。只需使用以下命令安装类型。

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"
]

感谢Robert's answer 提供更新。

Answer 2

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

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

2. 通过配置 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"
             ]
   

3. 为 jquery 和 signalr 安装类型，以便 ts 编译器可以识别它们：npm install @types/jquery @types/signalr --save-dev

4. 通过编辑 tsconfig.app.json 和 tsconfig.spec.json 的 types 部分，告诉 ts 编译器加载类型默认：

   compilerOptions:
     types: [..., "jquery", "signalr"]
   

好的，全部完成！祝 SignalR 编码愉快！

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

注意：永远不要像https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app所说的那样，在你的代码中显式地尝试从jqueryimport ...

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