양방향 통신 SSE

3329 단어

소개


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

    좋은 웹페이지 즐겨찾기