H5의 sse 서버 전송 이벤트 EventSource에 대한 자세한 설명

이번에는 H5에서 SSE 서버가 보내는 EventSource에 대한 자세한 설명을 가져왔습니다. SSE 서버에서 EventSource를 보내는 주의 사항은 무엇인가요?

머리말

저번 글에서 빅데이터 화면에 대해 이야기했는데, 그 안의 데이터가 수시로 업데이트됩니다. 또한 수시로 업데이트되는 주식 데이터, Facebook/Twitter 업데이트, 평가 업데이트, 새 블로그 게시물, 이벤트 결과 등 모두 수시로 업데이트되는 데이터가 필요합니다. 이전에는 일반적으로 업데이트할 수 있는 데이터가 있는지 서버에 요청했습니다. HTML5는 서버를 통해 이벤트를 보내고 업데이트가 자동으로 도착할 수 있는 서버 전송 이벤트 메서드를 제공합니다.

서버 전송 이벤트 사용법

서버 전송 이벤트는 사용이 매우 간단합니다. EventSource 개체를 통해 서버 측 메시지를 받아들입니다. 다음과 같은 이벤트가 있습니다.

• onopen 서버에 대한 연결이 열렸을 때

• onmessage 메시지가 수신되었을 때

• onerror 오류가 발생했을 때

서버 전송 이벤트 감지 지원

if(typeof(EventSource)!=="undefined")
{
  // 浏览器支持 Server-Sent
  // 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}

서버에서 보낸 이벤트 알림 수신

var source=new EventSource("haorooms_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

서버 측 코드 예제

<?php 
header(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
echo "data: The server time is: {$time}\n\n"; 
flush(); 
?>

링크 이벤트 및 오류 이벤트 추가

if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("server.php");
    source.onopen=function()
    {
         console.log("Connection to server opened.");
    };
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br>";
    };
    source.onerror=function()
    {
        console.log("EventSource failed.");
    };
}
else
{
    document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}

콘솔에 다음과 같이 인쇄되는 것을 확인할 수 있습니다.

논스톱 입력 링크, 오류 자세한 내용은 클릭해주세요

php 코드는 단순한 에코일 뿐이고 지속적으로 출력되지 않기 때문입니다. 위 php 코드를 다음과 같이 개선했습니다

<?php 
header(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
  $i = 0;
  $c = $i + 100;
  while (++$i < $c) {
    echo "id: " . $i . "\n";
    echo "data: " . $time. ";\n\n";
    ob_flush();
    flush();
    sleep(1);
  }
?>

. 멈추지 않는 오류!

IE 브라우저 호환솔루션

IE 브라우저는 EventSource를 지원하지 않는다는 것을 알고 있습니다. 다음과 같은 솔루션이 있습니다.

eventsource.min.js

를 소개하는 것이 완벽한 솔루션이 될 수 있습니다. github 주소를 볼 수 있습니다: https://github.com/Yaffle/EventSource. nodejs와 함께 사용하는 것도 매우 편리합니다.

npm install event-source-polyfill

이 기사의 사례를 읽고 나면 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 PHP 중국어 관련 기사를 주목하세요!

추천 자료:

H5는 확장 가능한 시계 애니메이션을 구현합니다.

접두사 데이터 속성 및 데이터 세트를 사용하는 방법

위 내용은 H5의 sse 서버 전송 이벤트 EventSource에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!