이 글에서는 주로 HTML5에서 sse 서버가 보내는 이벤트의 EventSource에 대해 소개하고 있습니다. 관심이 있으신 분들은 참고하시면 좋을 것 같습니다.
Foreword
빅데이터 화면에 대해 이야기 했고 이전 기사의 데이터가 수시로 업데이트되었습니다. 또한 수시로 업데이트되는 주식 데이터, Facebook/Twitter 업데이트, 평가 업데이트, 새 블로그 게시물, 이벤트 결과 등 모두 수시로 업데이트되는 데이터가 필요합니다. 이전에는 일반적으로 업데이트할 수 있는 데이터가 있는지 서버에 요청했습니다. HTML5는 서버를 통해 이벤트를 보내고 업데이트가 자동으로 도착할 수 있는 서버 전송 이벤트 메서드를 제공합니다.
서버 전송 이벤트 사용법
서버 전송 이벤트는 사용이 매우 간단합니다. EventSource 개체를 통해 서버 측 메시지를 받아들입니다. 다음 사건: pOnopen 서버에 대한 연결이 열렸을 때
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('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); 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 事件..."; }us 콘솔에서 다음과 같이 인쇄하세요. :
php 코드가 단순 에코일 뿐 지속적으로 출력되지 않기 때문입니다. 위 php 코드를 다음과 같이 개선했습니다
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); $i = 0; $c = $i + 100; while (++$i < $c) { echo "id: " . $i . "\n"; echo "data: " . $time. ";\n\n"; ob_flush(); flush(); sleep(1); } ?>아니요. 더 많은 오류!
IE 브라우저는 EventSource를 지원하지 않는다는 것을 알고 있습니다. 다음과 같은 솔루션이 있습니다.
eventsource.min.js을 소개하는 것이 완벽한 솔루션이 될 수 있습니다. github 주소는 https://github.com/Yaffle/EventSource에서 확인할 수 있습니다. nodejs와 함께 사용하는 것도 매우 편리합니다.
npm install event-source-polyfill.
위 내용은 html5의 sse 서버에서 보낸 EventSource 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!