SSE (Server Send Events)를 사용하면 서버가 언제든지 데이터를 브라우저로 푸시하여 실시간 뉴스 보고서, 일기 예보 및 주가와 같은 기능을 가능하게합니다. 브라우저는 연결을 설정하기위한 초기 요청을 발행하고 서버는 연결을 열어 문자 메시지를 보냅니다.
SSE는 WebSockets보다 간단하고 표준 HTTP를 사용하며 단방향 통신을 지원하며 자동 재 연결을 제공합니다. 서버는 언제든지 SSE 응답을 종료 할 수 있지만 연결이 중단되면 브라우저는 자동으로 다시 연결을 시도합니다.
서버는 모든 SSE 채널 URL 또는 단일 엔드 포인트 URL을 제공 할 수 있습니다. 서버의 메시지에는 특정 유형의 정보를 식별하기위한 관련 이벤트가있을 수 있습니다. 서버는 데이터 라인 후 ID를 보내 연결을 분리 할 때 누락 된 메시지를 재현 할 수 있습니다.
브라우저는 이벤트 소스 객체의 .close () 메소드를 사용하여 SSE 통신을 종료 할 수 있습니다. 서버는 Res.end ()를 트리거하거나 재 시도 지연을 보내어 연결을 종료 한 다음 동일한 브라우저가 다시 연결하려고 할 때 HTTP 상태 204를 반환 할 수 있습니다. 새로운 EventSource 객체를 작성하여 브라우저 만 연결을 다시 설정할 수 있습니다.
이 기사는 서버 보내기 이벤트 (SSE)를 사용하여 클라이언트가 HTTP 연결을 통해 서버에서 자동 업데이트를 수신 할 수 있도록합니다. 또한 사용을 탐색하고 Node.js를 사용하여 서버를 사용하여 이벤트를 보내는 방법에 대한 실질적인 데모를 보여줄 것입니다.
서버 전송 이벤트의 장점
서버 보내기 이벤트의 빠른 시작
중요한 팁
고급 서버 전송 이벤트
단일 및 다중 SSE 채널
단일 채널에서 다른 데이터를 보냅니다
데이터 식별자 사용 리트리 지연을 지정하십시오
기타 이벤트 핸들러
SSE 통신 종료
결론
서버 전송 이벤트의 장점
웹은 요청-응답을 기반으로 HTTP 메시지에 응답합니다. 브라우저는 URL 요청을 발행하고 서버는 데이터를 반환합니다. 이로 인해 브라우저가 이미지, CSS, JavaScript 등에 더 많은 요청을 만들 수 있으며 서버가 응답 할 수 있습니다. 서버는 브라우저에 메시지를 적극적으로 보낼 수 없으므로 데이터가 변경되었음을 어떻게 표시합니까? 다행히도 서버 송신 이벤트 (SSE)를 사용하여 라이브 뉴스 릴리스, 일기 예보 및 주가와 같은 기능을 추가 할 수 있습니다.
실시간 데이터 업데이트를 달성하기 위해 항상 표준 웹 기술을 사용하는 것이 가능했습니다.
1990 년대 웹은 전체 페이지 또는 프레임/iframe을 사용하여 새로 고쳤습니다.
2000 년대 웹은 Ajax를 소개하여 긴 폴링을 사용하여 데이터를 요청하고 해당 DOM 요소를 새로운 정보로 업데이트 할 수 있습니다.
브라우저가 새로 고침을 트리거해야하기 때문에 이러한 옵션 중 어느 것도 이상적이지 않습니다. 요청을 너무 자주하는 경우 데이터 변경이 없으므로 브라우저와 서버 모두 불필요한 작업을 수행합니다. 너무 느리게 요청하면 중요한 업데이트를 놓치고 팔로우하고있는 주가가 급락했습니다!
서버 보내기 이벤트 (SSE)는 서버가 언제든지 브라우저에 데이터를 푸시 할 수 있도록합니다.
브라우저는 여전히 연결을 설정하기위한 초기 요청을합니다.
서버는 이벤트 스트림 응답을 반환하고 연결을 열어줍니다.
이 코드는 표준 node.js http 및 url 모듈을 사용하여 웹 서버를 생성하고 URL을 구문 분석합니다.
서버는 들어오는 URL 요청을 확인하고 /랜덤 경로를 만나면 반응합니다.
는 처음에 SSE HTTP 이벤트 스트림 헤더에 응답합니다.
그런 다음 다른 함수는 임의의 숫자를 보내고 임의의 간격이 통과 한 후에 자체를 호출합니다.
수신 데이터는 메시지 이벤트 핸들러를 트리거합니다. 여기서 데이터 : 이벤트 객체의 .Data 속성에서 사용 가능한 문자열 : .
중요한 팁
fechet ()처럼 브라우저는 표준 HTTP 요청을 발행하므로 CSP, CORS를 처리해야하며 쿠키를 보내기 위해 EventSource 생성자에게 두 번째
매개 변수를 전달할 수있는 옵션이 필요할 수 있습니다.
서버는 데이터를 보내려면 각 연결된 사용자에 대해 별도의 RES 응답 객체를 유지해야합니다. 이것은 위 코드에서 다음 호출의 폐쇄로 값을 전달하여 달성됩니다.
메시지 데이터는 형식 데이터로만 문자열 일 수 있습니다. 캐리지 리턴을 종료하는 것이 중요합니다.
import http from "node:http";
import url from "node:url";
로그인 후 복사
로그인 후 복사
<<>
서버는 res.end ()를 사용하여 언제든지 SSE 응답을 종료 할 수 있지만 ...
연결이 중단되면 브라우저는 자동으로 다시 연결하려고합니다.
const port = 8000;
http.createServer(async (req, res) => {
// 获取 URI 路径
const uri = url.parse(req.url).pathname;
// 返回响应
switch (uri) {
case "/random":
sseStart(res);
sseRandom(res);
break;
}
}).listen(port);
console.log(`server running: http://localhost:${port}\n\n`);
로그인 후 복사
<<> 고급 서버는 이벤트를 보냅니다 SSE는 위에 표시된 것보다 더 많은 코드가 필요하지 않지만 다음 섹션에서는 다른 옵션에 대해 설명합니다.
단일 및 다중 SSE 채널 <🎜 🎜>
서버는 모든 SSE 채널 URL을 제공 할 수 있습니다. 예를 들면 :
/최신/뉴스 <🎜
/최신/날씨 <🎜 🎜>
/최신/스톡 프라이스 <🎜 🎜>
단일 페이지에 주제가 표시되면 실용적 일 수 있지만 단일 페이지에 뉴스, 날씨 및 주가가 표시되는 경우에는 그렇지 않습니다. 이 경우 서버는 각 사용자에 대해 세 가지 연결을 유지해야하므로 트래픽이 증가함에 따라 메모리 문제가 발생할 수 있습니다.
다른 옵션은 하나의 통신 채널에서 데이터 유형을 보내는 /lickes와 같은 단일 엔드 포인트 URL을 제공하는 것입니다. 브라우저는 /lick? type = news, 날씨, 스톡 프라이스와 같은 URL 쿼리 문자열에 관심있는 주제를 표시하여 서버가 SSE 응답을 특정 메시지로 제한 할 수 있습니다.
단일 채널에서 다른 데이터를 보냅니다
서버의 메시지는 특정 유형의 정보를 식별하기 위해 <🎜 🎜> 라인 위에 전달되는 연관
를 가질 수 있습니다.
이들은 클라이언트의 "메시지"이벤트 핸들러를 트리거하지 않습니다. 각 유형의 이벤트에 대해 핸들러를 추가해야합니다. 예를 들면 :
데이터 식별자 사용 서버는 <🎜
라인 <🎜 🎜> : <🎜 🎜> 이후에 보내도록 선택할 수 있습니다.
연결이 연결이 끊어지면 브라우저는 마지막 ID를 마지막 이벤트 ID HTTP 헤더에서 서버로 다시 보내 서 서버가 누락 된 메시지를 재판매 할 수 있도록합니다.
최신 ID는 클라이언트의 이벤트 객체의 .lasteventID 속성에서도 사용할 수 있습니다.
리트리 지연을 지정하십시오
재 연결은 자동이지만 서버는 특정 기간 동안 새 데이터가 필요하지 않다는 것을 알 수 있으므로 활성 통신 채널을 유지할 필요가 없습니다. 서버는 밀리 초 값을 포함하는 최종 메시지의 일부 또는 최종 메시지의 일부로 응답을 보낼 수 있습니다. 예를 들면 :
를 수신 한 후 브라우저는 지연 시간이 통과 된 후 SSE 연결을 포기하고 다시 연결하려고 시도합니다.
기타 이벤트 핸들러
"메시지"및 명명 된 이벤트 외에도 클라이언트 JavaScript에서 "Open"및 "Error"핸들러를 만들 수도 있습니다.
서버 연결이 설정되면 "오픈"이벤트가 트리거됩니다. 다른 구성 코드를 실행하거나 DOM 요소를 초기화하는 데 사용될 수 있습니다.
서버 연결에 실패하거나 종료되면 "오류"이벤트가 트리거됩니다. 이벤트 객체의 .eventPhase 속성을 확인하여 무슨 일이 일어나고 있는지 확인할 수 있습니다.
event: 다시 연결할 필요가 없음을 기억하십시오. data: 자동으로 발생합니다.
SSE 통신 종료 <🎜
import http from "node:http";
import url from "node:url";
로그인 후 복사
로그인 후 복사
브라우저는 이벤트 소스 객체의 .close () 메소드를 사용하여 SSE 통신을 종료 할 수 있습니다. 예를 들면 :
서버는 다음과 같이 연결을 종료 할 수 있습니다
<..> 트리거 res.end () 또는
지연을 보낸 다음 를 보내십시오
동일한 브라우저가 다시 연결하려고 할 때 HTTP 상태 204를 반환합니다. retry:
새로운 이벤트 소스 객체를 생성하여 브라우저 만 연결을 다시 설정할 수 있습니다.
결론
서버 측 이벤트는 실시간 페이지 업데이트를 구현할 수있는 방법을 제공하며, 이는 Fetch ()-기반 Ajax 폴링보다 쉽고 실용적이며 가벼울 수 있습니다. 복잡성은 서버 측에 있습니다. 당신은 :
모든 사용자의 활성 연결을 메모리에 유지하십시오
변경이 발생하면 데이터 전송을 트리거합니다.
그러나 이것은 완전히 통제하에 있으며 확장은 다른 웹 애플리케이션보다 더 복잡하지 않아야합니다. 유일한 단점은 SSE를 사용하여 브라우저에서 서버로 메시지를 보낼 수 없다는 것입니다 (초기 연결 요청 제외). Ajax를 사용할 수 있지만 액션 게임과 같은 응용 프로그램에는 너무 느립니다. 적절한 양방향 통신하려면 WebSockets가 필요합니다. 자세한 내용은 node.js에서 websockets를 사용하여 라이브 응용 프로그램을 만드는 방법을 참조하십시오!
위 내용은 node.js에서 서버에 대한 이벤트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
