当前位置：首页 > news >正文

h5 ws 客户端监听ws服务器广播的信息

news 2025/7/14 20:04:57

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AI智能写作</title><!-- Bootstrap CSS --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><style>#log p {margin-bottom: 20px;  /* 设置间距 */font-size: 13px;       /* 设置字体大小 */}#log div img{vertical-align: middle;border-style: none;width: 20px;float: left;}</style>
</head><body><div class="container mt-5"><h1>AI智能写作</h1><button id="connectBtn" class="btn btn-primary">Connect</button><button id="disconnectBtn" class="btn btn-danger" disabled>Disconnect</button><div id="log" class="mt-4" style="height: 300px; overflow: auto;"><h2>Log:</h2></div><div class="mt-4"><label for="message">Message:</label><input type="text" id="message" placeholder="来说点什么吧...（Shift + Enter = 换行，前往小应用预设对应身份" class="form-control"><button id="sendBtn" class="btn btn-success mt-2" disabled>Send</button></div></div><script>var ws;function updateScroll() {var logDiv = document.getElementById("log");logDiv.scrollTop = logDiv.scrollHeight;}document.getElementById("connectBtn").addEventListener("click", function() {ws = new WebSocket("ws://127.0.0.1:9527");ws.onopen = function() {document.getElementById("log").innerText += "Connected\n";document.getElementById("connectBtn").disabled = true;document.getElementById("disconnectBtn").disabled = false;document.getElementById("sendBtn").disabled = false;updateScroll();};ws.onmessage = function(event) {try {// 移除前缀 "From other client: "var jsonString = event.data.replace("From other client: ", "");// 解析JSONvar jsonData = JSON.parse(jsonString);var userNickName = jsonData.message.user_nickName;var msgContent = jsonData.message.msg_content;// 显示在日志（Log）区域，并使用<p>标签包围每条信息var logDiv = document.getElementById("log");var messageElement = document.createElement("div");messageElement.innerHTML = '<img loading=\"eager\"  class=\"img-fluid rounded\" src=\"avatar-ceeb03f6.png\" data-image-src=\"avatar-ceeb03f6.png\"><p class="text-left" >2023/8/31 上午8:52:55</p><p style=\"font-size: 18px\">' + userNickName + ": "  + msgContent+ '<\/p>';logDiv.appendChild(messageElement);updateScroll();} catch (e) {var logDiv = document.getElementById("log");var messageElement = document.createElement("p");messageElement.innerHTML = "Error parsing message: " + e.message;logDiv.appendChild(messageElement);updateScroll();}};ws.onerror = function(error) {document.getElementById("log").innerText += "Error: " + error.message + "\n";updateScroll();};ws.onclose = function() {document.getElementById("log").innerText += "Disconnected\n";document.getElementById("connectBtn").disabled = false;document.getElementById("disconnectBtn").disabled = true;document.getElementById("sendBtn").disabled = true;updateScroll();};});document.getElementById("disconnectBtn").addEventListener("click", function() {ws.close();});document.getElementById("sendBtn").addEventListener("click", function() {var message = document.getElementById("message").value;ws.send(message);document.getElementById("log").innerText += "Sent: " + message + "\n";updateScroll();});</script></body>
</html>

查看全文

http://www.lryc.cn/news/150318.html