使用SignalR的Angular 2 TypeScript [英] Angular 2 TypeScript using SignalR

问题描述

我正在尝试设置Angular 2应用程序以使用Microsoft的SignalR.我一直在关注

I'm trying to set up an Angular 2 application to use Microsoft's SignalR. I've been following this tutorial, which although it's good I don't like the fact that jQuery and SignalR are loaded into the application via script tags in the index.html file and also the fact that both libraries do not use their respective Type Definitions.

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

So with that in mind I've been trying to include jQuery and SignalR in my application using node modules and the respective Type Definitions. I've searched the correct type definition files to use through Microsoft's TypeSearch.

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

I'm only including jQuery in my application because of SignalR's dependency on jQuery.

jQuery

我首先从在应用程序中安装jQuery模块开始，我还必须在Webpack配置中添加它.设置完成后，由于量角器，我将面临一个冲突"问题. Aurelia JS Rocks网站中对此进行了描述.尽管它建议卸载量角器类型，但我现在尝试了此答案中描述的我不知道这是否是最好的解决方案.

I first started with installing the jQuery module in my application which I've had to add in the Webpack configuration as well. After this was set up I'm being faced with a "conflict" issue because of Protractor. This is described on Aurelia JS Rocks' website. Although it suggests uninstalling the protractor typings I tried our another solution for now described in this answer. I don't know if this is the best solution.

SignalR

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

With regards to SignalR I'm a bit stuck - so far it seems there's no "official" node module provided for SignalR. I'm not sure whether I should include Microsoft's SignalR Javascript Library by downloading the file and including it in my application.

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

The issue is that I have installed the Type Definitions for SignalR. But now I'm not sure how to go about actually using SignalR since when I type $ or jQuery I'm not being suggested .connections for example - which makes sense as this is not part of the jQuery library.

我敢肯定，关于设置"它可能会引起误解.在Angular2 TypeScript应用程序中使用SignalR的最佳方法是什么?

I'm sure that I might be misunderstanding something with regards to getting it "set up". What's the best way to go about using SignalR in an Angular2 TypeScript application?

推荐答案

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

Here's a startup code you can use.

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文件的引用.

Add reference to script files of jQuery and 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文件时无需添加引用.只需使用以下命令安装输入内容即可.

You need to install TypeScript definition file for SignalR and jQuery. If you're using TypeScript 2, you don't need to add reference to index.d.ts file while using it. Just install the typings using following commands.

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

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

With all the setup done, you can write a simple TypeScript class to handle the logic for sending and receiving messages.

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

我正在使用上面的代码，显然已修改了我的需求，并且工作正常.

I'm using the above code, obviously modified to my needs, and it works fine.

这篇关于使用SignalR的Angular 2 TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！