집 >웹 프론트엔드 >HTML 튜토리얼 >h5 sse 서버를 사용하여 EventSource 이벤트를 보내는 방법

h5 sse 서버를 사용하여 EventSource 이벤트를 보내는 방법

php中世界最好的语言원래의: 2018-01-19 09:55:492433검색

이번에는 h5의 sse 서버를 사용하여 EventSourceevents를 보내는 방법과 h5의 sse 서버를 사용하여 EventSource 이벤트를 보내는 데 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

머리말

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

Server-Sent Events Usage

Server-Sent Events는 사용이 매우 간단합니다. EventSource object를 통해 서버측 메시지를 받습니다. 다음과 같은 이벤트가 있습니다.

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 중국어 웹사이트의 다른 관련 기사를 확인해보세요!