Angular 2 TypeScript使用SignalR

我試圖設置Angular 2應用程序來使用Microsoft的SignalR。我一直在關注this tutorial，儘管這很好，但我不喜歡jQuery和SignalR通過index.html文件中的腳本標記加載到應用程序中的事實，以及兩個庫都不使用它們各自的類型定義。Angular 2 TypeScript使用SignalR

所以考慮到這一點，我一直試圖在我的應用程序中使用節點模塊和相應的類型定義來包含jQuery和SignalR。我已經通過微軟的TypeSearch搜索了正確的類型定義文件。

由於SignalR對jQuery的依賴性，我只在應用程序中包含jQuery。

jQuery的

我第一次開始與安裝在我的應用程序，我不得不在的WebPack配置中添加以及jQuery的模塊。在建立之後，我因爲量角器而面臨「衝突」問題。這在Aurelia JS Rocks' website上有描述。雖然它建議卸載量角器類型，我現在嘗試我們的另一種解決方案，現在described in this answer。我不知道這是否是最好的解決方案。

SignalR

至於SignalR我有點卡住 - 到目前爲止，似乎有提供SignalR沒有「官方」節點模塊。我不確定是否應該通過下載該文件並將其包含在我的應用程序中來包含Microsoft的SignalR Javascript庫。

問題是我已經安裝了SignalR的類型定義。但現在我不知道如何去實際使用SignalR，因爲當我輸入$或jQuery時，我不會建議.connections - 這很有意義，因爲這不是jQuery庫的一部分。

我敢肯定，我可能會誤解與「設置」有關的事情。在Angular2 TypeScript應用程序中使用SignalR的最佳方式是什麼？

來源

2016-12-29 Daniel Grima

你有沒有HUB的想法？ – bilal

問題不在HUB ..正如我在我的問題中提到的「我已經安裝了SignalR的類型定義，但現在我不知道如何去實際使用SignalR，因爲當我輸入'$'或'jQuery'時我沒有被建議'.connections'例如「 –

//聲明代理引用集線器。 chat = $ .connection.YourHUBNAME;創建一個代理，你可以使用 – bilal

以下是您可以使用的啓動代碼。

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

添加引用的jQueryscript文件和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>

您需要安裝打字稿定義文件SignalR和jQuery。如果您使用的是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); 
    } 
}

我正在使用上面的代碼，顯然修改了我的需要，它工作正常。

來源

2016-12-29 12:52:26

這非常有幫助！非常感謝......有一件事是，即使我使用的是TypeScript 2.0.9，似乎仍然需要使用指向'index.d.ts'文件的引用。如果沒有參考，我會在嘗試調用'SignalR'時發生錯誤。 –

@DanielGrima：聽起來很奇怪。如果這解決了您的問題，請將其標記爲答案，以便將來對其他人有所幫助。 –

是的，這是奇怪的..我會進一步調查，看看會發生什麼 –

你可以嘗試

npm install ng2-signalr --save

您可以閱讀安裝說明here，
還有一個一個環節的工作演示。

來源

2017-01-19 12:36:54

你的模塊看起來很有前途。雖然，我的應用程序與回答的方法正常工作，但我一定會試試這個。 –

該模塊看起來不錯。我正在運行Angular4，你知道是否會有任何支持？ –

你可以使用ng4。讓我知道，如果它不適合你... –

Angular 2 TypeScript使用SignalR

回答

相關問題