Check connect internet giống Facebook sử dụng Javascript

Khái quát

Khi truy cập vào các trang web như Facebook hay Zalo hẳn các bạn đã từng thấy chức năng này, đó là khi các bạn đột ngột mất kết nối internet thì ngay lập tức các trang web này sẽ hiện lên một thông báo để yêu cầu bạn kiểm tra kết nối và thử kết nối lại, củng như ngược lại thông báo khi bạn đã kết nối lại internet thành công và có thể tiếp tục trải nghiệm trên trang web.

Check connect internet trong lập trình web sử dụng ngôn ngữ javascript để lắng nghe sự kiện mất kết nối và kết nối thành công internet. Từ đó thông báo đến người dùng để nâng cao trải nghiệm của họ.

Xây dựng chức năng Check connect internet giống Facebook sử dụng Javascript

Tạo khung hình

Ở Html, trước tiên ta cần tạo ra hai hộp class alert dùng để chứa nội dung thông báo, một hộp chứa thông báo lỗi và một hộp dùng để chứa thông báo kết nối connect internet lại thành công.

Để tạo điểm nhấn đẹp hơn cho các hộp thông báo ta sẽ sử dụng nhưng icon awesome. Để sử dụng được icon fontawesome đầu tiên ta sẽ nhúng đoạn code này vào bên trong phần head của trang web file HTML.

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

Sau đó truy cập vào trang chủ fontasome để tìm những icon mà mình muốn. Đoạn code alert tạo form cho phần thông báo lỗi check connect internet giống Facebook sử dụng Javascript sẽ trông như sau:

 
    <div class="alert" id="error">
        <i class="fa-solid fa-wifi icon"></i>
        <div class="content">
            <div class="title">
                Wifi disconnect!
            </div>
            <div class="des">
                Please check your connection
            </div>
        </div>
        <i class="fa-solid fa-x close"></i>
    </div>

Tiếp đến là đoạn code tạo form cho phần hộp thông báo thành công kết nối lại trong check connect internet giống Facebook sử dụng Javascript:

 
    <div class="alert" id="success">
        <i class="fa-solid fa-wifi icon"></i>
        <div class="content">
            <div class="title">
                Wifi connected!
            </div>
            <div class="des">
                Successfully connected
            </div>
        </div>
        <i class="fa-solid fa-x close"></i>
    </div>

Để có thể tạo hình củng như xác định vị trí cố định trên màn hình cho hộp thống báo, ở CSS mình sẽ sử dụng thuộc tính position fixed để căn chỉnh vị trí bottom và right của class ngoài ra với hộp thông báo màu kết nối thành công mình sẽ dùng màu xanh và hộp thông báo kết nối thất bại mình sẽ dùng nền màu đỏ để tạo ra sự tương phản.

 
    body{
        background-color: #DCDCDA;
    }
    .alert{
        position: fixed;
        bottom:20px;
        right:20px;
        width:300px;
        background-color: #CE647C;
        color:#fff;
        font-family: system-ui;
        padding:10px;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 40px auto 30px;
        animation: showAlert 0.5s ease-in-out 1;
        display: none;
    }
    .alert .title{
        font-weight: bold;
    }
    .alert .des{
        font-size: small;
    }
    .alert .icon,
    .alert .close{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    @keyframes showAlert{
        from{
            opacity: 0;
            transform: translate(0, 100px);
        }to{
            opacity: 1;
            transform: translate(0,0);
        }
    }
    #success{
        background-color: #31AF8C;
    }

Đừng quên ẩn hết các class alert đi vì mặc định chúng sẽ chỉ hiện lên khi sảy ra một sự kiện gì đó cụ thể hơn ở đây là sự kiện check connect internet giống Facebook sử dụng Javascript.

Chức năng tắt thông báo khi click vào nút close

Với mỗi hộp thông báo bên phải đều chứa một icon close có hình dạng chử X. Nhiệm vụ của chúng ta là khi người dùng thấy thông báo bật lên có thể dể dàng click vào để tắt hộp thông báo này đi.

Đoạn code Javascript cho chức năng tắt thông báo khi check connect internet giống Facebook sử dụng Javascript như sau:

 
    let alerts = document.querySelectorAll('.alert');
    alerts.forEach(item=>{
        item.addEventListener('click', function(event){
            if(event.target.classList.contains('close')){
                item.style.display = 'none';
            }
        })
    })

Đầu tiên ta sẽ sữ dụng querySelectorAll để lấy toàn bộ danh sách các hộp thông báo alert, sau đó dùng nó tiến hành chạy một vòng lặp để liệt kê hết toàn bộ từng hộp thông báo trong check connect internet giống Facebook sử dụng Javascript.

Cứ mỗi hộp thông báo ta lại tiến hành sử dụng addEventListener để lắng nghe sự kiện và sự kiện cần được lắng nghe ở đây đó là sự kiện người dùng click chuột vào hộp thông báo.

Tuy nhiên ở đây chúng ta cần kiểm tra xem người dùng vừa click vào phần nào của hộp thông báo. Bởi vì chúng ta chỉ ẩn thông báo đi nếu người dùng click vào nút close thôi còn những vị trí khác thì không. Với event.target chính là vị trí phần tử mà người dùng vừa click. Để thao tác với class ta cần sử dụng classList với contains('close') dùng để kiểm tra xem vị trí người dùng click có phải class close không. Nếu phải tiến hành ẩn hộp thông báo đó đi với display none.

Chức năng check mất kết nối trong check connect internet giống Facebook sử dụng Javascript

Để kiểm tra hệ thống bị mất kết nối với internet ta chỉ cần lắng nghe sự kiện offline của hệ thống. Đây là sự kiện ngắt kết nối đột ngột của hệ thống mà javascript có thể bắt được. Và khi bắt được sự kiện này tiến hành hiện thông báo lỗi lên.

 
    window.addEventListener('offline', function(){
        document.getElementById('success').style.display = 'none';
        document.getElementById('error').style.display = 'grid';
    })

Chức năng check kết nối lại thành công trong check connect internet giống Facebook sử dụng Javascript

Để kiểm tra hệ thống kết nối thành công lại với internet ta chỉ cần lắng nghe sự kiện online, ngược lại với offline. Đây là sự kiện lắng nghe kết nối lại thành công của hệ thống mà javascript có thể bắt được. Và khi bắt được sự kiện này tiến hành hiện thông báo kết nối lại thành công lên và mời người dùng tiếp tục trải nghiệm website của mình.

 
    window.addEventListener('online', function(){
        document.getElementById('error').style.display = 'none';
        document.getElementById('success').style.display ='grid';
    });

Video hướng dẩn chi tiết Check connect internet giống Facebook sử dụng Javascript

Xem nhiều hơn tại kênh youtube Lùn Dev