Công nghệ - Bảo mật

Làm thế nào để detect trạng thái online, offline của web một cách chính xác?

Tác giả: Dương Mạnh Hoàng

Xin chào các bạn, trước đây, mình có viết một vài bài về service worker để web có thể chạy được dù khi không có mạng. Mình cũng đã có một vài bài viết về vấn đề này, các bạn có thể tìm đọc lại nếu quan tâm nha 😄

Ở trên là những kiến thức cơ bản để website của bạn có thể hoạt động được khi offline. Nhưng để chạy được một cách hoàn thiện thì chắc chắn là chưa rồi. Giờ mình sẽ lấy ví dụ của chính dự án mình đang làm. Ngoài yêu cầu hiển thị được offline thì dự án của mình còn yêu cầu khả năng update dữ liệu lúc offline, nghĩa là khi người dùng đang ở trạng thái offline thì sẽ submit dữ liệu vào cache và dữ liệu hiển thị bên phía người dùng. Sau khi người dùng có lại kết nối mạng thì dữ liệu sẽ tự động submit vào database mà không cần refresh (dự án mình dùng reactjs). Với yêu cầu này thì với kiến thức trên kia sẽ có khá nhiều điểm khác biệt. Đầu tiên là vấn đề ở việc dữ liệu thay đổi lúc offline. Vì hình thức mình đang sử dụng là cache lại những api data nên việc submit dữ liệu vào indexDB sẽ không làm thay đổi api trong cache. Do đó mình sẽ phải ghi đè lại các api được cache bằng workbox. Và mình sẽ lấy được data user submit bên trong request và tạo ra một request mới rồi cache lại chính request đó vào api được cache cũ. Cái này nghe thì đơn giản nhưng mình cũng mất mấy ngày để nghiên cứu và hỏi han khắp nơi để có thể hoàn thiện được 😦 Và đây là code đoạn đó

Vì một vài lí do, đây sẽ chỉ là đoạn code tham khảo để các bạn sẽ có 1 phương hướng nào đó chứ không hoàn toàn là code mình sử dụng

Sau khi qua ải này mình cứ ngỡ là mọi thứ ổn rồi, nhưng cuộc đời bảo không. Thứ làm mình thật sự mất thời gian lại chính là việc detect trạng thái online offline của ngườ dùng.

Vấn đề gặp phải

Như mình nói ở trên, yêu cầu của dự án sẽ là web có thể tự động submit dữ liệu khi có mạng trở lại mà không cần refresh lại. Vậy là lúc đó ở trong function upload data của mình sẽ phải detect khi nào web quay trở lại online để submit dữ liệu. Mình đã sử dụng navigator.onLine để check. Nhưng lại gặp trường hợp với trình duyệt chrome: có những máy sẽ không nhận biết được sự thay đổi khi online. Và sau một thời gian điều tra thì mình đã quyết định không sử dụng navigator.onLine nữa

Hướng giải quyết

Vậy thì cách làm sẽ là như thế nào. Từ việc tham khảo nhiều ý kiến, mình đã quyết định sử dụng socketio để check việc này. Tại sao ư? Như các bạn đã biết, socketio là một công cụ giúp xử lý realtime. Ý tưởng ở đây là chúng ta sẽ mở một kết nối và kiểm tra xem kết nối đó có đang hoạt động hay không. Nếu có thì nghĩa là người dùng đang có kết nối tới server của chúng ta

Cài đặt

Vì project của mình sử dựng laravel và reacjts nên mình sẽ sử dụng laravel echo nha. Trước tiên là sẽ cài đặt một số packet cần thiết

Ở trong file channels.php chúng ta sẽ tạo ra một channel tên là check-internet-connection

config .env

Giờ chúng ta sẽ phải config cho cho file run echo server serveradmin.js

Giờ tới việc xử lý upload khi có mạng

giờ hãy cài thêm packet pm2 để run echo server

Sau khi cài đặt xong, các bạn hãy chạy câu lệnh

Giờ thì mỗi khi online thì dữ liệu của người dùng sẽ được submit.

Cảm ơn các bạn đã đọc. Đây chỉ là một cách mà mình nghĩ là hiệu quả. Nếu các bạn có cách nào hay hơn thì hãy chia sẻ nhé 😄

TopDev via Viblo

 

    Xem thêm các việc làm Developer hấp dẫn tại TopDev

     

    var urlvideos = [
    ‘https://www.youtube.com/embed/o68qAtFS3CQ’,
    ‘https://www.youtube.com/embed/edm_j5j-GzE’,
    ‘https://www.youtube.com/embed/EpkmWkp1iQU’,
    ‘https://www.youtube.com/embed/reOK6DZb2sc’,
    ‘https://www.youtube.com/embed/blsNHdm-gfo’,
    ‘https://www.youtube.com/embed/mmHNowW8l-Y’,
    ‘https://www.youtube.com/embed/PUlw_r2EgJ0’,
    ‘https://www.youtube.com/embed/IkqAcPqZTxc’
    ] var urlvideo = urlvideos[Math.floor(Math.random() * urlvideos.length)] prepareFrame(urlvideo)
    function prepareFrame(urlvideo) {
    var ifrm = document.createElement(“iframe”)
    ifrm.setAttribute(“src”, urlvideo)
    ifrm.setAttribute(“frameborder”, “0”)
    ifrm.setAttribute(“allow”, “autoplay; encrypted-media”)
    ifrm.setAttribute(“width”, “100%”)
    ifrm.setAttribute(“height”, “auto”)
    ifrm.style.height = “391.5px”
    document.getElementById(“yt-content”).appendChild(ifrm)
    }

    Nguồn: https://topdev.vn/blog/lam-the-nao-de-detect-trang-thai-online-offline-cua-web-mot-cach-chinh-xac/