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’, [] => {0 được tìm thấy trên đối tượng
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
window.addEventListener[‘online’, [] => {1
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
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’, [] => {2 /
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
window.addEventListener[‘online’, [] => {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
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
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’, [] => {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
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
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’, [] => {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
console.log[‘User is online’];
}];window.addEventListener[‘offline’, [] => {
console.log[‘User is offline’];
}];
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
You're offline 😢
You're connected 🔗
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
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