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

<!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>
相关推荐
that's boy16 小时前
突围边缘:OpenAI开源实时嵌入式API,AI触角延伸至微观世界
人工智能·gpt·chatgpt·开源·openai·midjourney
AIGC大时代20 小时前
如何使用ChatGPT辅助文献综述,以及如何进行优化?一篇说清楚
人工智能·深度学习·chatgpt·prompt·aigc
hunteritself1 天前
AI Weekly『12月16-22日』:OpenAI公布o3,谷歌发布首个推理模型,GitHub Copilot免费版上线!
人工智能·gpt·chatgpt·github·openai·copilot
测试者家园2 天前
ChatGPT生成接口文档的方法与实践
软件测试·chatgpt·测试用例·接口测试·接口文档·ai赋能·用chatgpt做软件测试
小虚竹2 天前
如何利用ChatGPT生成不同类型的文章大纲
chatgpt
AI小欧同学2 天前
【AIGC-ChatGPT进阶副业提示词】育儿锦囊:化解日常育儿难题的实用指南
chatgpt·aigc
测试者家园2 天前
ChatGPT接口测试用例生成的流程
软件测试·chatgpt·测试用例·接口测试·测试图书·质量效能·用chatgpt做测试
m0_748256562 天前
如何使用Python WebDriver爬取ChatGPT内容(完整教程)
开发语言·python·chatgpt
测试者家园3 天前
ChatGPT与接口测试工具的协作
软件测试·测试工具·chatgpt·接口测试·ai赋能·用chatgpt做软件测试·测试图书
SomeB1oody3 天前
获取OpenAI官方给ChatGPT的系统定义Prompt
人工智能·语言模型·chatgpt·prompt