Video học lập trình mỗi ngày

Check user online hay offline như facebook với 1 dòng code javascript Online, Offline with JavaScript. Một thủ thuật Detecting Online/Offline nhỏ của facebook cũng đủ làm chúng ta hài lòng và cảm giác chúng ta được trân trọng. Nhìn vậy thôi chứ dễ lắm. Với việc sử dụng navigator.onLine chúng ta có thể làm được điều đó. 

Trong bài đăng này, chúng ta sẽ xem xét một cách siêu dễ dàng để kiểm tra xem người dùng có kết nối với Internet hay không và phát hiện xem họ có mất kết nối hoặc kết nối lại hay không để bạn có thể cập nhật giao diện người dùng của mình một cách thích hợp tùy thuộc vào trạng thái internet.

navigator.onLine API

navigator.onLine là một property duy trì giá trị true và false với (true for online, false for offline). Thuộc tính này được cập nhật bất cứ khi nào người dùng chuyển sang "Chế độ Ngoại tuyến". Đơn giản vậy thôi mà giúp chúng ta khối việc.

Example "online" and "offline" events

Việc của bạn chỉ sử dung addEventListener để đăng ký lắng nghe xoi mói các kiểu mà thôi. Đây là một trường hợp thủ nghiệm và code của nó được show dưới đây cho các bạn. Mỗi lập trình có thể thay đổi theo phong cách riêng. 

javascript

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

css

#status {
  position: fixed;
  width: 100%;
  font: bold 1em sans-serif;
  color: #FFF;
  padding: 0.5em;
}

#log {
  padding: 2.5em 0.5em 0.5em;
  font: 1em sans-serif;
}

.online {
  background: green;
}

.offline {
  background: red;
}

Test

Thử nghiệm tại đây, bây giờ thử tắt mạng xem sao....