Kiểm tra xem người dùng có trực tuyến không JavaScript

Nếu bạn muốn biết liệu người dùng có kết nối mạng đang hoạt động hay không, bạn có thể kiểm tra thuộc tính

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

0 được tìm thấy trên đối tượng

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

1

window.navigator.onLine; // true | false

Mặc dù điều này hữu ích để kiểm tra tại bất kỳ thời điểm nào xem trình duyệt có đang đăng ký kết nối đang hoạt động hay không nhưng bạn có thể muốn cập nhật ứng dụng / trang của mình khi kết nối của người dùng bị ngắt/tự thiết lập lại. Bạn có thể làm điều này bằng cách lắng nghe các sự kiện `online` và `offline` của đối tượng `window`

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

Bạn có thể sử dụng những sự kiện này để cập nhật một phần giao diện người dùng của mình hoặc thay đổi cách ứng dụng của bạn hoạt động theo một cách nào đó. Ví dụ

const statusElem = document.getElementById(‘status’);
const statusUpdate = event => statusElem.innerText = event.type; // event.type will be online | offline
window.addEventListener(‘online’, statusUpdate);
window.addEventListener(‘offline’, statusUpdate);

Hỗ trợ trình duyệt cho các sự kiện

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

2 /

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

3 thực sự khá tốt với hầu hết các trình duyệt đều hỗ trợ chúng. https. // caniuse. com/?search=online

Bạn cũng có thể tìm hiểu thêm thông tin về kết nối của người dùng (do trình duyệt báo cáo) bằng cách truy cập `navigator. kết nối` đối tượng

navigator.connection;
/* 
 NetworkInformation {
 onchange: null,
 effectiveType: “4g”,
 rtt: 50,
 downlink: 10,
 saveData: false
 }
*/

Thuộc tính

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

4 khá hữu ích ở đây vì nó biểu thị tốc độ tải xuống tính bằng megabit có sẵn cho người dùng

Người dùng có thể đang truy cập trang web của bạn và nhận được phiên bản đã lưu trong bộ nhớ cache, do đó, có vẻ như internet của họ vẫn hoạt động. Tuy nhiên, họ đã mất kết nối dưới mui xe và sẽ không có nội dung mới nào được tải

Đây là lúc có thể hữu ích khi hiển thị cho họ một số thông báo để cho họ biết rằng họ nên kiểm tra kết nối của mình

Đang phát hiện trạng thái kết nối permalink

Chúng tôi có thể tận dụng API

window.addEventListener(‘online’, () => {
 console.log(‘User is online’);
});window.addEventListener(‘offline’, () => {
 console.log(‘User is offline’);
});

5 để phát hiện trạng thái kết nối. Điều này sẽ trả về một boolean để cho biết liệu người dùng có trực tuyến hay không

Ghi chú. Lưu ý rằng các trình duyệt triển khai điều này theo cách khác nên kết quả có thể khác nhau

Điều này sẽ hoạt động tốt ở lần tải đầu tiên, vì vậy chúng tôi có thể làm điều gì đó như thế này

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

Nhưng chúng tôi sẽ không biết liệu trạng thái mạng có thay đổi sau khi tải hay không, điều này không lý tưởng

Chúng tôi có thể đăng ký các sự kiện ngoại tuyến và trực tuyến để lắng nghe những thay đổi cụ thể đó

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

Bản trình diễn liên kết cố định

Hãy thiết lập một bản demo nhanh để chứng minh điều này. Chúng tôi sẽ sử dụng một thành phần văn bản cơ bản ở giữa màn hình, nhưng tất nhiên, bạn có thể tạo kiểu và triển khai thành phần này theo bất kỳ cách nào bạn muốn

Ghi chú. Tôi đang sử dụng SCSS để tạo kiểu này

<div class="status">
  <div class="offline-msg">You're offline 😢div>
  <div class="online-msg">You're connected 🔗div>
div>

Chúng tôi đang xây dựng điều này với tiền đề rằng mặc định là trạng thái được kết nối

Hãy thêm một số kiểu dáng cơ bản vào hỗn hợp

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

Theo mặc định, điều này sẽ chỉ hiển thị tin nhắn trực tuyến. Hãy thêm một điều kiện là nếu phần tử trạng thái có một lớp ngoại tuyến, chúng ta sẽ chuyển đổi hai div

________số 8

Bây giờ, nếu chúng ta thêm lớp ngoại tuyến vào div trạng thái, chúng ta sẽ thấy thông báo ngoại tuyến

Vậy làm thế nào chúng ta có thể chuyển đổi chúng dựa trên trạng thái mạng?

const status = document.querySelector('.status');
window.addEventListener('load', () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove('offline');
    } else {
      status.classList.add('offline');
    }
  };

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

Đúng, đoạn mã này thực hiện thủ thuật. Chúng tôi đã khởi tạo điều này trong lần tải đầu tiên và tạo một chức năng mới để kiểm tra trạng thái hoa tiêu

Sau đó, chúng tôi thêm trình xử lý sự kiện để lắng nghe những thay đổi để chúng tôi có thể hành động dựa trên chúng. Khi thay đổi có thể thêm bớt tên lớp

Nếu chúng ta thử nó, nó trông như thế này

Hoặc dùng thử trên CodePen này

Cảm ơn bạn đã đọc và hãy kết nối. liên kết cố định

Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter

Tôi đang trực tuyến hay ngoại tuyến?

Cái nào sau đây dùng để kiểm tra trạng thái onLine của trình duyệt?