Web APIs

                                    
                                        const btn= document.querySelector('.push_btn')
                                        btn.addEventListener('click', notify)

                                        function notify() { // 푸시 알림은 먼저 브라우저의 허가를 물어야 한다!
                                            switch(Notification.permission) { // 푸시 알림 상태값 확인
                                                case 'default': Notification.requestPermission(); // 알림표시 허가 요청
                                                case 'granted': new Notification('안녕?'); break; // 알림표시 내용
                                                case 'denied': alert('알림이 거부됨!'); break; // 알림 거부
                                            }
                                        }
                                    
                                

☞ 이 기능은 Web Worker에서 사용할 수 있고, 모든 지원 브라우저의 보안 컨텍스트(HTTPS)에서 사용할 수 있다!

                                    
                                        Notification.requestPermission().then(function (result) {
                                            console.log(result)
                                        });
                                    
                                

                                    
                                        // 알림 내용 설정
                                        let img= "/to-do-notifications/img/icon-128.png"
                                        let text= `아! ${title} 작업 기한이 만료됐습니다 ㅡㅡ;`
                                        let notification= new Notification("할일 목록", { body: text, icon: img });

                                        // 알림 닫기 설정 ← 단, 대다수 브라우저에서는 약 4초 후에 자동으로 닫는다!
                                        setTimeout(notification.close.bind(notification), 4000);
                                    
                                

░ 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하고 있더라도 사용자에게 알릴 필요가 있는데, 이러한 웹 알림 메시지의 대표적인 사용 사례는 웹 기반 메일이나 Slack 같은 IRC 애플리케이션이다!

                                    
                                        fetch('big.json')
                                        .then(response => streamBody(response, reportProgress))
                                        .then(bodyText => JSON.parse(bodyText))
                                        .then(handleBigJSONObject);
                                    
                                

                                    
                                        /*** fetch() 요청으로 받은 응답 객체의 바디를 스트리밍하는 비동기 함수
                                        * streamBody 함수는 문자열로 해석되는 프라미스를 반환한다: 응답 객체를 첫번째 인자로 받고, 콜백 2개는 선택사항이다
                                        * reportProgress 콜백은 덩어리를 받을 때마다 호출된다: reportProgress(수신된 바이트의 합계, 다운로드 진척 정도)
                                        * processChunk 콜백은 데이터 덩어리를 받을 때마다 처리하는 함수
                                        --- */
                                        async function streamBody(response, reportProgress, processChunk) { // (응답객체, 콜백1, 콜백2)
                                            // 받아야되는 바이트 숫자
                                            let expectedBytes= parseInt(response.headers.get("Content-Length")) // Content-Length 헤더가 없으면; NaN
                                            let bytesRead= 0 // 지금까지 받은 바이트 숫자
                                            let reader= response.body.getReader() // 바이트를 읽는 함수
                                            let decoder= new TextDecoder("utf-8"); // 바이트를 텍스트로 변환한다
                                            let body= ""; // 지금까지 읽은 텍스트

                                            while(true) { // Loop until we exit below
                                                let {done, value}= await reader.read(); // 덩어리를 읽어들인다

                                                if(value) { // 바이트 배열을 받았다면;
                                                    if(processChunk) { // 콜백이 있으면;
                                                        let processed= processChunk(value) // 바이트를 처리한다
                                                        if(processed) {
                                                            body += processed
                                                        }
                                                    } else { // 콜백이 없으면;
                                                        body += decoder.decode(value, {stream: true}); // 바이트를 텍스트로 디코딩한다
                                                    }

                                                    if(reportProgress) { // 진행상태 콜백이 있으면;
                                                        bytesRead += value.length;
                                                        reportProgress(bytesRead, bytesRead / expectedBytes) // 호출해서 진행 상태를 표시한다
                                                    }
                                                }

                                                if(done) { // 마지막 덩어리라면;
                                                    break; 
                                                }
                                            }

                                            return body; // 병합한 바디 텍스트를 반환한다
                                        }
                                    
                                

                                    
                                        let ticker= new EventSource("stockprices.php")

                                        ticker.addEventListener("bid", (e) => { displayNewBid(e.data) });
                                    
                                

☞ 메시지 이벤트의 이벤트 객체에는 서버에서 응답으로 보낸 문자열이 data 프로퍼티에 담겨있고, type에는 이벤트의 이름이 저장되는데, 이 타입은 서버에서 결정한다 ← 이름을 생략하고 데이터만 보내면; 이벤트 타입의 기본값은 message 이다!

서버전송 이벤트 예)

➥ 서버전송 이벤트 프로토콜: 클라이언트가 EventSource 객체를 생성해 서버에 연결을 보내면 서버는 이 연결을 열어둔 채, 이벤트가 일어나면; 서버는 이 연결에 텍스트를 보내게 된다