<!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: ", "");
// 解析JSON
var 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>
h5 ws 客户端 监听ws服务器广播的信息
三块钱07942023-09-02 15:04
相关推荐
狸克先生34 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互新加坡内哥谈技术3 小时前
Mistral推出“Le Chat”,对标ChatGPTnbsaas-boot5 小时前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例hunteritself20 小时前
ChatGPT高级语音模式正在向Web网页端推出!Doker 多克1 天前
Spring AI 框架使用的核心概念曼城周杰伦1 天前
自然语言处理:第六十二章 KAG 超越GraphRAG的图谱框架爱技术的小伙子1 天前
【ChatGPT】ChatGPT在多领域知识整合中的应用学习前端的小z1 天前
【AIGC】如何准确引导ChatGPT,实现精细化GPTs指令生成段传涛2 天前
LLM( Large Language Models)典型应用介绍 1 -ChatGPT Large language models起名字真南2 天前
【C++】深入理解 C++ 中的继承进阶:多继承、菱形继承及其解决方案