HTML5 Server-Sent Events (SSE)로 실시간 데이터를 수신합니다.

SSE (Server-Sent Events)는 HTML5에서 실시간 업데이트를 브라우저로 푸시하기 위해 제공하는 가벼운 솔루션입니다. 주식 시장, 알림 및 기타 시나리오에 적합한 긴 HTTP 연결을 통한 일방 통신 통신을 실현합니다. 이를 사용할 때 EventSource 인스턴스를 작성하고 메시지를 듣습니다. const eventSource = new EventSource ( '/stream'); eventSource.onMessage = function (event) {console.log ( '수신 메시지 :', event.data); }; 서버는 컨텐츠 유형을 텍스트/이벤트 스트림으로 설정하고 연결을 열고 출력 데이터 : Content \ N \ n 형식의 출력 데이터를 설정해야합니다. 일반적인 고려 사항은 다음과 같습니다. 1. 크로스 도메인 문제를 해결하기 위해 CORS 구성; 2. 자동 재 연결을 달성하기위한 재시도 시간 제어; 3. 이벤트 사용 : 사용자 정의 이벤트 유형을 정의합니다. 4. 리소스 누출을 방지하기 위해 연결 시간 초과를 관리하십시오. WebSocket과 비교할 때 SSE는 더 간단하고 사용하기 쉽고 방화벽을 관통하기 위해 HTTP 프로토콜을 지원하지만 단지 통신만으로도 호환성이 약간 열악합니다. 자주 상호 작용하지 않고 실시간 푸시 시나리오에 적합합니다.

웹 개발에서 서버에서 브라우저로 실시간 업데이트를 푸시 해야하는 경우 HTML5는 가벼운 솔루션 인 SEVERTENTENTENT 이벤트 (SSE)를 제공합니다. WebSocket과 비교할 때 구현하기가 더 간단하고 쉽고 특히 서버만이 일방 통신을 클라이언트와 통신 해야하는 시나리오에 적합합니다.

서버에 대한 이벤트는 무엇입니까?

Server-Sent Events는 HTML5의 일부로 서버가 HTTP 긴 연결을 통해 데이터를 브라우저로 푸시 할 수 있습니다. 기존의 폴링 방법과 달리 SSE는 연결을 설정 한 후에도 열려 있으며 서버는 언제든지 재고 견적, 실시간 알림 또는 채팅 메시지와 같은 새로운 데이터를 보낼 수 있습니다.

기본 사용법은 EventSource 인스턴스를 작성하고 서버 측의 URL을 가리키는 것입니다.

 const eventSource = new EventSource ( '/stream');
eventsOURCE.ONMESSAGE = function (event) {
    Console.log ( '수신 된 메시지 :', event.data);
};

서버가 계속해서 데이터를 보내는 한 클라이언트는 계속해서 데이터를 수신 할 수 있습니다.

서버 측에서 SSE 지원을 설정하는 방법은 무엇입니까?

다른 백엔드 언어마다 구현 방법이 다르지만 핵심 포인트는 동일합니다. 연결을 열고 SSE 형식으로 컨텐츠를 출력하십시오.

Node.js Express를 예로 들어 보겠습니다.

 app.get ( '/stream', (req, res) => {
    res.setheader ( 'content-type', 'text/event-stream');
    res.setheader ( 'Cache-Control', 'No-Cache');

    // 데이터 보내기 시뮬레이션 setInterVal (() => {
        res.write (`data : $ {new date ()} \ n \ n`);
    }, 1000);
});

핵심 사항 :

• 올바른 응답 헤더, 특히 text/event-stream 설정하십시오
• 응답을 너무 일찍 끝내지 마십시오. 연결을 계속 열어
• 데이터 형식은 data: 内容\n\n , 그리고 두 개의 Newlines는 메시지의 끝을 나타냅니다.

Python (Flask), PHP 또는 Java Spring Boot와 같은 다른 언어도 비슷하게 구현할 수 있습니다.

자주 묻는 질문과 메모

1. 도메인 교차 문제 프론트 엔드와 백엔드가 동일한 도메인 이름 아래에 있지 않은 경우, EventSource 시작한 요청이 허용되도록 CORS를 구성해야합니다.

 액세스 제어-홀로-오리진 : *

또는 특정 도메인 이름을 지정합니다.

2. 자동 재 연결 메커니즘 연결이 중단되면 브라우저는 자동으로 다시 연결하려고 시도하고 기본 대기 시간은 3 초입니다. 서버 측 에서이 간격을 제어 할 수 있습니다.

 재 시도 : 5000

3. 사용자 정의 이벤트 유형 기본 onmessage 외에도 다른 이벤트 이름을 정의 할 수도 있습니다.

 이벤트 : 업데이트
데이터 : { "type": "News", "Content": "New News Is Coming"}}

프론트 엔드 모니터링 :

 eventsOurce.addeventListener ( '업데이트', function (event) {
    Console.log ( '업데이트 수신 :', event.data);
});

4. 연결 시간 초과 및 리소스 릴리스 연결이 무기한으로 매달리지 않도록주의하십시오. 서버는 클라이언트가 연결이 끊어 졌는지 여부를 감지하고 메모리 누출을 피하기 위해 자원을 제 시간에 해제하는 메커니즘이 있어야합니다.

WebSocket 대신 SSE를 언제 사용해야합니까?

WebSocket은 더 강력하고 양방향 통신을 지원하지만 복잡성도 높습니다. 정보를 클라이언트에게 푸시하기 위해 서버 만 필요하고 빈번한 상호 작용이 필요하지 않은 경우 SSE가 더 나은 선택입니다.

장점은 다음과 같습니다.

• 개발 프로세스를 단순화하고 전면 및 후면을 모두 구현하기 쉽습니다.
• 자동 재 연결을 지원합니다
• 표준 HTTP 프로토콜을 사용하여 방화벽을 쉽게 관통 할 수 있습니다.

단점도 분명합니다.

• 서버에서 클라이언트로의 일방 통신 만 지원됩니다
• 브라우저 호환성은 약간 열악합니다 (즉, 오래된 버전의 Edge는 지원되지 않습니다)

기본적으로 그게 다야. SSE는 복잡하지는 않지만 실제 배포에서는 연결 관리, 오류 처리 및 성능 최적화에주의를 기울여야합니다. 간단한 실시간 알림 시스템을 만들고 싶다면 SSE는 가볍고 실용적인 선택입니다.

위 내용은 HTML5 Server-Sent Events (SSE)로 실시간 데이터를 수신합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!