0

반응 형 프로그래밍을 배우고 있으며 첫 번째 인상은 SignalR과 비슷하다는 것입니다 (둘 다 push를 사용함). 그러나 나중에 차이점을 배웠고 Rx가 "방법"에 대해 신경 쓰지 않고 "무엇"에 대해서만 배웠습니다. 따라서 Rx와 SignalR을 모두 사용하여 배운 것을 구현하려고했습니다. 나는 SignalR을 사용하여 입찰자에게 최신 가격과 남은 시간을 업데이트하는 간단한 경매 MVC 웹 앱을 만들었습니다.Rx에서 ASP.NET MVC의 SignalR 사용

나는 다음과 같이 수신이 사용 구현하기 위해 노력하고 시나리오 :

  1. 클라이언트는 입찰 버튼을 클릭합니다.
  2. SignalR 허브는 장소 입찰 요청 을 수신하고 업데이트 된 가격을 모든 클라이언트에 보급합니다. 남은 시간이 늘어납니다.
  3. SignalR 허브는 업데이트 된 남은 시간 을 매초으로 보냅니다.

여기에는 두 가지 이벤트 소스가 있습니다. 입찰 버튼을 클릭 한 및 매초 남은 시간으로 입찰자를 업데이트하는 SignalR.

최근 입찰가를 가진 SignalR 업데이트 클라이언트가 Rx에서 구현할 수있는 이벤트로 간주되는지는 잘 모르겠습니다. 그것은 무엇입니까? 상기 내용을 토대로

우리는 내가 시각화하고 이해할 수 [1] "누락 봤는데 프로그래밍 반응성에 대한 소개"에서 앙드레 Staltz의 튜토리얼을 기반으로 두 개의 관찰 가능한 (버튼 및 SignalR 허브의 타이머) 이 버튼의 클릭의 흐름 그러나, 나는 Observable.Interval을 사용하여 구현되어야한다고 생각하는 타이머 스트림에 문제가 있습니다. 이제는 SignalR 허브가 옵저버가 될 버튼 클릭을 스트리밍하기 위해 클라이언트에 RxJS가 필요하며 동시에 연결된 클라이언트에게 잔여 시간 이벤트를 스트리밍하기 위해 SignalR 허브에 Rx.NET이 필요합니다 누가 옵서버가 될 것인가. 나는 리 캠벨의 tutorial 쳐다 보면서 Rx.NET와 SignalR을 사용하여 자신의 반응 상인하지만 내가 세부에서 공부하지 않은 고급거야하지만 난 [3]

을 짐 - 울리에 의해 CodeProject의 [2]에 사샤 이발사에 의해 단순화 된 버전과 대답을 발견

그러나 관측 대상이 관찰자이고 그 반대 인 경우 내 생각을 어떻게 구현할 수 있는지 이해할 수 없었습니다. SignalR과 Rx의 경계는 무엇입니까? 나는 각각이 무엇을하는지 알지만 위의 예에서 반응적인 접근법을 만드는 방법은 Observalbe.Interval에 가입 할 때 남은 시간을 업데이트하는 javascript 함수를 호출해야합니까? 그렇다면 Rx의 가치는 무엇입니까? SignalR 허브가 Rx를 사용하지 않고도 연결된 각 클라이언트에서 업데이트 기능을 호출 중입니다. 모든 것이 스트림이므로 Rx로 모든 것을 전송해야합니까?

정말 도움을 주셔서 감사 드리며, 이런 종류의 시나리오에 관해 논의하는 훌륭한 자료를 보내 주시면 감사하겠습니다.

+0

Rx는 주로 이벤트 및 이벤트와 유사한 데이터 소스에 대한 것입니다. SignalR은, 올바르게 이해한다면 실시간으로 웹 페이지와 데이터를주고받는 방법입니다. 이 두 가지 기술은 서로 다른 일을하지만 함께 사용할 수 있어야합니다. Rx는 매우 강력하며 이벤트 중심의 모든 데이터 소스를 처리하는 데 내가 선호하는 방법입니다. – Enigmativity

답변

3

SignalR 프론트 엔드 클라이언트 API는 자바 스크립트에서 비동기 프로그래밍을위한 가장 기본적인 접근 방식 인 콜백 패턴을 기반으로합니다. Promise, Rxjs와 같은 원하는 비동기 패턴으로이 작업을 수행 할 수 있습니다.Rxjs이 https://blog.sstorie.com/integrating-angular-2-and-signalr-part-2-of-2/

내가 천천히 통신

변환 콜백의 Rxjs 방법 파고, 첫 콜백 패턴으로 시작을 제안하고 작업 응용 프로그램 설정을했을 접근 방식 -와 클라이언트 측 통신을 포장하는 방법에 대해 설명 기사가있다 Rxjs는 아래와 같이 매우 쉽습니다.

var onMessage$ = new Subject() 
var connection = $.hubConnection(); 
var myHub = connection.createHubProxy('myHub'); 
myHub.on('message', function(message) { 
    onMessage$.next(message) 
}); 
onMessage$.subscribe((message)=>console.log(message)) 

그러나 기능적 반응 스타일로 모든 것을 작성하면 연습에 많은 시간과 노력이 필요합니다. 필자가 더 익숙하다면, rxjs는 약속과 콜백에 비해 훨씬 생산적이고 효율적이다.

+0

'Rx.Observable.fromEvent'를 사용하여 제목없이이 작업을 수행 할 수 있습니까? – supertopi