채팅에서 모든 사람에게 실시간으로 "사용자 입력"알림을 표시하는 방법

Question

jQuery와 PHP를 사용하여 채팅 응용 프로그램을 작성하고 싶습니다. 도움이 필요한 부분은 실시간 사용자 "Evx"가 메시지를 입력 한 다음 해당 메시지를 실시간으로 다른 모든 사용자에게 표시하는 부분입니다. 이것은 스카이프가 펜을 가지고있는 방식과 유사 할 것입니다. 그리고 사용자가 타이핑 할 때 페이스 북이 어떻게 알림을 주는지.

내가 필요한 것은 로직 단계 및 "사용자가 타이핑 중"인 실시간을 쉽게 달성하는 방법에 대한 정보이지만 다른 방식으로는 여전히 유용합니다.

//time delay before ajax call 
var delay = (function() { 
    var timer = 0; 
    return function(callback, ms) { 
     clearTimeout(timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

$('#usermsg').keydown(function() { 
    if ($('#usermsg').val().length === 5) { 
     delay(function() { 
      $.ajax({ 
       url: "addusertyping.php", 
       cache: false, 
       success: function() { 

       } 
      }); 
     }, 5000); 
    } 
}); 

$('#usermsg').keyup(function() { 
    if ($('#usermsg').val().length >= 6) { 
     // here I should basically check for 
      // an update from server or what not. 
    } 
});​ 

누군가가 실시간으로 입력 사용자를 달성하는 방법에 대한 단계와 정보를 설명해 주시겠습니까, 내가 시작으로 위의 시도 한 것을 사용 : 여기

내가 지금까지 시도한 것입니다 포인트?

Answer 1

채팅을 구현할 때 Facebook 및 Google Talk와 같은 사이트에서 사용하는 접근 방법은 Comet 또는 Reverse AJAX를 사용하여 웹의 요청/응답 모델을 활용하는 솔루션을 사용하는 것입니다.

웹 1.0 : 같은 당신 같은 전통적인 웹 1.0 구현에

, 브라우저는 서버에 요청을 시작합니다. 서버는 클라이언트 측 코드가 뷰에서 렌더링하는 데이터로 응답합니다.

이것은 단순히 사용자를 한 페이지에서 다른 페이지로 이동하거나 사용자가 시작한 이벤트에 응답 할 때 유용합니다. 그러나이 방법론은 서버가 시작한 이벤트를 관리 할 때 본질적으로 결함이 있습니다.

예를 들어, 실시간 업데이트를 시뮬레이트하려면 지속적인 폴링 요청으로 서버를 해머하여 업데이트를 확인해야합니다. 이것은 자동차의 뒷좌석에있는 어린 아이와 동등하며 끊임없이 부모에게 "우리는 아직 있습니까? 아직 우리입니까?"라고 묻습니다. 반복해서 반복해서. 이것은 많은 대역폭을 소비 할뿐만 아니라 연결된 클라이언트의 수가 증가하면 서버에 많은 부하를줍니다.

혜성/리버스 AJAX :

요청하지 않고 브라우저에 응답을 시작할 수 없습니다 서버 "역 AJAX"또는 "혜성"이라는 기술은 서버 밀어 이벤트의 과정을 시뮬레이션하는 데 사용되기 때문에 클라이언트에게 알림.

Comet의 일반적인 전제는 브라우저가 서버에 대한 연결을 연 다음 서버가 해당 연결을 무기한 열어 둔다는 것입니다. 그런 다음 서버에 연결된 모든 클라이언트에 전달해야하는 업데이트가 있으면 클라이언트에 응답을 다시 보내 요청/응답주기를 완료합니다. 응답을 수신하면 클라이언트는 즉시 다른 요청을 서버에 보내고, 서버는 다음 업데이트가있을 때까지 다시 열어 둡니다.

PHP에서 사용할 수있는 Comet 솔루션이 있으므로 기존 플랫폼을 사용하여 수행 할 수있는 작업입니다. 그러나 나는 어떤 것도 추천 할 수 없다. 또한 Comet 연결을 쉽게 열기 위해 클라이언트 측 라이브러리가 필요합니다. Dojo Cometd JavaScript Library을 확인하십시오.

Comet은 채팅 솔루션을 구현하기위한 두 가지 우수한 솔루션 중 하나이며 다른 하나는 WebSockets입니다. 그러나 일부 브라우저에서는 WebSocket에 대한 지원이 여전히 부족합니다.

Comet을 용이하게하는 라이브러리를 찾는 경우 Continuations를 용이하게하는 라이브러리를 선택하는 것이 좋습니다. 그러면 응답을 보내기 위해 대기중인 스레드를 해제하여 다른 작업을 수행 할 수 있습니다. . 이러한 솔루션을 통해 일부 Comet 서버는 2 만 개 이상의 연결로 쉽게 확장되었습니다!

여기에 How to Implement Comet on PHP을 설명하는 기사가 나와 있습니다. 또한이 StackOverflow 질문은 describes the challenges of using Comet on PHP으로 유용 할 수 있습니다.

설계시 고려 사항 : 우리의 채팅 솔루션 뭔가 더 추상적의 서브 클래스로서 메시지에 대해 생각하지 있었다 개발할 때 우리가 만든 첫 번째 실수

하나. 대신 서버에서 프론트 엔드로 보낸 정보는 단순히 "채팅 메시지"였습니다. 그러나 제품이 발전하면서 우리는 곧 동일한 Comet 연결이 메시지뿐만 아니라 브라우저에 명령을 보내는 데 사용될 수 있다는 것을 발견했습니다.

따라서 "사용자 입력 중"을 구현하려면 자바 스크립트에서 서버의 업데이트가 새 메시지인지 아니면 "사용자 XYX가 입력 중인지 표시"명령을 확인하는 처리기가 필요할 수 있습니다 . 또한 좋은 디자인은 서버에서 시작하는 다른 유형의 업데이트에도 Comet 연결을 사용할 수 있음을 보장합니다.

마지막으로 사용자 입력 메시지에는 사용자가 입력 할 때 브라우저가 X 초마다 한 번만 서버에 알리는 것과 같은 지연이 있어야합니다. 사용자 입력을 단순히 AJAX 요청으로 서버를 망치는 키 누르기 이벤트에 바인드하면 단순히 Comet 연결을 폴링 상태로 되돌리기 만하면됩니다.

받는 사람 쪽에서는 입력하는 사용자가 "사용자 입력"요청을 서버로 보내지 않으면 사용자 입력 메시지가 자동으로 사라지도록 시간 제한 기능을 구현할 가능성이 큽니다. 또는 사용자가 입력 한 텍스트 위에 백 스페이스를 놓은 경우와 같이 브라우저가 텍스트 상자가 비어있을 때 브라우저가 요청을 보내는 경우 해당 사용자의 브라우저는 "사용자가 더 이상 입력하지 않음"메시지를 보낼 수 있습니다.

쉬운 솔루션?

마지막으로, 나는 당신이 대신 클라이언트에 데이터를 푸시 서버의 관점에서 웹에 대해 생각해야하므로이, 학습 곡선을 포함 것이라는 점을 추가 할. 여기에는 많은 연구와 헌신이 필요하며 예제를 시험해보고 애플리케이션 디자인에 어떻게 접근해야하는지에 대해 정말 깊이 이해하고 있습니다. 이것은 지금까지이 기술을 습득하는 가장 좋은 방법 중 하나이지만 협박 할 수도 있습니다. 예제로 시간을내어 직접 시험해보고 방해가된다면 항상 도움을 요청할 수 있습니다.