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: ", "");// 解析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…...
网络基础之重中之重
目录 IP协议 编辑 基本概念： 协议头格式： 编辑 网段划分 DHCP ： CIDR： 特殊的IP地址： IP地址的数量限制： 私有IP和公网IP 路由 路由的过程： 数据链路层 认识以太网&#x…...
HarmonyOS应用开发者-----基础认证试题及答案
HarmonyOS应用开发者基础认证试题及答案 试题会不定时刷新，本试题仅供大家学习参考 【判断题】 2.5/2.5 所有使用@Component修饰的自定义组件都支持onPageShow，onBackPress和onPageHide生命周期函数。 正确(True)错误(False) 回答正确【判断题】 2.5/2.5 在Column和Row容器组…...
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] ="…...
ChatGPT插件的优缺点
虽然西弗吉尼亚大学的研究人员看到了最新的官方ChatGPT插件——名为“代码解释器”（ Code Interpreter）的教育应用潜力，但他们也发现，对于使用计算方法处理针对癌症和遗传疾病的定向治疗的生物数据的科学家来说，这款插…...
北京985学校，交叉学科考英一数三408
北京师范大学(B) 考研难度（☆☆☆） 内容：23考情概况（拟录取和复试分析）、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1096字，预计阅读：3分钟 2023考情概况 北…...
ChatGPT 总结前端HTML, JS, Echarts都包含哪些内容
AIGC ChatGPT ，BI商业智能， 可视化Tableau, PowerBI, FineReport， 数据库Mysql Oracle， Office， Python ，ETL Excel 2021 实操，函数，图表，大屏可视化 案例实战 http://t.csdn.cn/zBytu...
企业架构LNMP学习笔记1
项目开发流程： 公司老板或者产品经理，根据市场调查，决定开发一整套互联网产品。 互动社交电商用户论坛（BBS） 产品决策 （老板产品UI设计） 业务实施、代码开发 程序开发人员 前端开发&#x…...
【位运算】leetcode371：两整数之和
一.题目描述 两整数之和 二.思路分析 题目要求我们实现两整数相加，但是不能使用加号，应该立马想到是用位运算来解决问题。之前说过，异或就是“无进位相加”，故本题可以先将两数异或，然后想办法让得到的结果进位即可。…...
【爬虫小知识】如何利用爬虫爬网页——python爬虫
前言 网络时代的到来，给我们提供了海量的信息资源，但是，想要获取这些信息，手动一个一个网页进行查找，无疑是一项繁琐且效率低下的工作。这时，爬虫技术的出现，为我们提供了一种高效的方式去获取…...
什么是跨域问题 ？Spring MVC 如何解决跨域问题 ？Spring Boot 如何解决跨域问题 ？
目录 1. 什么是跨域问题 ？ 2. Spring MVC 如何解决跨域问题 ？ 3. Spring Boot 如何解决跨域问题 ？ 1. 什么是跨域问题 ？ 跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。 跨域问题的 3 种情况&#x…...
线性代数的学习和整理17：向量空间的基，自然基，基变换等（未完成）
目录 3 向量空间的基：矩阵的基础/轴 3.1 从颜色RGB说起 3.2 附属知识 3.3 什么样的向量可以做基？ 3.4 基的分类 3.1.1 不同空间的基---向量组的数量可能不同 3.1.2 自然基 3.1.3 正交基 3.1.4 标准正交基 3.1.5 基和向量/矩阵 3.1.6 基变换 …...
Java中支持分库分表的框架/组件/中间件简介
文章目录 1 sharding-jdbc2 TSharding3 Atlas4 Cobar5 MyCAT6 TDDL7 Vitess 列举一些比较常见的，简单介绍一下： sharding-jdbc（当当） TSharding（蘑菇街） Atlas（奇虎360） Cobar&#…...
7.2 项目2 学生通讯录管理：文本文件增删改查（C 版本）(自顶向下设计+断点调试) (A)
C自学精简教程 目录(必读) 该作业是 作业 学生通讯录管理：文本文件增删改查（C版本） 的C 语言版本。 具体的作业题目描述，要求，可以参考 学生通讯录管理：文本文件增删改查（C版本）。…...
excel怎么设置任意选一个单元格纵横竖横都有颜色
有时excel表格内容过多的时候，我们通过excel设置任意选一个单元格纵横，竖横背景颜色，这样会更加具有辨识度。设置方式截图如下 设置成功后，预览的效果图...
期货-股票交易规则
交易时间 港股：9:00~9:20 集合竞价，9:3012:00，13:0016:00 持续交易，16:00~16:10 随机收市竞价沪股：9:00~9:25 集合竞价，9:3011:30，13:0015:00 持续交易，11:30~12:00 交易申报深股&a…...
Makefile一些语法
ifneq($(filter true,$(xxx)), )的含义 filter 是过滤的意思，它的原型是：$(filter PATTERN…,TEXT)， 意义为：过滤掉字串“TEXT”中所有不符合模式“PATTERN”的单词，保留所有符合此模式的单词做返回值。 结合前面的if…...
0基础可以转行编程行业么
在2022年分行业门类分岗位就业人员年平均工资中，信息传输、软件和信息技术服务业的薪资遥遥领先其他行业，为全国平均薪资水平的 1.78 倍，远超第二名金融行业，其年增长率在9.4%，并成为年收入首个过20 万门槛的行业&…...
【spark】dataframe慎用limit
官方：limit通常和order by一起使用，保证结果是确定的 limit 会有两个步骤： LocalLimit ，发生在每个partitionGlobalLimit，发生shuffle，聚合到一个parttion 当提取的n大时，第二步是比较耗时的…...
基于OpenCV+LPR模型端对端智能车牌识别——深度学习和目标检测算法应用(含Python+Andriod全部工程源码)+CCPD数据集
目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境OpenCV环境Android环境1. 开发软件和开发包2. JDK设置3. NDK设置 模块实现1. 数据预处理2. 模型训练1）训练级联分类器2）训练无分割车牌字符识别模型 3. APP构建1）导入OpenCV库…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O…...