코어 포인트
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 이벤트 스트림 헤더에 응답합니다.
그런 다음 다른 함수는 임의의 숫자를 보내고 임의의 간격이 통과 한 후에 자체를 호출합니다.
코드를 로컬로 실행하는 경우 터미널의 컬을 사용하여 응답을 테스트 할 수 있습니다.
ctrl
> 브라우저의 클라이언트 JavaScript는 EventSource 객체 생성자를 사용하여 /Random URI에 연결합니다 :
수신 데이터는 메시지 이벤트 핸들러를 트리거합니다. 여기서 데이터 : 이벤트 객체의 .Data 속성에서 사용 가능한 문자열 : .
중요한 팁
fechet ()처럼 브라우저는 표준 HTTP 요청을 발행하므로 CSP, CORS를 처리해야하며 쿠키를 보내기 위해 EventSource 생성자에게 두 번째
매개 변수를 전달할 수있는 옵션이 필요할 수 있습니다.
서버는 데이터를 보내려면 각 연결된 사용자에 대해 별도의 RES 응답 객체를 유지해야합니다. 이것은 위 코드에서 다음 호출의 폐쇄로 값을 전달하여 달성됩니다.
메시지 데이터는 형식 데이터로만 문자열 일 수 있습니다. 캐리지 리턴을 종료하는 것이 중요합니다. <code class="language-javascript">import http from "node:http";
import url from "node:url";</code>
서버는 res.end ()를 사용하여 언제든지 SSE 응답을 종료 할 수 있지만 ...
연결이 중단되면 브라우저는 자동으로 다시 연결하려고합니다.
<code class="language-javascript">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`);</code> 고급 서버는 이벤트를 보냅니다 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 통신 종료 <code class="language-javascript">import http from "node:http";
import url from "node:url";</code>
브라우저는 이벤트 소스 객체의 .close () 메소드를 사용하여 SSE 통신을 종료 할 수 있습니다. 예를 들면 :
서버는 다음과 같이 연결을 종료 할 수 있습니다
<..> 트리거 res.end () 또는 - 지연을 보낸 다음 를 보내십시오
동일한 브라우저가 다시 연결하려고 할 때 HTTP 상태 204를 반환합니다.
retry:
새로운 이벤트 소스 객체를 생성하여 브라우저 만 연결을 다시 설정할 수 있습니다. -
결론
서버 측 이벤트는 실시간 페이지 업데이트를 구현할 수있는 방법을 제공하며, 이는 Fetch ()-기반 Ajax 폴링보다 쉽고 실용적이며 가벼울 수 있습니다. 복잡성은 서버 측에 있습니다. 당신은 :
모든 사용자의 활성 연결을 메모리에 유지하십시오
변경이 발생하면 데이터 전송을 트리거합니다.
그러나 이것은 완전히 통제하에 있으며 확장은 다른 웹 애플리케이션보다 더 복잡하지 않아야합니다.
유일한 단점은 SSE를 사용하여 브라우저에서 서버로 메시지를 보낼 수 없다는 것입니다 (초기 연결 요청 제외). Ajax를 사용할 수 있지만 액션 게임과 같은 응용 프로그램에는 너무 느립니다. 적절한 양방향 통신하려면 WebSockets가 필요합니다. 자세한 내용은 node.js에서 websockets를 사용하여 라이브 응용 프로그램을 만드는 방법을 참조하십시오!
위 내용은 node.js에서 서버에 대한 이벤트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
