HTML5의 서버에서는 이벤트 이해

SSE (Server-Sent Events)는 서버에서 클라이언트로의 실시간 데이터 푸시를 구현하는 데 사용되는 HTML5의 기술이며 주식 시장, 알림 시스템 및 기타 시나리오에 적합합니다. HTTP 프로토콜을 기반으로하며 연결을 설정 한 후에도 열려 있습니다. 서버는 언제든지 업데이트를 보낼 수 있으며 자동 재 연결 및 표준 데이터 형식을 지원할 수 있습니다. 프론트 엔드는 EventSource 객체를 작성하고 메시지 이벤트를 듣고 데이터를 수신합니다. 백엔드는 올바른 MIME 유형 (텍스트/이벤트 스트림)을 설정하고 연결을 열고 지속적으로 출력하여 데이터 스트림을 유지해야합니다. 그것을 사용할 때는 크로스 도메인 문제, 연결 시간 초과, 브라우저 호환성 및 중간 계층 제한에주의를 기울여야합니다.

SSE (Server-Sent Events)는 HTML5에서 매우 실용적이지만 간과되는 기능입니다. 서버가 실시간 업데이트를 브라우저로 푸시 할 수 있으며 주식 시장, 알림 시스템, 채팅 응용 프로그램 및 기타 시나리오에 적합합니다.

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

SSE는 서버가 클라이언트에 데이터를 적극적으로 보낼 수있는 기술입니다. 기존 폴링 방법과 달리 SSE가 연결을 설정 한 후 서버는 새로운 데이터를 클라이언트에게 지속적으로 푸시 할 수 있습니다.

• HTTP 프로토콜을 기반으로하며 구현하기가 비교적 간단합니다.
• 자동 재 연결이 지원되며 연결이 끊김 후 재건이 시도됩니다.
• 데이터 형식에는 표준 사양이 있으며 구문 분석하기 쉽습니다.

예를 들어 : 날씨 경고 시스템을 작업하는 경우 SSE를 사용하여 사용자가 수동으로 페이지를 새로 고치지 않고 최신 날씨 경보 정보를 실시간으로 푸시 할 수 있습니다.

프론트 엔드에서 SSE를 사용하는 방법?

웹 페이지에서 SSE를 사용하려면 EventSource 객체를 만들고 메시지 이벤트를 듣습니다.

 const eventSource = new EventSource ( 'your-endpoint-url');

eventsOURCE.ONMESSAGE = function (event) {
  Console.log ( '수신 된 메시지 :', event.data);
};

주목할만한 것들 :

• 서버에서 반환 한 MIME 유형이 text/event-stream 인지 확인하십시오.
• 기본적으로 연결이 중단되면 브라우저는 자동으로 다시 연결을 시도합니다.
• 연결 상태 및 오류 처리는 .onopen 및 .onerror 를 통해들을 수 있습니다.

백엔드와 협력하는 방법?

SSE를 지원하려면 백엔드는 연결을 유지하고 지정된 형식으로 데이터 스트림을 출력해야합니다.

Node.js를 예로 들어 보면 다음과 같은 간단한 SSE 인터페이스를 작성할 수 있습니다.

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

  setInterval (() => {
    res.write (`data : $ {new date ()} \ n \ n`);
  }, 1000);
});

PHP 및 Python과 같은 다른 언어는 응답 헤더와 출력 데이터 스트림을 유사하게 설정할 수 있습니다. 키는 응답을 한 번에 종료하는 것이 아니라 연결을 열어 두는 것입니다.

SSE를 사용할 때 FAQ

SSE는 매우 편리하지만 실제로 사용하면 약간의 함정이 발생할 수 있습니다.

• 크로스 도메인 문제 : 전면 및 후면에 올바른 CORS 헤더가 설정되어 있는지 확인하십시오. 그렇지 않으면 연결을 설정할 수 없습니다.
• 연결 시간 초과 : 일부 에이전트 또는로드 밸런서는 장기 연결을 방해 할 수 있으며 서버 측에 하트 비트 메커니즘을 추가하는 것이 좋습니다.
• 브라우저 호환성 : 최신 브라우저는 기본적으로 SSE를 지원하지만 IE와 호환 해야하는 경우 대안을 고려해야 할 수도 있습니다.

연결이 자주 연결이 끊어 지거나 메시지를받을 수없는 경우 서버가 응답 헤더를 올바르게 설정했는지 여부와 긴 연결을 제한하는 중간 계층 (예 : NGINX)이 있는지 확인할 수 있습니다.

기본적으로 그게 다야. SSE를 이해하고 올바르게 사용하면 많은 시나리오에서 실시간 커뮤니케이션의 어려움을 단순화 할 수 있습니다.

위 내용은 HTML5의 서버에서는 이벤트 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!