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

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

news 2025/9/19 1:23:38

 

<!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>

相关文章：

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"widt…...

编程日记 2023/9/2 16:07:37

网络基础之重中之重

目录 IP协议 ​编辑 基本概念&#xff1a; 协议头格式&#xff1a; ​编辑 网段划分 DHCP &#xff1a; CIDR&#xff1a; 特殊的IP地址&#xff1a; IP地址的数量限制&#xff1a; 私有IP和公网IP 路由 路由的过程&#xff1a; 数据链路层 认识以太网&#x…...

编程日记 2023/9/2 16:06:35

HarmonyOS应用开发者-----基础认证试题及答案

HarmonyOS应用开发者基础认证试题及答案 试题会不定时刷新，本试题仅供大家学习参考 【判断题】 2.5/2.5 所有使用@Component修饰的自定义组件都支持onPageShow，onBackPress和onPageHide生命周期函数。 正确(True)错误(False) 回答正确【判断题】 2.5/2.5 在Column和Row容器组…...

编程日记 2023/9/2 16:05:34

C++：string并非以0作为结束符，c_str和data的返回却包含结束符0

C语言中使用char数组保存字符串时，是以字符为0或者\0作为字符串的结束符标志的。 所以一个char str[10]的数组只能合法的保存9个字符(因为最后还要加一个结束符)。 #include <cstring> #include <iostream>using namespace std;int main() {char str[10] ="…...

编程日记 2023/9/2 16:04:33

ChatGPT插件的优缺点

虽然西弗吉尼亚大学的研究人员看到了最新的官方ChatGPT插件——名为“代码解释器”&#xff08; Code Interpreter&#xff09;的教育应用潜力&#xff0c;但他们也发现&#xff0c;对于使用计算方法处理针对癌症和遗传疾病的定向治疗的生物数据的科学家来说&#xff0c;这款插…...

编程日记 2023/9/2 16:03:31

北京985学校，交叉学科考英一数三408

北京师范大学(B) 考研难度&#xff08;☆☆☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1096字&#xff0c;预计阅读&#xff1a;3分钟 2023考情概况 北…...

编程日记 2023/9/2 16:02:29

ChatGPT 总结前端HTML, JS, Echarts都包含哪些内容

AIGC ChatGPT ，BI商业智能， 可视化Tableau, PowerBI, FineReport， 数据库Mysql Oracle， Office， Python ，ETL Excel 2021 实操，函数，图表，大屏可视化 案例实战 http://t.csdn.cn/zBytu...

编程日记 2023/9/2 16:01:28

企业架构LNMP学习笔记1

项目开发流程&#xff1a; 公司老板或者产品经理&#xff0c;根据市场调查&#xff0c;决定开发一整套互联网产品。 互动社交电商用户论坛&#xff08;BBS&#xff09; 产品决策 &#xff08;老板产品UI设计&#xff09; 业务实施、代码开发 程序开发人员 前端开发&#x…...

编程日记 2023/9/2 16:00:27

【位运算】leetcode371：两整数之和

一.题目描述 两整数之和 二.思路分析 题目要求我们实现两整数相加&#xff0c;但是不能使用加号&#xff0c;应该立马想到是用位运算来解决问题。之前说过&#xff0c;异或就是“无进位相加”&#xff0c;故本题可以先将两数异或&#xff0c;然后想办法让得到的结果进位即可。…...

编程日记 2023/9/2 15:59:26

【爬虫小知识】如何利用爬虫爬网页——python爬虫

前言 网络时代的到来&#xff0c;给我们提供了海量的信息资源&#xff0c;但是&#xff0c;想要获取这些信息&#xff0c;手动一个一个网页进行查找&#xff0c;无疑是一项繁琐且效率低下的工作。这时&#xff0c;爬虫技术的出现&#xff0c;为我们提供了一种高效的方式去获取…...

编程日记 2023/9/2 15:58:25

什么是跨域问题 ？Spring MVC 如何解决跨域问题 ？Spring Boot 如何解决跨域问题 ？

目录 1. 什么是跨域问题 &#xff1f; 2. Spring MVC 如何解决跨域问题 &#xff1f; 3. Spring Boot 如何解决跨域问题 &#xff1f; 1. 什么是跨域问题 &#xff1f; 跨域问题指的是不同站点之间&#xff0c;使用 ajax 无法相互调用的问题。 跨域问题的 3 种情况&#x…...

编程日记 2023/9/2 15:57:24

线性代数的学习和整理17：向量空间的基，自然基，基变换等（未完成）

目录 3 向量空间的基&#xff1a;矩阵的基础/轴 3.1 从颜色RGB说起 3.2 附属知识 3.3 什么样的向量可以做基&#xff1f; 3.4 基的分类 3.1.1 不同空间的基---向量组的数量可能不同 3.1.2 自然基 3.1.3 正交基 3.1.4 标准正交基 3.1.5 基和向量/矩阵 3.1.6 基变换 …...

编程日记 2023/9/2 15:56:23

Java中支持分库分表的框架/组件/中间件简介

文章目录 1 sharding-jdbc2 TSharding3 Atlas4 Cobar5 MyCAT6 TDDL7 Vitess 列举一些比较常见的&#xff0c;简单介绍一下&#xff1a; sharding-jdbc&#xff08;当当&#xff09; TSharding&#xff08;蘑菇街&#xff09; Atlas&#xff08;奇虎360&#xff09; Cobar&#…...

编程日记 2023/9/2 15:55:22

7.2 项目2 学生通讯录管理：文本文件增删改查（C 版本）(自顶向下设计+断点调试) (A)

C自学精简教程 目录(必读) 该作业是 作业 学生通讯录管理&#xff1a;文本文件增删改查&#xff08;C版本&#xff09; 的C 语言版本。 具体的作业题目描述&#xff0c;要求&#xff0c;可以参考 学生通讯录管理&#xff1a;文本文件增删改查&#xff08;C版本&#xff09;。…...

编程日记 2023/9/2 15:54:21

excel怎么设置任意选一个单元格纵横竖横都有颜色

有时excel表格内容过多的时候&#xff0c;我们通过excel设置任意选一个单元格纵横&#xff0c;竖横背景颜色&#xff0c;这样会更加具有辨识度。设置方式截图如下 设置成功后&#xff0c;预览的效果图...

编程日记 2023/9/2 15:53:20

期货-股票交易规则

交易时间 港股&#xff1a;9:00~9:20 集合竞价&#xff0c;9:3012:00&#xff0c;13:0016:00 持续交易&#xff0c;16:00~16:10 随机收市竞价沪股&#xff1a;9:00~9:25 集合竞价&#xff0c;9:3011:30&#xff0c;13:0015:00 持续交易&#xff0c;11:30~12:00 交易申报深股&a…...

编程日记 2023/9/2 15:52:19

Makefile一些语法

ifneq($(filter true,$(xxx)), )的含义 filter 是过滤的意思&#xff0c;它的原型是&#xff1a;$(filter PATTERN…,TEXT)&#xff0c; 意义为&#xff1a;过滤掉字串“TEXT”中所有不符合模式“PATTERN”的单词&#xff0c;保留所有符合此模式的单词做返回值。 结合前面的if…...

编程日记 2023/9/2 15:51:16

0基础可以转行编程行业么

在2022年分行业门类分岗位就业人员年平均工资中&#xff0c;信息传输、软件和信息技术服务业的薪资遥遥领先其他行业&#xff0c;为全国平均薪资水平的 1.78 倍&#xff0c;远超第二名金融行业&#xff0c;其年增长率在9.4%&#xff0c;并成为年收入首个过20 万门槛的行业&…...

编程日记 2023/9/2 15:50:15

【spark】dataframe慎用limit

官方&#xff1a;limit通常和order by一起使用&#xff0c;保证结果是确定的 limit 会有两个步骤&#xff1a; LocalLimit &#xff0c;发生在每个partitionGlobalLimit&#xff0c;发生shuffle&#xff0c;聚合到一个parttion 当提取的n大时&#xff0c;第二步是比较耗时的…...

编程日记 2023/9/2 15:49:13

基于OpenCV+LPR模型端对端智能车牌识别——深度学习和目标检测算法应用(含Python+Andriod全部工程源码)+CCPD数据集

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境OpenCV环境Android环境1. 开发软件和开发包2. JDK设置3. NDK设置 模块实现1. 数据预处理2. 模型训练1&#xff09;训练级联分类器2&#xff09;训练无分割车牌字符识别模型 3. APP构建1&#xff09;导入OpenCV库…...

编程日记 2023/9/2 15:48:13

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/18 19:39:53

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/9/18 1:41:40

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/9/13 17:46:11

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/9/6 18:01:23

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/8/10 12:51:07

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/8/26 13:03:54

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/7/18 1:59:18

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/8/8 6:07:28