javascript - 如何处理 Net Core 中的 net::ERR_INTERNET_DISCONNECTED 错误

Question

我正在播放流式直播广播 mp3 媒体，但是当互联网连接断开时，流式播放停止并且不再播放，即使互联网连接恢复也是如此。

我想处理连接，当连接断开时，我需要向用户显示一条消息，如“您的连接已断开，请检查并刷新页面”。

如何使用 Javascript 或 C# 处理此问题？

Answer 1

使用下面的代码片段

1. 使用 chrome 开发者工具将浏览器置于离线/在线状态

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>