변경 사항을 폴링하지 않고 서버 측 렌더링에 응답하십시오.

Question

기존 웹 앱을 녹아웃에서 js로 전환하는 실험을 진행하고 있습니다.

응용 프로그램이 서버와의 웹 소켓 연결을 설정하고 비동기 적으로 업데이트를받습니다 (서로 다른 상태에 영향을 줄 수있는 많은 클라이언트가있을 수 있습니다).

제 질문은 렌더링 서버 측에서 변경 사항을 각 클라이언트에 어떻게 푸시 할 수 있습니까? 방금 ​​서버에서 렌더링을 읽기 시작 했으므로 어떻게 작동하는지 오해하는 것일 수 있습니다.

클라이언트는 서버로 보내지는 작업을 수행하고 서버는 다음과 같은 html 조각으로 응답합니다. 그러면 클라이언트가 DOM으로 바뀝니다.

서버 또는 다른 클라이언트에서 상태를 변경할 수있는 응용 프로그램의 경우 웹 소켓/http 폴링을 사용하여 이러한 업데이트를 표시해야합니까?

서버가 새로운 조각을 다르게 푸시 다운 할 수 있습니까?

Answer 1

React에서는 단방향 흐름이 가장 좋은 방법입니다. 이를 위해 이벤트 이미 터를 사용해야합니다.

웹 소켓, SSE 또는 폴링을 사용하여 JSON을 서버에서 가져옵니다 (중요하지 않음). 봉투 형식이어야합니다. 이것은 채팅 응용 프로그램의 예입니다. 서버에서이 메시지를받을 때

{ 
    "type": "new-message", 
    "payload": { 
    "from": "someone", 
    "to": "#some-channel", 
    "time": 1415844019196 
    } 
} 

, 당신은 이벤트로 방출한다.

var handleMessage = function(envelope){ 
    myEventEmitter.emit(envelope.type, envelope.payload); 
}; 

이것은 발송자의 한 형태입니다. 단순히 이벤트를 가져 와서 관심있는 사람에게 브로드 캐스트합니다.일반적으로 이해 당사자는 구성 요소 또는 상점 (유동성 있음)이 될 것입니다.

var MessageList = React.createClass({ 
    componentDidMount: function(){ 
     myEventEmitter.on('new-message', this.handleNewMessage); 
    }, 
    handleNewMessage: function(message){ 
     if (message.to === this.props.channel) { 
      this.setState({messages: this.state.messages.concat(message)}); 
     } 
    }, 
    componentWillUnmount: function(){ 
     myEventEmitter.removeListener(this.handleNewMessage); 
    }, 
    ... 
}); 

사용자가 메시지를 제출하면 'user-new-message'이벤트가 발생합니다. handleMessage을 구현하는 코드의 동일한 부분은이 이벤트를 수신하고 서버에 메시지를 보내고 UI를 업데이트 할 수 있도록 새 메시지 이벤트를 내 보냅니다.

받은 메시지의 목록을 코드의 다른 부분 (구성 요소 아님)에 보관하거나 서버에서 최신 메시지를 가져올 수 있습니다.

서버에서 보내는 html은 일반적으로 매우 나쁘고 융통성이 없으며 부적절한 아이디어입니다. AJAX는 클라이언트에 데이터를 가져 오기위한 것이며, 클라이언트는이 데이터를 사용자에게 제시하는 방법을 선택합니다.

Answer 2

렌더링 서버 측에서는 변경 사항을 각 클라이언트에 어떻게 푸시 다운시킬 수 있습니까?

글쎄, 당신은 그냥 소켓을 통해 말했다.

그러나 실제로는 "최적"이 아닙니다. 마크 업을 매번 누를 필요가 없습니다. 템플릿이없는 경우 템플릿을 클라이언트에 푸시하거나 페이지에 미리로드 해 두는 것이 좋습니다. 그들이 할 때, 대신 라인 아래로 데이터를 밀어 클라이언트 쪽 렌더링해야합니다.

서버 또는 다른 클라이언트가 상태를 변경할 수있는 응용 프로그램의 경우 웹 사이트/http 폴링을 사용하여 이러한 업데이트를 표시해야합니까?

웹 서버 대신 서버 측 이벤트가 있습니다. 그것은 WebSocket과 비슷하지만, 단방향, 서버 -> 브라우저 전용입니다. 브라우저는 WebSocket을 통해와 같은 방식으로 서버 측 항목을 수신합니다. 그러나 서버에 을 전달하면 평범한 오래된 AJAX 또는 양식 등을 사용할 수 있습니다. Support is limited하지만 폴리 필이 있습니다.

실제로 웹 소켓을 사용하면 다운 라인을 활용할 수 있지만 그 목적을 상실 할 수 있습니다.