투케이2K

110. (Http/Api) [간단 소스] fetch api (페치) 사용해 자바스크립트 network ping rtt 측정 수행 본문

Http & Api

110. (Http/Api) [간단 소스] fetch api (페치) 사용해 자바스크립트 network ping rtt 측정 수행

투케이2K 2026. 9. 18. 20:14
728x90
반응형

[개발 환경 설정]

​

구 분 : 투케이2K / 개발 / IT / 컴퓨터 / 개발자

​

개발 툴 : Edit++ / VsCode

​

개발 기술 : Http / API

​

제 목 : [간단 소스] fetch api (페치) 사용해 자바스크립트 network ping rtt 측정 수행

​

 

[소스 코드]

​

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript / 자바스크립트


- 개발 툴 : Edit ++ / VsCode


- 구분 : HTTP / API


- 사전) 👉 Fetch API 간단 설명 :

  >> Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.

  >> Fetch API 는 브라우저에서 비동기 HTTP 요청을 수행할 수 있습니다.

    - 데이터를 서버에 요청(request) 하고 응답(response)을 받아 처리할 때 사용합니다.

  >> Fetch API 핵심 기능 : 

    - Promise 기반 : 비동기 처리가 쉽고 .then(), .catch() 또는 async/await로 직관적으로 코드를 작성할 수 있습니다.
    - JSON 처리 간편 : response.json()만 호출하면 비동기로 JSON 데이터 파싱 가능
    - 다양한 옵션 제공 : HTTP 메서드 (GET, POST, PUT, DELETE 등) , 헤더 설정 , 요청 바디(JSON, FormData 등) , CORS 설정 , 인증 토큰 추가
    - 스트림 기반 처리 지원 : 대용량 다운로드에도 효율적


- 사전) 👉 navigator.connection 간략 설명 : 

  >> navigator.connection 는 브라우저가 사용자의 네트워크 품질에 대한 힌트를 제공해, 앱이 적응형(Adaptive) 으로 동작하도록 돕는 API 입니다

  >> navigator.connection 는 사용자의 현재 네트워크 품질을 대략적으로 추정해서 알려줍니다.

    - effectiveType : 네트워크 품질을 4단계로 분류한 문자열 → "slow-2g" | "2g" | "3g" | "4g"
    - downlink : 추정 다운로드 대역폭 (Mbps)
    - rtt : 추정 왕복 지연시간 (ms)
    - saveData : 데이터 절약 모드 (저대역폭 모드) 여부 (true/false)
    - type : (제한적 지원) 실제 전송 기술 힌트 (예: "wifi", "cellular", "ethernet" 등). 많은 브라우저에서 제공하지 않음

  >> ⚠️ navigator.connection 값들은 “추정치/힌트” 로 인터넷 연결 여부(외부망 도달 가능) 를 보장하지 않습니다.

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    

        // -----------------------------------------------------------------
        // ✅ [전역 변수 생성]
        // -----------------------------------------------------------------
        const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // [커스텀 슬립 함수] : await sleep(3000); // 3초 대기 후 -> 수행




        // -----------------------------------------------------------------
        // ✅ [Window.onload 웹 브라우저 로드 완료]
        // -----------------------------------------------------------------
        window.onload = function() {
            console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

            try {

                // -----------------------------------------
                // [동기 순차 처리 async 함수 생성]
                // -----------------------------------------
                (async () => {

                    // -----------------------------------------
                    // 🟦 [navigator.onLine 간략 설명 정리]
                    // -----------------------------------------
                    /*
                    1. navigator.onLine 는 웹 브라우저가 현재 인터넷에 연결되어 있는지 알려주는 자바스크립트 속성입니다.

                    2. navigator.onLine 는 인터넷에 연결되어있으면 true , 끊어져 있으면 false 를 반환합니다.

                    3. 참고 사항 : 

                      >> 값이 true라고 해서 실제 인터넷 서버와 통신이 잘 되고 있다는 뜻은 아닙니다.

                      >> 단지 컴퓨터가 네트워크(Wi-Fi나 랜선 등)에 연결된 상태인지만 확인합니다.

                    4. 참고 사이트 : https://blog.naver.com/kkh0977/223902534905?trackingCode=blog_bloghome_searchlist
                    */
                    // -----------------------------------------


                    // -----------------------------------------
                    // 🟦 [브라우저 인터넷 연결 상태 체크]
                    // -----------------------------------------
                    const onLine = navigator.onLine;
                    
                    if (onLine) {
                        console.log('onLine Check Success : 인터넷 연결 상태 확인 완료');


                        // -----------------------------------------
                        // 🟦 [출력 되는 로그 예시] 
                        // -----------------------------------------

                        /*
                        onLine Check Success : 인터넷 연결 상태 확인 완료
                        Ping Test : 1
                        Ping Test : 2
                        Ping Test : 3
                        Ping Test : 4
                        Ping Test : 5
                        [{"count":1,"success":true,"rtt":170},{"count":2,"success":true,"rtt":31.5},{"count":3,"success":true,"rtt":24.4},{"count":4,"success":true,"rtt":37.9},{"count":5,"success":true,"rtt":24.4}]
                        */
                        // -----------------------------------------


                        const ping_Cnt = 5; // 핑 측정 횟수

                        //const ping_Url = "https://code.jquery.com/jquery-latest.min.js"; // 핑 측정 주소                        
                        const ping_Url = "https://www.amazon.com/favicon.ico";
                        //const ping_Url = "https://www.microsoft.com/favicon.ico";
                        //const ping_Url = "https://www.apple.com/favicon.ico";

                        const results = [];

                        for (let i = 1; i <= ping_Cnt; i++) {

                            console.log(`Ping Test : ${i}`);

                            const timeoutMs = 3000; // 3 초 타임 아웃
                            const controller = new AbortController();
                            const timer = setTimeout(() => controller.abort(), timeoutMs);

                            try {

                                const start = performance.now(); // 👉 ping 시작 

                                const res = await fetch(ping_Url, {
                                    method: "GET",
                                    signal: controller.signal,
                                    cache: "no-store",
                                });

                                const end = performance.now(); // 👉 ping 종료

                                clearTimeout(timer);

                                if (!res.ok) {
                                    results.push({
                                        count: i,
                                        success: false,
                                        status: res.status
                                    });
                                }
                                else {
                                    results.push({
                                        count: i,
                                        success: true,
                                        rtt: +(end - start).toFixed(2)
                                    });
                                }

                            }
                            catch (error) {

                                clearTimeout(timer);

                                results.push({
                                    count: i,
                                    success: false,
                                    error: error.name
                                });
                            }

                            await sleep(1000); // 👉 1초 대기 후 호출

                        }

                        console.log(JSON.stringify(results));

                        console.table(results); // 테이블 로그 출력
                        
                    } else {
                        console.error('onLine Check Error : 현재 인터넷 연결 상태가 아닙니다.');
                    }

                })();

            }
            catch (exception) {
                console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
            }

        }; 
      
    </script>


</head>


<body>
    
</body>

</html>

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [간단 소스] callback 콜백 방식 사용해 fetch api (페치) API 호출 및 결과 확인 수행

https://kkh0977.tistory.com/8786

https://blog.naver.com/kkh0977/224262801929


▶️ [fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행]

https://kkh0977.tistory.com/8653

https://blog.naver.com/kkh0977/224198939582


▶️ [자바스크립트 navigator.onLine 사용해 현재 연결 된 네트워크 온라인 및 오프라인 상태 확인]

https://kkh0977.tistory.com/8064

https://blog.naver.com/kkh0977/223902534905?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 async await 동기 방식 http 요청 및 response header 및 body 확인 실시]

https://kkh0977.tistory.com/3514

https://blog.naver.com/kkh0977/222952720427?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http post body json 방식 요청 수행 실시]

https://kkh0977.tistory.com/3513

https://blog.naver.com/kkh0977/222952665953?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http get 방식 요청 수행 실시]

https://kkh0977.tistory.com/3510

https://blog.naver.com/kkh0977/222951679283?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'Http & Api' 카테고리의 다른 글

109. (Http/Api) [간단 소스] XMLHttpRequest 호출 시 timeout 타임 아웃 설정해 지정 된 시간이 지나면 브라우저 요청 자동 취소 이벤트 감지  (0) 2026.08.06
108. (Http/Api) [간단 소스] XMLHttpRequest 사용해 get 방식 파일 다운로드 및 프로그레스 상태 확인 - file download progress  (0) 2026.08.03
107. (Http/Api) [간단 소스] fetch api (페치) 사용해 get 방식 파일 다운로드 및 프로그레스 상태 확인 - file download progress  (0) 2026.08.03
106. (Http/Beacon) Beacon API (비콘 API) sendBeacon 사용해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 수행  (0) 2026.07.21
105. (Http/fetch) fetch api (페치) 요청 시 keepalive 옵션 지정해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 보장 설정  (0) 2026.07.21
'Http & Api' Related Articles more
Comments