각도 2 TypeScript using SignalR

Question

Microsoft의 SignalR을 사용하기 위해 Angular 2 응용 프로그램을 설정하려고합니다. 나는 this tutorial을 따라 왔는데 jQuery와 SignalR이 index.html 파일의 스크립트 태그를 통해 애플리케이션에로드된다는 사실과 두 라이브러리가 각각의 유형 정의를 사용하지 않는다는 사실을 좋아하지는 않지만 .

그래서 저는 노드 모듈과 해당 유형 정의를 사용하여 응용 프로그램에 jQuery와 SignalR을 포함하려고했습니다. Microsoft의 TypeSearch을 통해 올바른 형식 정의 파일을 검색했습니다.

jQuery에 대한 SignalR의 의존성으로 인해 응용 프로그램의 jQuery 만 포함합니다.

jQuery를이

내가 먼저 내가뿐만 아니라 웹팩 구성에 추가 했어 내 응용 프로그램에서 jQuery를 모듈을 설치하기 시작했다. 이 후 나는 분도기 때문에 "갈등"문제에 직면하고있다. 자세한 내용은 Aurelia JS Rocks' website에 설명되어 있습니다. 분도기 타이핑을 제거 할 것을 제안했지만 지금은 described in this answer에 대한 다른 해결책을 시도했습니다. 이것이 최선의 해결책인지 나는 모른다.

SignalR에 관해서 SignalR

나는 붙어 조금있어 - 지금까지이 SignalR 제공에는 "공식적인"노드 모듈이 없다 보인다. 파일을 다운로드하고 응용 프로그램에 포함 시켜서 Microsoft의 SignalR Javascript 라이브러리를 포함할지 여부는 확실하지 않습니다.

문제점은 SignalR의 유형 정의를 설치했기 때문입니다. 하지만 이제 실제로 SignalR을 사용하는 방법을 모르겠다. $ 또는 jQuery을 입력하면 .connections이 제안되지 않는다. 이는 jQuery 라이브러리의 일부가 아니기 때문에 의미가있다.

"설정"과 관련하여 내가 오해하고있을 수도 있습니다. Angular2 TypeScript 애플리케이션에서 SignalR을 사용하는 가장 좋은 방법은 무엇입니까?

Answer 1

다음은 사용할 수있는 시작 코드입니다.

C#을

이 scriptjQuery의 파일과 signalR에 대한 참조를 추가

//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 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 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

당신은

npm install ng2-signalr --save 

당신이 here이
도 데모을 작업 에 대한 링크가 설정 지침을 읽을 수 있습니다 시도 할 수 있습니다.