[Javascript] stream 활용하기

나는 그저 Queue 라는 것을 쓰고 싶었다.

선입선출이 필요했다.

알아보던 와중 알게된 것이 Javascript API중 Stream API였다.

 

Stream

• 배열이나 문자열과 같은 데이터 모음.
• 입출력 기기나 프로세스, 파일 등을 통일된 방식으로 데이터를 다루기 위한 가상의 개념.
• 데이터 처리 방법으로 입력된 값을 순차적으로 읽거나 출력하는데 사용됨

 

Stream API

• Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공함.
• 읽기(ReadableStream), 쓰기(WritableStream)가 가능함.

 

주로 파일 읽어올 때 아래 예시코드 이미지와 같이 fetch와 함께 사용한다.

작성된 예시 코드

예시 코드 실행 시 보여지는 화면

 

나는 Socket에서 받아오기에 바로 ReadableStream을 사용했다.

const readableFunc = (data) => {

    readable = new ReadableStream({
        start(controller) {
            controller.enqueue(data); // data 입력

            EndBtn.addEventListener('click', function(){ // EndBtn 클릭 시
                controller.close(); // 컨트롤러 종료
                ws.close(); // 소켓 연결 종료
            })
            
        },
        cancel() {
        }
    });
    
    let reader = readable.getReader(); // 리더 만들기

    reader.read().then(function process(res) {
        if(res.done) {
            console.log("Done");
            return;
        }
        printScreenFunc(e.data);
    })
    .catch(err => console.error(err));
}

 

참고 링크

1. Mdn - Stream API 개념과 사용법,  Readable stream 설명
2. Node.js의 스트림 이해하기
3. 스트림 장점 및 예시 코드
4. Node.js에서 이중 스트림 만들기

 

끝!