찾다

집  >  기사  >  웹 프론트엔드  >  HTML5 데이터 푸시 SSE 원리 및 애플리케이션 개발에 대한 자세한 그래픽 설명

HTML5 데이터 푸시 SSE 원리 및 애플리케이션 개발에 대한 자세한 그래픽 설명

黄舟
黄舟원래의
2017-03-08 15:23:152657검색

JavaScript는 동작을 표현하고 CSS는 모양을 표현합니다. HTML은 구조(논리적 구조)와 내용(데이터 자체)을 모두 표현한다는 점에 유의하세요. 일반적으로 데이터를 업데이트해야 할 경우 구조를 업데이트할 필요가 없습니다. 조직 구조를 바꾸지 않고 데이터만 바꾸려는 욕구가 데이터 풀(Pull), 데이터 푸시(Data Push) 기술의 등장을 촉진한 것이다.

SSE는 서버가 클라이언트에 새 데이터를 푸시할 수 있도록 하는(데이터 푸시라고 함) HTML5 기술입니다. 데이터 푸시에는 업데이트 없음과 데이터 풀이라는 두 가지 대안이 있습니다.

업데이트 솔루션 없음:

HTML을 로드한 후 HTML 페이지가 표시되고 브라우저에서 이미지, CSS 파일, JavaScript 파일을 요청합니다. 등은 모두 브라우저가 캐시할 수 있는 정적 파일입니다. 페이지가 PHP, Ruby, Python 및 사용자를 위해 HTML을 동적으로 생성하는 기타 언어와 같은 백엔드 언어를 사용하는 경우.

데이터 가져오기 방식:

브라우저는 일부 사용자 행동을 기반으로 하거나 특정 기간이 지난 후 또는 다른 트리거 구성표 서버 측에서는 모든 데이터를 요청하거나 업데이트하고 JavaScript 또는 메타 태그를 통해 전체 페이지를 다시 로드하도록 명령할 수 있습니다. 익숙한 Ajax 기술은 최신 데이터를 요청하는 데에만 사용되며, 데이터가 수신되면 javascript 함수는 이를 사용하여 DOM을 로컬로 업데이트합니다. 데이터 가져오기의 본질: 새 데이터만 가져오고 페이지에서 영향을 받는 부분만 업데이트합니다.

위의 어느 것도 데이터 푸시가 아닙니다. 데이터 푸시는 정적 파일이 아니며 브라우저가 데이터 업데이트 요청을 시작하는 것과도 관련이 없습니다. 데이터 푸시는 서버가 새 데이터를 보내기 위해 클라이언트를 선택하는 경우입니다.

데이터 소스에 새로운 데이터가 있으면 서버는 클라이언트가 요청할 때까지 기다리지 않고 즉시 하나 이상의 클라이언트에 보낼 수 있습니다. 뉴스, 최신 주식, 온라인 친구의 채팅 메시지, 새로운 일기 예보, 전략 게임의 다음 단계 등

SSE는 빈번한 업데이트, 낮은 지연 시간 및 서버에서 클라이언트로의 데이터에 적합합니다. WebSocket과의 차이점:

1) 편의성. 새로운 구성 요소를 추가할 필요가 없습니다. 익숙한 백엔드 언어와 프레임워크를 계속 사용할 수 있습니다. 새 IP 또는 새 가상 머신에 대한 새 가상 머신의 포트 번호가 문제입니다.

2) 서버 측의 단순성. SSE는 기존 HTTP/HTTPS 프로토콜에서 작동하므로 기존 프록시 서버 및 인증 기술에서 직접 실행할 수 있습니다.

SSE에 비해 WebSocket의 가장 큰 장점은 양방향 통신이라는 점입니다. 즉, 서버에서 데이터를 보내는 것은 서버에서 데이터를 받는 것처럼 간단하지만 SSE는 일반적으로 별도의 Ajax 요청을 전달합니다. 클라이언트에서 서버로 데이터를 전송하므로 Ajax를 사용하면 WebSocket에 비해 오버헤드가 늘어납니다. 따라서 1초에 한 번 이상 서버에 데이터를 전송해야 한다면 WebSocket을 사용해야 합니다.

구체적인 코드는 다음과 같습니다.

html 코드

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...
<script> var es = new EventSource("basic_sse.php"); es.addEventListener("message",function(e){ //e.data document.getElementById("x").innerHTML += "\n"+e.data; },false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。 </script>

주의해야 할 점 즉, 서버를 사용하십시오. 잠재적인 JavaScript 주입 공격을 방지하려면 데이터를 입력하기 전에 확인하는 것이 가장 좋습니다.

php 코드

<?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();
?>

"Content-Type: text/event-stream"은 SSE MIME용으로 특별히 설계되었습니다. 유형,

효과 스크린샷

데이터 푸시가 잘못된 선택인 경우

정적을 먼저 고려하세요. , 데이터 푸시를 도입하지 않고 사용자가 페이지를 열 때마다 브라우저와 서버 사이에 소켓 연결이 열리고 서버 전화 정보가 사용자에게 반환됩니다. 디스크. 정적 HTML 파일이나 이미지와 마찬가지로 많은 데이터베이스에 연결하는 배경 언어를 실행하는 것처럼 복잡할 수 있습니다. 여기서 중요한 점은 필요한 정보가 반환되면 소켓이 닫히고 각 HTTP 요청이 의도한 작업을 완료할 때마다 서버에서 제한되는 상대적으로 수명이 짧은 소켓 연결 중 하나를 연다는 것입니다. 재활용을 위해.

이제 데이터 푸시를 비교해 보겠습니다. 요청이 완료되지 않고 항상 보낼 정보가 많기 때문에 소켓은 열린 상태로 유지됩니다. 당연히 리소스가 제한되어 있으므로 동시에 SSE 연결 수에는 제한이 있습니다.

최신 애플리케이션에 대해 전화 서비스 지원을 제공하고 있는 상황을 상상해 보십시오. 1000명의 사용자에게 서비스를 제공하는 콜 센터 직원이 있는데, 사용자에게 문제가 발생하여 교환원 중 한 명이 전화를 끊었습니다. 새로운 고객 전화는 교환원 중 한 명이 전화를 끊을 때까지 대기합니다. 이는 일반적인 네트워크 서비스 패턴입니다.

그런데 지금은 고객분이 전화하셔서 '지금은 문제가 없지만 앞으로 몇 시간 안에 귀사 제품을 사용해 보시고 문제가 발생하면 즉시 답변해주시길 바랍니다'라고 하셨습니다. 이 고객은 몇 시간 동안 교환원과 통화를 계속하게 되며 콜센터 서비스 자원의 10%가 낭비됩니다. 해당 고객이 10명이면 나머지 990명의 고객은 전화를 걸 수 없습니다. 이것이 데이터 푸시 모델입니다.

물론 이것이 항상 나쁜 것은 아닙니다. 이 고객이 오후 내내 몇 초마다 문제가 발생한다면 전화를 열어 두는 것이 서비스 자원의 10%를 낭비하지는 않지만 증가하게 됩니다. 각 질문에는 새로운 호출(예: 데이터 가져오기)이 필요하기 때문에 운영자는 고객의 신원을 확인하고 계정을 가져오는 데 추가 시간을 소비해야 하므로 서비스 효율성이 떨어집니다. 통화 상태를 유지하면 일반적으로 고객 만족도가 높아질 뿐만 아니라 콜센터의 효율성도 향상됩니다. 이는 데이터 푸시에 가장 적합한 시나리오입니다.


위 내용은 HTML5 데이터 푸시 SSE 원리 및 애플리케이션 개발에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 로컬 저장소 Localstorage 코드 세부정보다음 기사：HTML5 로컬 저장소 Localstorage 코드 세부정보

관련 기사

더보기