How can I handle net::ERR_INTERNET_DISCONNECTED error in Net Core

Question

I'm playing a stream live radio mp3 media, but when the internet connection is disconnected, stream playing stops and never plays again even the internet connection is back.

I want to handle the connection and when the connection is disconnected, I need to show an alert with a message like 'your connection is disconnected, check and refresh the page' to the user.

How can I handle this with Javascript or C#?

Answer 1

Use the below snippet

1. Use chrome developer tools to put a browser on offline/online

window.addEventListener("offline", (event) => {
  const online = document.getElementById("online");
  const offline = document.getElementById("offline");
  online.style.display = "none";
  offline.style.display = "block";
});

window.addEventListener("online", (event) => {
  const online = document.getElementById("online");
  const offline = document.getElementById("offline");
  online.style.display = "block";
  offline.style.display = "none";
  setInterval(async() => {
    online.style.display = "none";
  }, 10000);
});

@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Quicksand;
  margin: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ffb457;
  transition: background-color var(--duration);
  -webkit-tap-highlight-color: transparent;
}

.alert-container {
  position: fixed;
  top: 0;
  width: 100%;
}

.alert {
  margin: 10px;
  padding: 10px;
  display: none;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 15px 5px #ccc;
}

.simple-alert {
  background-color: #ebebeb;
  border-left: 5px solid #6c6c6c;
}

.simple-alert .close {
  border-color: #6c6c6c;
  color: #6c6c6c;
}

.success-alert {
  background-color: #a8f0c6;
  border-left: 5px solid #178344;
}

.success-alert .close {
  border-color: #178344;
  color: #178344;
}

.danger-alert {
  background-color: #f7a7a3;
  border-left: 5px solid #8f130c;
}

.danger-alert .close {
  border-color: #8f130c;
  color: #8f130c;
}

.warning-alert {
  background-color: #ffd48a;
  border-left: 5px solid #8a5700;
}

.warning-alert .close {
  border-color: #8a5700;
  color: #8a5700;
}

<a href="https://www.freecodecamp.org/news/how-to-check-internet-connection-status-with-javascript/">
  Reference
</a>

<div class="alert-container">
  <div class="alert success-alert" id="online">
    <h4>Your device is connected to the internet.</h4>
  </div>

  <div class="alert danger-alert" id="offline">
    <h4>Your device lost its internet connection.</h4>
  </div>
</div>