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

     

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>AI智能写作</title>
    6.   <!-- Bootstrap CSS -->
    7.   <meta charset="utf-8">
    8.   <meta name="viewport" content="width=device-width, initial-scale=1">
    9.   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    10.   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    11.   <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    12.   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    13.   <style>
    14.     #log p {
    15.         margin-bottom: 20px;  /* 设置间距 */
    16.         font-size: 13px;       /* 设置字体大小 */
    17.     }
    18.     #log div img{
    19.         
    20.         vertical-align: middle;
    21.         border-style: none;
    22.         width: 20px;
    23.         float: left;
    24.  
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.  
    31.   <div class="container mt-5">
    32.     <h1>AI智能写作</h1>
    33.     <button id="connectBtn" class="btn btn-primary">Connect</button>
    34.     <button id="disconnectBtn" class="btn btn-danger" disabled>Disconnect</button>
    35.  
    36.     <div id="log" class="mt-4" style="height: 300px; overflow: auto;">
    37.         <h2>Log:</h2>
    38.     </div>
    39.     <div class="mt-4">
    40.       <label for="message">Message:</label>
    41.       <input type="text" id="message" placeholder="来说点什么吧...（Shift + Enter = 换行，前往小应用预设对应身份" class="form-control">
    42.       <button id="sendBtn" class="btn btn-success mt-2" disabled>Send</button>
    43.     </div>
    44.  
    45.   </div>
    46.  
    47.   <script>
    48.     var ws;
    49.  
    50.     function updateScroll() {
    51.       var logDiv = document.getElementById("log");
    52.       logDiv.scrollTop = logDiv.scrollHeight;
    53.     }
    54.  
    55.     document.getElementById("connectBtn").addEventListener("click", function() {
    56.       ws = new WebSocket("ws://127.0.0.1:9527");
    57.  
    58.       ws.onopen = function() {
    59.         document.getElementById("log").innerText += "Connected\n";
    60.         document.getElementById("connectBtn").disabled = true;
    61.         document.getElementById("disconnectBtn").disabled = false;
    62.         document.getElementById("sendBtn").disabled = false;
    63.         updateScroll();
    64.       };
    65.  
    66.       ws.onmessage = function(event) {
    67.         try {
    68.             // 移除前缀 "From other client: "
    69.             var jsonString = event.data.replace("From other client: ", "");
    70.             
    71.             // 解析JSON
    72.             var jsonData = JSON.parse(jsonString);
    73.             var userNickName = jsonData.message.user_nickName;
    74.             var msgContent = jsonData.message.msg_content;
    75.  
    76.             // 显示在日志（Log）区域，并使用<p>标签包围每条信息
    77.             var logDiv = document.getElementById("log");
    78.             var messageElement = document.createElement("div");
    79.             
    80.             messageElement.innerHTML = '
      2023/8/31 上午8:52:55
      ' + userNickName + ": "  + msgContent+ '<\/p>';
    81.             logDiv.appendChild(messageElement);
    82.  
    83.             updateScroll();
    84.         } catch (e) {
    85.             var logDiv = document.getElementById("log");
    86.             var messageElement = document.createElement("p");
    87.             messageElement.innerHTML = "Error parsing message: " + e.message;
    88.             logDiv.appendChild(messageElement);
    89.  
    90.             updateScroll();
    91.         }
    92.         };
    93.  
    94.  
    95.       ws.onerror = function(error) {
    96.         document.getElementById("log").innerText += "Error: " + error.message + "\n";
    97.         updateScroll();
    98.       };
    99.  
    100.       ws.onclose = function() {
    101.         document.getElementById("log").innerText += "Disconnected\n";
    102.         document.getElementById("connectBtn").disabled = false;
    103.         document.getElementById("disconnectBtn").disabled = true;
    104.         document.getElementById("sendBtn").disabled = true;
    105.         updateScroll();
    106.       };
    107.     });
    108.  
    109.     document.getElementById("disconnectBtn").addEventListener("click", function() {
    110.       ws.close();
    111.     });
    112.  
    113.     document.getElementById("sendBtn").addEventListener("click", function() {
    114.       var message = document.getElementById("message").value;
    115.       ws.send(message);
    116.       document.getElementById("log").innerText += "Sent: " + message + "\n";
    117.       updateScroll();
    118.     });
    119.   </script>
    120.  
    121. </body>
    122. </html>

  • 相关阅读:
    2023年11月架构设计师上午真题及答案
    Docker部署GItLab
    端口扫描-安全体系-网络安全技术和协议
    SpringBoot整合Dubbo
    计算机组成原理学习笔记：主机三件套硬件部件
    ASEMI快恢复二极管SFP4006，SFP4006参数，SFP4006应用
    chrome网页调试工具的使用步骤
    IDEA Class爆红编译不通过但还是正常运行，查找调用链发现不正常（该显示的没显示）
    latex中的空格
    c#，dotnet， DataMatrix 类型二维码深度识别，OCR,（基于 Halcon）
  • 原文地址：https://blog.csdn.net/jxyk2007/article/details/132621217