使用SignalR的Angular 2 TypeScript

Question

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

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

我只在我的应用程序中包含jQuery,因为SignalR依赖于jQuery.

jQuery的

我首先开始在我的应用程序中安装jQuery模块,我必须在Webpack配置中添加它.在此之后,由于量角器,我面临着一个"冲突"问题.这在Aurelia JS Rocks的网站上有所描述.虽然它建议卸载量角器类型,但我尝试了另一种解决方案,现在在这个答案中描述.我不知道这是否是最佳解决方案.

SignalR

关于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

添加引用script的文件jQuery和signalR.

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

我正在使用上面的代码,显然已根据我的需要进行了修改,并且工作正常.

Answer 2

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

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

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

   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 部分，告诉 ts 编译器默认加载类型types：

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

好了，大功告成！快乐 SignalR 编码！

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

注意：永远不要尝试在您的代码中显式import ...从jquery，如https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app所述

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

Answer 3

你可以试试

npm install ng2-signalr --save

你可以在这里阅读设置说明,
还有一个工作演示的链接.