{"id":947,"date":"2025-12-25T15:38:51","date_gmt":"2025-12-25T07:38:51","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=947"},"modified":"2025-12-25T15:38:51","modified_gmt":"2025-12-25T07:38:51","slug":"%e5%89%8d%e7%ab%af%e7%9b%91%e5%90%acwebsocket%e6%b6%88%e6%81%af%e5%b9%b6%e5%ae%9e%e6%97%b6%e5%bc%b9%e5%87%ba-%e5%ae%9e%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/25\/%e5%89%8d%e7%ab%af%e7%9b%91%e5%90%acwebsocket%e6%b6%88%e6%81%af%e5%b9%b6%e5%ae%9e%e6%97%b6%e5%bc%b9%e5%87%ba-%e5%ae%9e%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"\u524d\u7aef\u76d1\u542cwebsocket\u6d88\u606f\u5e76\u5b9e\u65f6\u5f39\u51fa (\u5b9e\u4f8b\u4ee3\u7801)\u00a0"},"content":{"rendered":"\n

\u5728\u5b9e\u65f6\u7cfb\u7edf\u4e2d\uff08\u5982\uff1a\u544a\u8b66\u901a\u77e5\u3001\u804a\u5929\u6d88\u606f\u3001\u8ba2\u5355\u63d0\u9192\u3001\u76d1\u63a7\u7cfb\u7edf<\/strong>\uff09\uff0c
\u524d\u7aef\u901a\u5e38\u9700\u8981\uff1a<\/p>\n\n\n\n

\n

\u4e00\u65e6 WebSocket \u6536\u5230\u6d88\u606f\uff0c\u7acb\u523b\u5728\u9875\u9762\u5f39\u7a97\u63d0\u793a\u7528\u6237<\/strong><\/p>\n<\/blockquote>\n\n\n\n

\u4e0b\u9762\u6211\u4eec\u4e00\u6b65\u4e00\u6b65\u6765\u3002<\/p>\n\n\n\n

\n\n\n\n

\u4e00\u3001\u57fa\u672c\u601d\u8def\uff08\u5148\u641e\u6e05\u695a\uff09<\/h2>\n\n\n\n

\u6574\u4f53\u6d41\u7a0b\u975e\u5e38\u7b80\u5355\uff1a<\/p>\n\n\n\n

    \n
  1. \u524d\u7aef\u5efa\u7acb WebSocket \u8fde\u63a5<\/li>\n\n\n\n
  2. \u76d1\u542c onmessage<\/code> \u4e8b\u4ef6<\/li>\n\n\n\n
  3. \u63a5\u6536\u5230\u6d88\u606f\u540e\u89e3\u6790\u6570\u636e<\/li>\n\n\n\n
  4. \u89e6\u53d1\u5f39\u7a97 \/ \u901a\u77e5<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    \u4e8c\u3001\u539f\u751f JavaScript \u5b9e\u73b0\uff08\u6700\u901a\u7528\uff09<\/h2>\n\n\n\n

    1\ufe0f\u20e3 \u5efa\u7acb WebSocket \u8fde\u63a5<\/h3>\n\n\n
    \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n  &lt;meta charset="UTF-8">\n  &lt;title>WebSocket \u5b9e\u65f6\u5f39\u7a97&lt;\/title>\n&lt;\/head>\n&lt;body>\n\n&lt;button onclick="connect()">\u8fde\u63a5 WebSocket&lt;\/button>\n\n&lt;script>\nlet socket;\n\nfunction connect() {\n  socket = new WebSocket("ws:\/\/localhost:8080\/ws");\n\n  \/\/ \u8fde\u63a5\u6210\u529f\n  socket.onopen = () => {\n    console.log("WebSocket \u5df2\u8fde\u63a5");\n  };\n\n  \/\/ \u63a5\u6536\u6d88\u606f\uff08\u6838\u5fc3\uff09\n  socket.onmessage = (event) => {\n    console.log("\u6536\u5230\u6d88\u606f\uff1a", event.data);\n\n    \/\/ \u5047\u8bbe\u540e\u7aef\u8fd4\u56de JSON\n    const data = JSON.parse(event.data);\n\n    \/\/ \u5b9e\u65f6\u5f39\u51fa\n    showAlert(data.message);\n  };\n\n  \/\/ \u8fde\u63a5\u5173\u95ed\n  socket.onclose = () => {\n    console.log("WebSocket \u5df2\u65ad\u5f00");\n  };\n\n  \/\/ \u53d1\u751f\u9519\u8bef\n  socket.onerror = (err) => {\n    console.error("WebSocket \u9519\u8bef", err);\n  };\n}\n\n\/\/ \u7b80\u5355\u5f39\u7a97\u65b9\u6cd5\nfunction showAlert(msg) {\n  alert("\ud83d\udce2 \u5b9e\u65f6\u901a\u77e5\uff1a" + msg);\n}\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
    \ud83d\udccc \u5173\u952e\u70b9\u5728\u8fd9\u91cc\uff1a<\/strong><\/p>\n\n\n
    \nsocket.onmessage = (event) => {\n  \/\/ \u8fd9\u91cc\u5c31\u662f\u76d1\u542c WebSocket \u6d88\u606f\u7684\u5730\u65b9\n};\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u4e09\u3001\u4f7f\u7528\u66f4\u53cb\u597d\u7684\u9875\u9762\u5f39\u7a97\uff08\u4e0d\u4f7f\u7528 alert\uff09<\/h2>\n\n\n\n
    alert()<\/code> \u4f1a\u963b\u585e\u9875\u9762\uff0c\u771f\u5b9e\u9879\u76ee\u4e0d\u63a8\u8350<\/strong>\u3002
    \u4e0b\u9762\u7528\u4e00\u4e2a\u7b80\u5355\u7684 DOM \u5f39\u7a97\u3002<\/p>\n\n\n\n
    \u5f39\u7a97\u6837\u5f0f + JS<\/h3>\n\n\n
    \n&lt;style>\n#notify {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  background: #333;\n  color: #fff;\n  padding: 12px 18px;\n  border-radius: 6px;\n  display: none;\n  z-index: 9999;\n}\n&lt;\/style>\n\n&lt;div id="notify">&lt;\/div>\n\n&lt;script>\nfunction showAlert(msg) {\n  const el = document.getElementById("notify");\n  el.innerText = msg;\n  el.style.display = "block";\n\n  setTimeout(() => {\n    el.style.display = "none";\n  }, 3000);\n}\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \u6548\u679c\uff1a
    \u2705 \u53f3\u4e0a\u89d2\u5b9e\u65f6\u5f39\u51fa
    \u2705 \u4e0d\u963b\u585e\u9875\u9762
    \u2705 \u81ea\u52a8\u6d88\u5931<\/p>\n\n\n\n
    \n\n\n\n
    \u56db\u3001Vue \u9879\u76ee\u4e2d\u76d1\u542c WebSocket \u5e76\u5f39\u51fa<\/h2>\n\n\n\n
    Vue 3 \u793a\u4f8b\uff08setup \u8bed\u6cd5\uff09<\/h3>\n\n\n
    \n&lt;script setup>\nimport { onMounted, onBeforeUnmount } from "vue";\n\nlet socket;\n\nfunction connectWs() {\n  socket = new WebSocket("ws:\/\/localhost:8080\/ws");\n\n  socket.onmessage = (event) => {\n    const data = JSON.parse(event.data);\n    showNotify(data.message);\n  };\n}\n\nfunction showNotify(msg) {\n  alert("\u901a\u77e5\uff1a" + msg);\n}\n\nonMounted(() => {\n  connectWs();\n});\n\nonBeforeUnmount(() => {\n  socket &amp;&amp; socket.close();\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \ud83d\udccc \u6ce8\u610f<\/strong>\uff1a
    WebSocket \u4e00\u822c\u5728\uff1a<\/p>\n\n\n\n