서버에서 보낸 이벤트(SSE) 작동 방식-JS 튜토리얼-php.cn

How Server-Sent Events (SSE) Work

SSE(Server Sent Events)는 웹 개발 세계에서는 널리 사용되지 않습니다. 이 기사에서는 SSE가 무엇인지, 어떻게 작동하는지, 어떤 이점을 얻을 수 있는지 자세히 알아봅니다. 귀하의 지원서입니다.

SSE란 무엇입니까?

SSE는 HTTP 연결을 통해 서버에서 클라이언트로 실시간 업데이트를 보내는 간단하고 효율적인 방법입니다. 이는 HTML5 사양의 일부이며 모든 최신 웹 브라우저에서 지원됩니다. SSE는 서버가 클라이언트에 메시지를 보내지만 클라이언트가 서버에 다시 메시지를 보낼 수 없는 단방향 데이터 흐름을 기반으로 합니다.

SSE는 '서버 전송 이벤트'라는 텍스트 기반 형식을 사용하여 클라이언트에 데이터를 보냅니다. 데이터는 일련의 이벤트로 전송되며 각 이벤트에는 메시지와 선택적 이벤트 유형이 포함됩니다. 이벤트 유형은 다양한 메시지 유형을 구별하는 데 사용되며 클라이언트가 메시지를 다르게 처리할 수 있도록 해줍니다.

SSE는 어떻게 작동하나요?

SSE 프로토콜은 서버와 클라이언트 사이에 지속적인 HTTP 연결을 설정하여 작동합니다. 이 연결은 클라이언트가 서버로부터 업데이트를 받기를 원하는 동안 열려 있습니다. 서버에 보낼 새 데이터가 있으면 특수 MIME 유형인 "text/event-stream"을 사용하여 HTTP 응답을 보냅니다.

응답에는 일련의 이벤트가 포함되어 있으며 각 이벤트는 새 줄 문자("n")로 구분됩니다. 각 이벤트의 형식은 다음과 같습니다.

event: [event type]\n
data: [message]\n\n

로그인 후 복사

'이벤트' 필드는 선택사항이며 이벤트 이름을 제공하는 데 사용됩니다. "데이터" 필드에는 전송되는 실제 메시지가 포함됩니다. 각 이벤트 끝에 있는 두 개의 줄 바꿈 문자는 이벤트 종료를 알리는 데 사용됩니다.

다음은 간단한 SSE 응답의 예입니다.

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

로그인 후 복사

이 예에서는 세 가지 이벤트를 클라이언트에 보냅니다. 처음 두 이벤트는 이벤트 유형 "메시지"를 가지며 간단한 텍스트 메시지를 포함합니다. 세 번째 이벤트에는 이벤트 유형이 "customEvent"이고 메시지로 JSON 개체가 포함되어 있습니다.

클라이언트는 SSE 응답을 받으면 데이터를 사용하여 사용자 인터페이스를 업데이트합니다. 예를 들어 JavaScript를 사용하여 DOM을 조작할 수 있습니다.

SSE 구현

애플리케이션에 SSE를 구현하는 것은 비교적 간단합니다. 다음은 Node.js와 Express 프레임워크를 사용하여 SSE를 구현하는 방법에 대한 예입니다.

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

로그인 후 복사

이 예에서는 '/events'에 SSE 엔드포인트를 설정합니다. SSE에 필요한 헤더를 설정하고 연결이 설정되었는지 확인하기 위해 클라이언트에 초기 이벤트를 보냅니다.

그런 다음 매초마다 클라이언트에 주기적인 이벤트를 보내는 간격을 설정합니다. 마지막으로 클라이언트가 연결을 종료하는 간격을 정리합니다.

클라이언트 측에서는 다음 JavaScript 코드를 사용하여 SSE 이벤트를 수신할 수 있습니다.

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

로그인 후 복사

이 예에서는 새 EventSource 객체를 생성하고 SSE 엔드포인트의 URL을 전달합니다. 그런 다음 "메시지" 이벤트를 수신하고 데이터를 콘솔에 기록합니다. 연결 문제가 있을 경우를 대비해 '오류' 이벤트도 수신하고 있습니다.

프런트 엔드의 EventSource 경로는 GET 요청에만 사용할 수 있습니다. POST 및 기타 HTTP 메서드를 사용하려면 응답 데이터를 직접 구문 분석해야 합니다.

네이티브 Node.js 구현을 원한다면 여기

SSE 사용 사례

SSE는 실시간 업데이트가 필요한 다양한 애플리케이션에서 사용할 수 있습니다. 다음은 몇 가지 예입니다.

소셜 미디어 플랫폼: SSE는 새 메시지, 댓글, 좋아요 알림 등 소셜 미디어 플랫폼에 대한 실시간 업데이트를 제공하는 데 사용할 수 있습니다.
금융 애플리케이션: SSE를 사용하면 주식 가격, 환율, 뉴스 등 금융 애플리케이션에 대한 실시간 업데이트를 제공할 수 있습니다.
온라인 게임: SSE를 사용하면 게임 이벤트, 점수, 순위 알림 등 온라인 게임 애플리케이션에 대한 실시간 업데이트를 제공할 수 있습니다.

SSE 사용의 이점

폴링이나 WebSocket과 같은 다른 실시간 통신 방법에 비해 SSE를 사용하면 여러 가지 이점이 있습니다.

효율성

SSE는 지속적인 HTTP 연결을 사용하므로 연결 설정 및 유지에 드는 오버헤드가 다른 방법보다 훨씬 낮습니다. 이를 통해 SSE는 더욱 효율적이고 리소스 집약도가 낮아지며, 이는 다수의 클라이언트를 처리할 때 특히 중요합니다.

Kesederhanaan

SSE ialah protokol ringkas yang mudah difahami dan dilaksanakan. Ia tidak memerlukan sebarang perpustakaan atau rangka kerja khas dan boleh dilaksanakan menggunakan teknologi web standard seperti JavaScript dan HTTP.

Kebolehpercayaan

SSE ialah protokol yang boleh dipercayai yang menyediakan penyambungan semula automatik sekiranya berlaku gangguan rangkaian. Ini memastikan pelanggan akan terus menerima kemas kini walaupun sambungan terputus buat sementara waktu.

Kesimpulan

Peristiwa Dihantar Pelayan (SSE) ialah cara yang mudah dan cekap untuk menghantar kemas kini masa nyata daripada pelayan kepada klien melalui sambungan HTTP. Ia adalah sebahagian daripada spesifikasi HTML5 dan disokong oleh semua pelayar web moden. SSE menggunakan aliran data satu arah, di mana pelayan menghantar mesej kepada klien, tetapi klien tidak boleh menghantar mesej kembali ke pelayan. Ini menjimatkan anda daripada terus mengundi pelayan untuk acara, yang bukan sahaja meningkatkan prestasi tetapi juga mengurangkan kerumitan.

Jika anda mendapati ini membantu, sila pertimbangkan melanggan surat berita saya untuk lebih banyak artikel dan alatan berguna tentang pembangunan web. Terima kasih kerana membaca!

위 내용은 서버에서 보낸 이벤트(SSE) 작동 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!