web-dev-qa-db-ja.com

Angular 2 SignalRを使用したTypeScript

私はAngular 2アプリケーションを設定しようとしています。私は このチュートリアル に従っていますが、これは良いことではありませんが、 jQueryとSignalRがindex.htmlファイルのスクリプトタグを介してアプリケーションに読み込まれること、および両方のライブラリがそれぞれのタイプ定義を使用しないこと。

そのことを念頭に置いて、ノードモジュールとそれぞれの型定義を使用して、アプリケーションにjQueryとSignalRを含めようとしています。 Microsoftの TypeSearch を使用して、使用する正しいタイプ定義ファイルを検索しました。

SignalRはjQueryに依存しているため、アプリケーションにjQueryのみを含めています。

jQuery

最初に、アプリケーションにjQueryモジュールをインストールすることから始めました。これは、Webpack構成にも追加する必要がありました。これがセットアップされた後、私は分度器のために「競合」問題に直面しています。これは Aurelia JS RocksのWebサイト で説明されています。分度器のタイピングをアンインストールすることをお勧めしますが、私は今のところ別のソリューションを試しました この回答で説明されています 。これが最善の解決策かどうかはわかりません。

SignalR

SignalRに関しては、私は少し行き詰まっています。これまでのところ、SignalRには「公式」のノードモジュールが提供されていないようです。ファイルをダウンロードしてアプリケーションに含めることにより、MicrosoftのSignalR JavaScriptライブラリを含める必要があるかどうかわかりません。

問題は、SignalRのタイプ定義をインストールしたことです。しかし、今私は$またはjQuery提案されていません.connectionsたとえば-jQueryライブラリの一部ではないため、これは理にかなっています。

私はそれを「セットアップ」することに関して何かを誤解しているかもしれないと確信しています。 Angular2 TypeScriptアプリケーションでSignalRを使用するための最良の方法は何ですか？

jqueryangulartypescriptwebpacksignalr
11
Daniel Grima

使用できる起動コードは次のとおりです。

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

私は上記のコードを使用していますが、明らかに自分のニーズに合わせて修正されており、問題なく機能します。

18
Syed Ali Taqi

あなたが試すことができます

npm install ng2-signalr --save

セットアップ手順を読むことができます ここ 、
動作デモへのリンクもあります。

5
hannes neukermans

@Syed ALi Taqiの答えは基本的にOKですが、完璧ではありません（tsコンパイラの設定を怠った場合でも機能しません）。最新のAngular（私の執筆時点でのバージョン8）の手順は次のとおりです。

  1. Jqueryおよびsignalrランタイムライブラリをインストールします：npm install jquery signalr

  2. Angularは、angular.jsonを構成することにより、<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. Tsコンパイラがそれらを認識できるように、jqueryとsignalrのタイプをインストールします：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で述べられているように、コードで明示的にjqueryからimport ...を明示的に試行しないでください-inside-your-app

Angular.json構成の詳細については、 https://angular.io/guide/workspace-config を参照してください

0
Robert