이 페이지는 Cloud Translation API를 통해 번역되었습니다.

서버 전송 이벤트로 업데이트 스트리밍

Eric Bidelman

서버 전송 이벤트 (SSE)는 HTTP HTTP(S2)를 사용하여 서버에서 클라이언트로 자동 업데이트를 연결 연결이 설정되면 서버가 데이터를 시작할 수 있습니다. 있습니다.

SSE를 사용하여 웹 앱에서 푸시 알림을 보내는 것이 좋습니다. SSE는 한 방향으로 정보를 전송하므로 있습니다

SSE의 개념은 익숙할 것입니다. 웹 앱이 '구독'함 스트리밍으로 서버에 의해 생성된 업데이트와 새 이벤트가 발생할 때마다 클라이언트에게 전송됩니다 하지만 서버 전송 이벤트를 제대로 이해하려면 이해하도록 해야 합니다. 여기에는 다음이 포함됩니다.

폴링: 애플리��이션이 반복적으로 서버의 데이터를 폴링합니다. 이 기법은 는 대부분의 AJAX 응용 프로그램에 의해 사용됩니다. HTTP 프로토콜을 사용하여 데이터는 요청 및 응답 형식을 중심으로 이루어집니다 클라이언트가 요청을 하고 서버가 데이터로 응답할 때까지 기다립니다. 사용할 수 있는 값이 없는 경우 반환됩니다. 추가 폴링은 HTTP 오버헤드를 증가시킵니다.
장기 폴링 (Hanging GET / COMET): 서버에 데이터가 없는 경우 가용한 경우 서버는 새 데이터를 사용할 수 있을 때까지 요청을 열린 상태로 유지합니다. 따라서 이 기법을 'Hanging GET'이라고도 합니다. 날짜 정보를 사용할 수 있게 되면 서버가 응답하고 연결을 닫습니다 프로세스가 반복됩니다 따라서 서버는 지속적으로 새로운 데이터를 얻을 수 있습니다. 이를 설정하기 위해 개발자는 일반적으로 스크립트 태그를 '무한' 있습니다.

서버 전송 이벤트는 처음부터 효율적으로 설계되었습니다. SSE와 통신할 때 서버는 데이터를 앱을 실행할 수 있습니다. 즉, 업데이트가 발생하면 서버에서 클라이언트로 스트리밍할 수 있습니다. SSE 서버와 클라이언트 간에 단일 단방향 채널을 엽니다.

서버 전송 이벤트와 장기 폴링의 주요 차이점은 SSE는 브라우저에서 직접 처리하므로 사용자는 메시지만 수신하면 됩니다.

서버 전송 이벤트와 WebSocket

WebSocket보다 서버 전송 이벤트를 선택하는 이유는 무엇일까요? 좋은 질문입니다.

WebSockets에는 다양한 기능을 가지고 있는 양방향, 전이중 통신입니다 양방향 채널은 게임, 메시지 앱, 게임 개발 환경에서 실시간에 가까운 업데이트가 필요한 있습니다.

하지만 서버와의 단방향 통신만 필요한 경우도 있습니다. 예를 들어 친구가 자신의 상태, 주식 티커, 뉴스 피드, 기타 자동화된 데이터 푸시 메커니즘을 제공합니다. 즉, 클라이언트 측 웹 SQL 데이터베이스 또는 IndexedDB 객체 저장소에 대한 업데이트 데이터를 서버로 전송해야 하는 경우 XMLHttpRequest은(는) 항상 친구입니다.

SSE는 HTTP를 통해 전송됩니다. 특별한 프로토콜이나 서버는 없습니다. 작업을 수행할 수 있습니다. WebSocket에는 전이중이 필요함 새로운 WebSocket 서버가 필요합니다.

또한 서버 전송 이벤트에는 WebSocket에는 없는 다양한 기능이 있습니다. 자동 재연결, 이벤트 ID, 데이터 전송 및 전송 기능 등을 지정할 수 있습니다.

JavaScript로 EventSource 만들기

이벤트 스트림을 구독하려면 EventSource 객체를 만들고 이 객체에 스트림 URL:

const source = new EventSource('stream.php');

다음으로 message 이벤트의 핸들러를 설정합니다. 원하는 경우 open 및 error를 수신 대기합니다.

source.addEventListener('message', (e) => {
  console.log(e.data);
});

source.addEventListener('open', (e) => {
  // Connection was opened.
});

source.addEventListener('error', (e) => {
  if (e.readyState == EventSource.CLOSED) {
    // Connection was closed.
  }
});

서버에서 업데이트가 푸시되면 onmessage 핸들러가 실행됩니다. 새 데이터를 e.data 속성에서 사용할 수 있습니다. 마법 같은 부분은 연결이 닫힐 때마다 브라우저는 자동으로 약 3초 후에 소스 실행 서버 구현이 이 재연결 제한 시간을 제어할 수 있습니다.

이상입니다. 이제 클라이언트가 stream.php의 이벤트를 처리할 수 있습니다.

이벤트 스트림 형식

소스에서 이벤트 스트림을 전송하는 것은 text/event-stream 콘텐츠 유형으로 제공되는 일반 텍스트 응답 SSE 형식을 따릅니다 기본 형식에서는 응답에 data: 줄이 포함되며 그 뒤에 메시지 다음에 '\n' 2개가 표시됨 문자를 사용하여 스트림을 종료합니다.

data: My message\n\n

여러 줄 데이터

메시지가 더 긴 경우 여러 data: 줄을 사용하여 분할할 수 있습니다. data:로 시작하는 두 개 이상의 연속은 다음과 같이 처리됩니다. 단일 데이터 조각이 있어야 합니다. 즉, 하나의 message 이벤트만 실행됩니다.

각 줄은 하나의 '\n'(으)로 끝나야 합니다. ( 2개). message 핸들러에 전달되는 결과는 단일 문자열입니다. 줄바꿈 문자로 연결됩니다. 예를 들면 다음과 같습니다.

data: first line\n
data: second line\n\n</pre>

그러면 '첫 번째 줄\n두 번째 줄'이 생성됩니다. e.data. 그런 다음 e.data.split('\n').join(''): "\n" 없이 메시지를 재구성합니다. 있습니다.

JSON 데이터 전송

여러 줄을 사용하면 문법을 손상하지 않고 JSON을 전송할 수 있습니다.

data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n

해당 스트림을 처리할 수 있는 클라이언트 측 코드:

source.addEventListener('message', (e) => {
  const data = JSON.parse(e.data);
  console.log(data.id, data.msg);
});

ID를 이벤트에 연결

다음으로 시작하는 줄을 포함하여 스트림 이벤트와 함께 고유 ID를 보낼 수 있습니다. id::

id: 12345\n
data: GOOG\n
data: 556\n\n

ID를 설정하면 브라우저가 마지막으로 실행된 이벤트를 추적하여 서버 연결이 중단되면 특수 HTTP 헤더 (Last-Event-ID)가 새로운 요청으로 설정됩니다. 이렇게 하면 브라우저에서 실행하기에 적합한 이벤트를 결정할 수 있습니다. message 이벤트에는 e.lastEventId 속성이 포함됩니다.

재연결 제한 시간 제어

브라우저가 약 3초 동안 소스에 다시 연결하려고 시도합니다. 종료된다는 것을 의미합니다 다음을 포함하여 제한 시간을 변경할 수 있습니다. retry:로 시작하고 그 뒤에 밀리초 수가 붙는 행 연결할 수 있습니다.

다음 예시에서는 10초 후에 재연결을 시도합니다.

retry: 10000\n
data: hello world\n\n

이벤트 이름 지정

단일 이벤트 소스는 이벤트 이름 event:로 시작하는 행이 있는 경우 를 입력하면 이벤트가 해당 이름과 연결됩니다. 클라이언트에서는 특정 이벤트를 리슨하도록 이벤트 리스너를 설정할 수 있습니다.

예를 들어 다음 서버 출력은 세 가지 유형의 이벤트를 전송합니다. 일반적인 '메시지' 이벤트, 'userlogon' 및 'update' 이벤트를 사용합니다.

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n

클라이언트에서 이벤트 리스너를 설정한 경우:

source.addEventListener('message', (e) => {
  const data = JSON.parse(e.data);
  console.log(data.msg);
});

source.addEventListener('userlogon', (e) => {
  const data = JSON.parse(e.data);
  console.log(`User login: ${data.username}`);
});

source.addEventListener('update', (e) => {
  const data = JSON.parse(e.data);
  console.log(`${data.username} is now ${data.emotion}`);
};

서버 예

다음은 PHP로 구현된 기본 서버 구현입니다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.

/**
* Constructs the SSE data format and flushes that data to the client.
*
* @param string $id Timestamp/id of this connection.
* @param string $msg Line of text that should be transmitted.
**/

function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}

$serverTime = time();

sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>

다음은 Express 핸들러:

app.get('/events', (req, res) => {
    // Send the SSE header.
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    // Sends an event to the client where the data is the current date,
    // then schedules the event to happen again after 5 seconds.
    const sendEvent = () => {
        const data = (new Date()).toLocaleTimeString();
        res.write("data: " + data + '\n\n');
        setTimeout(sendEvent, 5000);
    };

    // Send the initial event immediately.
    sendEvent();
});

sse-node.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
    const source = new EventSource('/events');
    source.onmessage = (e) => {
        const content = document.createElement('div');
        content.textContent = e.data;
        document.body.append(content);
    };
    </script>
  </body>
</html>

이벤트 스트림 취소

일반적으로 브라우저 연결 시 브라우저가 이벤트 소스에 자동으로 다시 연결됩니다. 종료되었지만 해당 동작은 클라이언트 또는 서버에서 취소될 수 있습니다.

클라이언트에서 스트림을 취소하려면 다음을 호출합니다.

source.close();

서버에서 스트림을 취소하려면 text/event-stream가 아닌 값으로 응답하세요. Content-Type 또는 200 OK이 아닌 HTTP 상태를 반환합니다. (예: 404 Not Found)

두 가지 방법 모두 브라우저에서 연결을 다시 설정하지 못하게 합니다.

보안 관련 단어

EventSource에서 생성된 요청에는 다른 네트워크 API도 지원합니다 서버의 SSE 엔드포인트를 다른 출처에서 액세스할 수 있는 경우 교차 출처 리소스 공유 (CORS).