JS가 방해받지 않고 백그라운드에서 실행되도록 설정하려면 어떻게해야합니까?

Question

아래에 Message 모델을 사용하는 작은 채팅 구현이 있습니다. index 작업에서 모든 메시지를 "채팅 영역"형식으로 표시하고 있습니다. 문제는, X 초마다 새로운 메시지를 서버에 폴링하는 백그라운드 작업을 시작하고 싶습니다. 어떻게하면 내 JS가 눈에 띄지 않습니까? 나는 내 index.html.erb에 인라인 JS를 갖고 싶지 않다. 나는 폴링 코드를 가지고있는 모든 페이지에서 평가 받고 싶어하지 않는다.

Answer 1

고정 간격으로 폴링을 설정하려면 setInterval 또는 setTimeout을 사용하십시오. 다음은 jQuery를 사용하여 서버의 ajax 인터페이스가 어떤 모양인지 추측하는 예제입니다.

$(function() { 
    // Look for the chat area by its element id. 
    var chat = $('#chat-area'); 
    var lastPoll = 0; 

    function poll() { 
     $.getJSON('/messages', { since: lastPoll }, function(data) { 
      // Imagining that data is a list of message objects... 
      $.each(data, function(i, message) { 
       // Create a paragraph element to display each message. 
       var m = $('<p/>', { 
        'class': 'chat-message', 
        text: message.author +': '+ message.text; 
       }); 

       chat.append(m); 
      });      
     }); 

     // Schedules the function to run again in 1000 milliseconds. 
     setTimeout(poll, 1000); 

     lastPoll = (new Date()).getTime(); 
    } 

    // Starts the polling process if the chat area exists. 
    if (chat.length > 0) { 
     poll(); 
    } 
}); 

Answer 2

mootools 또는 jquery와 같은 라이브러리를 사용하면 가장 쉽습니다. domready/document.ready에 "chat-area-container"와 같은 클래스가 있는지 확인해야합니다. 발견 된 경우 새로운 <script> 태그를 작성하여 DOM에 삽입하여 채팅 영역에 맞는 javascript를 포함시킬 수 있습니다. 이렇게하면 모든 페이지에로드되지 않습니다. "채팅 영역 컨테이너"는 숨겨 지거나 스크립트가 초기화되면 제거 할 수있는로드 메시지를 표시하도록 구성 할 수 있습니다.

동적으로 생성 된 <script> 태그에서 onLoad 이벤트를 추가합니다. 스크립트로드가 완료되면 onLoad 이벤트 내에서 초기화 함수를 호출 할 수 있습니다.

점진적으로 페이지를 향상시킬 수 있습니다. 자바 스크립트가없는 사용자는 로딩 메시지가있는 작동하지 않는 채팅 영역을 볼 수 있습니다 (어쨌든 js 없이는 작동하지 않으므로). 처음에는 숨기면, 그들은 채팅 영역이 전혀 없다는 것을 현명하지 못합니다. 또한 동적 스크립트 태그를 사용하여 onLoad 이벤트는 기본 자바 스크립트 절차 스택에서 초기화를 "가상 스레드"합니다.