양방향 통신 SSE

소개

HTTP 프로토콜을 기반으로 한 클라이언트가 서버에서 흐름을 구독하면 서버나 클라이언트가 이 흐름을 닫을 때까지 클라이언트에게 메시지를 보낼 수 있습니다

특징

브라우저와 서버 간의 통신 채널을 구축하고 서버가 브라우저에 정보를 전송한다

SSE는 단방향 채널로 서버만 브라우저에 보낼 수 있다. 왜냐하면 흐르는 정보는 본질적으로 다운로드이기 때문이다

기존 서버 소프트웨어가 지원하는 HTTP 프로토콜을 사용합니다.WebSocket은 독립적인 프로토콜입니다.

경량급에 속하며 사용이 간단하고 호환성이 양호하다

클라이언트

let eventSource = new EventSource('/clock'); // url , 
let clock = document.querySelector("#clock");
//  
source.onopen = function (event) {
  // ...
};
//  
eventSource.onmessage = (e) => {
    let message = e.data;
    clock.innerHTML = message;

}
//  
eventSource.onerror  = function(err){
    console.log(err);
}
//  
eventSource.close();
//  
eventSource.addEventListener('foo', function (e) {
  var data = e.data;
  
}, false);

서버 측

이벤트 흐름에 대응하는 MIME 형식은 text/event-stream이고 HTTP 기반 긴 연결입니다.HTTP1.1 규범은 기본적으로 긴 연결을 사용하며, HTTP1.0의 서버에 대해서는 특별한 설정이 필요합니다

이벤트 소스는utf-8 형식으로 인코딩해야 합니다

매번 발송되는 정보는 몇 개의 메시지로 구성되어 있으며, 각각의 메시지 사이를 구분한다.모든 메시지 내부는 몇 개의 필드로 구성되어 있으며, 모든 필드는 다음과 같은 형식입니다

[field]: value

field는 다음 4가지 규범에 의해 정의된 필드를 사용해야 합니다.

Event:  
Data:  
ID:  ID
Retry：  ， ， ID 

사용 예:

app.get('/clock', (req, res) => {
    res.header('Content-Type', 'text/event-stream'); //  
    let timer = setInterval(() => {
        res.write(`id:${counter++}
event:message
data:${new Date().toLocaleDateString()}

`);
    }, 1000);
    res.on('close', () => {
        clearInterval(timer);
    })
});

ssestreampassthrough 일종의 변환 흐름

app.get('/clock', (req, res) => {
    const sseStream = new SseStream(req);
    sseStream.pipe(res);
    const pusher = setInterval(() => {
        sseStream.write({
            id: counter++,
            event: 'message',
            retry: 20000, //  , ,20 
            data: new Date().toLocaleDateString()
        });
    }, 1000); 
    res.on('close', () => {
      clearInterval(pusher);
      sseStream.unpipe(res);
    })
    
});

다음으로 전송:https://juejin.im/post/5cd120fff265da03775c667b