明白了，阿杰！下面给你一个 前端监听 WebSocket 消息并实时弹出的完整示例，适合 H5 或桌面浏览器使用。

特点：

  • 建立 WebSocket 连接
  • 监听服务端消息
  • 实时弹出通知（alert 或自定义弹窗）
  • 支持发送消息到服务器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket 实时弹出示例</title>
<style>
  body { font-family: Arial; padding: 20px; }
  #log { margin-top: 20px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; }
  button { margin-top: 10px; padding: 6px 12px; }
</style>
</head>
<body>

<h1>WebSocket 实时弹出示例</h1>

<input type="text" id="msgInput" placeholder="输入要发送的消息">
<button id="sendBtn">发送消息</button>

<div id="log"></div>

<script>
const logDiv = document.getElementById('log');
const msgInput = document.getElementById('msgInput');
const sendBtn = document.getElementById('sendBtn');

// 1️⃣ 建立 WebSocket 连接（请替换成你的 WebSocket 服务地址）
const ws = new WebSocket('wss://echo.websocket.org'); // 测试用 echo 服务器

// 2️⃣ 监听连接打开
ws.addEventListener('open', () => {
  appendLog('已连接到 WebSocket 服务器');
});

// 3️⃣ 监听服务端消息
ws.addEventListener('message', (event) => {
  const msg = event.data;
  appendLog('收到消息: ' + msg);
  
  // 4️⃣ 实时弹出
  alert('新消息: ' + msg);
});

// 5️⃣ 监听连接关闭
ws.addEventListener('close', () => {
  appendLog('WebSocket 已关闭');
});

// 6️⃣ 监听错误
ws.addEventListener('error', (err) => {
  appendLog('WebSocket 错误: ' + err);
});

// 7️⃣ 发送消息按钮
sendBtn.addEventListener('click', () => {
  const message = msgInput.value.trim();
  if(message && ws.readyState === WebSocket.OPEN){
    ws.send(message);
    appendLog('发送消息: ' + message);
    msgInput.value = '';
  } else {
    alert('WebSocket 未连接或消息为空');
  }
});

// 日志输出函数
function appendLog(text){
  const p = document.createElement('p');
  p.textContent = text;
  logDiv.appendChild(p);
  logDiv.scrollTop = logDiv.scrollHeight;
}
</script>

</body>
</html>

🔹 说明

  1. WebSocket URL
    • ws:// 或 wss://（加密）
    • 示例使用 wss://echo.websocket.org，会原样返回发送的消息
  2. 实时弹出
    • alert() 简单弹出
    • 可换成 自定义浮动消息 / toast
  3. 日志记录
    • 页面内 <div id="log"> 记录所有消息
  4. 发送消息
    • 输入框 + 按钮可将消息发送到服务端

明白了，阿杰！下面给你一个 前端 WebSocket 实时消息增强版示例，特点：

  • 不使用 alert 弹窗，而是右下角浮动消息（Toast 风格）
  • 消息累积显示，可自动消失
  • 支持多条消息同时显示
  • 可加入声音提示（可选）
  • 移动端/桌面端兼容
&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>WebSocket 实时通知增强版&lt;/title>
&lt;style>
body { font-family: Arial; padding: 20px; }
#msgInput { width: 60%; padding: 6px; }
#sendBtn { padding: 6px 12px; }
#log { margin-top: 20px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; }

/* 浮动消息样式 */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}
.toast {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 16px;
  margin-top: 8px;
  border-radius: 5px;
  min-width: 200px;
  max-width: 300px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  animation: slideIn 0.5s, fadeOut 0.5s 4.5s forwards;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100%); }
}
&lt;/style>
&lt;/head>
&lt;body>

&lt;h1>WebSocket 实时通知增强版&lt;/h1>

&lt;input type="text" id="msgInput" placeholder="输入要发送的消息">
&lt;button id="sendBtn">发送消息&lt;/button>

&lt;div id="log">&lt;/div>
&lt;div class="toast-container" id="toastContainer">&lt;/div>

&lt;script>
const logDiv = document.getElementById('log');
const msgInput = document.getElementById('msgInput');
const sendBtn = document.getElementById('sendBtn');
const toastContainer = document.getElementById('toastContainer');

// 1️⃣ 建立 WebSocket 连接（示例使用 echo 服务）
const ws = new WebSocket('wss://echo.websocket.org');

ws.addEventListener('open', () => {
  appendLog('已连接到 WebSocket 服务器');
});

// 2️⃣ 监听服务端消息
ws.addEventListener('message', (event) => {
  const msg = event.data;
  appendLog('收到消息: ' + msg);
  showToast('新消息: ' + msg);
});

// 3️⃣ 监听关闭和错误
ws.addEventListener('close', () => appendLog('WebSocket 已关闭'));
ws.addEventListener('error', (err) => appendLog('WebSocket 错误: ' + err));

// 4️⃣ 发送消息按钮
sendBtn.addEventListener('click', () => {
  const message = msgInput.value.trim();
  if(message &amp;&amp; ws.readyState === WebSocket.OPEN){
    ws.send(message);
    appendLog('发送消息: ' + message);
    msgInput.value = '';
  } else {
    alert('WebSocket 未连接或消息为空');
  }
});

// 日志输出函数
function appendLog(text){
  const p = document.createElement('p');
  p.textContent = text;
  logDiv.appendChild(p);
  logDiv.scrollTop = logDiv.scrollHeight;
}

// 显示浮动消息
function showToast(message){
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;
  toastContainer.appendChild(toast);

  // 可选声音提示
  // const audio = new Audio('https://www.myinstants.com/media/sounds/bell.mp3');
  // audio.play();

  // 自动移除
  setTimeout(() => {
    toast.remove();
  }, 5000); // 5秒后消失
}
&lt;/script>

&lt;/body>
&lt;/html>

🔹 特性说明

  1. 右下角浮动消息
    • 不打断用户操作
    • 动画效果：滑入 + 5 秒后自动消失
  2. 消息累积显示
    • 多条消息同时显示
    • 上新消息在下方，自动排队
  3. 可加入声音提示
    • 注释掉的 Audio 代码，可启用铃声
  4. 兼容移动端
    • CSS 固定位置，适合手机浏览器