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

AWTK-WEB 快速入门(6) - JS WebSocket 应用程序

news 来源：原创 2025/6/30 19:45:14

WebSocket 可以实现双向通信，适合实时通信场景。本文介绍一下使用 Javacript 语言开发 AWTK-WEB 应用程序，并用 WebSocket 与服务器通讯。


用 AWTK Designer 新建一个应用程序

先安装 AWTK Designer：

https://awtk.zlg.cn/web/index.html

1. 新建应用程序

这里假设应用程序的名称为 AwtkApplicationJSWebSocket，后面会用到，如果使用其它名称，后面要做相应修改。

2. 编写代码

2.1 删除 src 目录下全部文件（留着也可以，只是看起来比较乱），在 src 目录创建 js 目录。

2.2 在 src/js 下创建 application.js ，内容如下：

function applicationInit() {  home_page_open();}
applicationInit()

2.3 在 src/js 下创建 home_page.js，内容如下：

function home_page_open() { var win = TWindow.open("home_page"); var send = win.lookup("send", true); var send_text = win.lookup("send_text", true); var recv_text = win.lookup("recv_text", true); const ws = new WebSocket("ws://localhost:8090");
send.on(TEventType.CLICK, function (evt) { const message = send_text.getText();
ws.send(message); return TRet.OK; });
ws.onopen = () => { recv_text.setText("Connected to the server"); };
ws.onmessage = (event) => { recv_text.setText(event.data); };
ws.onclose = () => { recv_text.setText("close"); };
win.layout();}

注意：控件的名称一定要和 home_page.xml 保持一致。

3. 在 AWTK Designer 中，执行“打包” “编译” “模拟运行”


正常情况下可以看到如下界面：点击“关闭”按钮，退出应用程序。


编写配置文件

具体格式请参考，特殊平台编译配置：

https://github.com/zlgopen/awtk/blob/master/docs/build_config.md

这里给出一个例子，可以在此基础上进行修改，该文件位于：

examples/AwtkApplicationJSWebSocket/build.json 

{ "name": "AwtkApplicationJSWebSocketWebSocket", "version": "1.0", "app_type":"js", "author": "xianjimli@hotmail.com", "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.", "themes":["default"], "sources": [ "src/js/*.js" ]}


编译 WEB 应用程序

进入 awtk-web 目录，不同平台使用不同的脚本编译：

  • Windows 平台

./build_win32.sh examples/AwtkApplicationJSWebSocket/build.json release

  • Linux 平台

./build_linux.sh examples/AwtkApplicationJSWebSocket/build.json release

  • MacOS 平台

./build_mac.sh examples/AwtkApplicationJSWebSocket/build.json release

请根据应用程序所在目录，修改配置文件的路径。


运行

1. 正常启动

./start_web.sh2. 调试启动

start_web_debug.sh3. 启动 websocket 服务器（先安装 nodejs)

进入 awtk-web 目录下的 tools/websocket，执行：

node websocket_echo_server.js 4. 用浏览器打开URL：http://localhost:8080/AwtkApplicationJSWebSocket

相关文章：

AWTK-WEB 快速入门(6) - JS WebSocket 应用程序

WebSocket 可以实现双向通信，适合实时通信场景。本文介绍一下使用 Javacript 语言开发 AWTK-WEB 应用程序，并用 WebSocket 与服务器通讯。 用 AWTK Designer 新建一个应用程序 先安装 AWTK Designer： https://awtk.zlg.cn/web/index.html …...

编程日记 2025/6/30 19:45:14

一.搭建ubuntu系统服务器

搭建ubuntu系统服务器 一：Ubantu下载及安装1.Ubuntu的U盘系统安装工具制作2.Ubuntu系统安装 二.安装ssh实现远程连接1.安装OpenSSH服务器2.启动SSH服务并设置开机自启3.配置文件4.配置防火墙5.处理SELinux（仅限CentOS/RHEL）6.设置和修改SSH密…...

编程日记 2025/6/27 7:44:24

[python]基于yolov8实现热力图可视化支持图像视频和摄像头检测

YOLOv8 Grad-CAM 可视化工具 本工具基于YOLOv8模型，结合Grad-CAM技术实现目标检测的可视化分析，支持图像、视频和实时摄像头处理。 功能特性 支持多种Grad-CAM方法实时摄像头处理视频文件处理图像文件处理调用简单 环境要求 Python 3.8需要电脑带有…...

编程日记 2025/6/28 1:22:35

微软 GraphRAG 项目学习总结

微软2024年4月份发布了一篇《From Local to Global: A GraphRAG Approach to Query-Focused Summarization》（GraphRAG：从局部到全局的查询式摘要方法）论文，提出了一种名为GraphRAG的检索增强生成（RAG）方法…...

编程日记 2025/6/28 1:22:33

DeepSeek结合MCP Server与Cursor，实现服务器资源的自动化管理

MCP Server是最近AI圈子中又一个新的热门话题。很多用户都通过结合大语言模型、MCP Server，实现了一些工具流的自动化，例如，你只需要给出文字指令，就可以让Blender自动化完成建模的工作。你有没有想过，利用MCP来让AI A…...

编程日记 2025/6/27 18:37:25

DFX架构详解：构建面向全生命周期的卓越设计体系

引言 在当今高度竞争的市场环境中，产品开发已不再是单纯的功能实现，而是需要从设计源头考虑制造效率、用户需求、成本控制、环境兼容性等多维目标。DFX（Design for X）架构作为一种系统化的设计方法论，正成为企业实现产…...

编程日记 2025/6/28 5:08:46

如何在 Vue 项目中使用 Vite 和 Cordova 动态加载 Layui 和 DTree

随着前端开发工具的不断进步，Vue 项目的构建工具也从 Webpack 升级到了 Vite。Vite 的快速构建和热更新功能使得开发体验大大提升。 本文将介绍如何在迁移至 Vite 后，动态加载 Layui 和 DTree 库，并兼容 Cordova 应用中的资源路径。 1. Vite …...

编程日记 2025/6/27 15:31:45

如何在 vue 渲染百万行数据，vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染

vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染；如何在 vue 渲染百万行数据；当在开发项目时，遇到需要流畅支持百万级数据的表格时， vxe-table 就可以非常合适了，不仅支持强大的功能，虚…...

编程日记 2025/6/28 5:53:46

el-select+el-tree实现下拉树形选择

主要实现el-select下使用树结构,支持筛选功能 封装的组件 composeTree.vue <template><div class"vl-tree"><el-select class"treeScroll" popper-class"treeScrollSep"v-model"selectedList"placeholder"请选择…...

编程日记 2025/6/27 14:06:05

JavaScript函数知识点总结

JavaScript函数是一种可重复使用的代码块，它接受输入值（参数）、执行特定任务，并返回输出值。 1. 声明函数 function greet(name) {return "Hello, " + name + "!"; }console.log(greet("Alice")); // 输出: Hello, Alice! console.log( t…...

编程日记 2025/6/29 9:50:51

SQL INSERT INTO 语句详解

SQL INSERT INTO 语句详解 引言 SQL&#xff08;Structured Query Language&#xff09;是数据库管理系统的标准语言&#xff0c;用于处理数据库中的数据。在SQL中&#xff0c;INSERT INTO 语句是用于向数据库表中插入新记录的重要命令。本文将详细介绍 INSERT INTO 语句的用…...

编程日记 2025/6/28 7:15:49

为什么可视化大屏越来越多应用3D元素呢？

现在可视化大屏应用3D元素越来越普及了&#xff0c;背后的原因是什么呢&#xff1f;3D元素相较于2D元素有什么优势&#xff1f;应用3D元素涉及到哪些技术呢&#xff1f;大象数据工场通过本文与大家分享一下。 一、3D元素普及的原因是什么&#xff1f; 可视化大屏应用中使用3D…...

编程日记 2025/6/28 7:16:18

Github Webhook 以及主动式

Github配置 GitHub 默认支持两种 Content-Type： application/json application/x-www-form-urlencoded 特别要注意 Content-Type 我们选择： application/json Flask代码 import os import shutil import subprocess from flask import Flask, request, jsonifyapp = Fla…...

编程日记 2025/6/28 3:25:14

MySQL的基础语法1（增删改查、DDL、DML、DQL和DCL）

目录 一、基本介绍 二、SQL通用语法 三、SQL分类(DDL、DML、DQL、DCL) 1.DDL 1.1数据库操作 1.2表操作 1.2.1表操作-查询创建 1.2.2表操作-数据类型 1&#xff09;数值类型 2&#xff09;字符串类型 3&#xff09;日期时间类型​编辑 4&#xff09;表操作-案例 1.2.3…...

编程日记 2025/6/29 11:24:44

基于 SpringBoot 的火车订票管理系统

收藏关注不迷路&#xff01;&#xff01; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff08;免费咨询指导选题&#xff09;&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;希望帮助更多…...

编程日记 2025/6/28 4:31:13

c#的反射和特性

在 C# 中&#xff0c;反射&#xff08;Reflection&#xff09;和特性&#xff08;Attributes&#xff09;是两个强大的功能&#xff0c;它们在运行时提供元编程能力&#xff0c;广泛用于框架开发、对象映射和动态行为扩展。以下是对它们的详细介绍&#xff0c;包括定义、用法、…...

编程日记 2025/6/27 13:11:30

MaxEnt物种分布建模全流程；R+ArcGIS+MaxEnt模型物种分布模拟、参数优化方法、结果分析制图与论文写作

融合R语言的MaxEnt模型具有以下具体优势&#xff1a; 数据处理高效便捷 &#x1f4ca;强大的数据预处理功能&#xff1a;R语言提供了丰富的数据处理工具&#xff0c;能够轻松完成数据清洗、筛选、转换等操作&#xff0c;为MaxEnt模型提供高质量的输入数据。 &#x1f310;自动…...

编程日记 2025/6/28 6:24:28

【AI插件开发】Notepad++插件开发实践：从基础交互到ScintillaCall集成

一、背景与目标 在文本编辑器领域&#xff0c;Notepad凭借其轻量级特性和强大的插件生态&#xff0c;成为开发者群体中的热门选择。作为基于Scintilla组件构建的编辑器&#xff08;Scintilla是开源的代码编辑控件&#xff0c;被Notepad、Geany等知名工具广泛采用&#xff09;&…...

编程日记 2025/6/28 7:08:42

TCP/IP协议的应用层与传输层

TCP/IP协议簇是互联网的核心通信框架&#xff0c;定义了数据如何在网络中封装、寻址、传输和路由&#xff08;确定数据包从源主机到目标主机的传输路径的过程&#xff09;。 应用层 直接面向用户和应用&#xff0c;负责实现网络服务的具体功能&#xff08;如网页浏览、文件传输…...

编程日记 2025/6/28 21:51:10

CentOS与Ubuntu命令对比指南：从软件包管理到系统配置

CentOS与Ubuntu命令对比指南 作为两大主流Linux发行版，**CentOS（基于RHEL）和Ubuntu（基于Debian）**在日常运维中常因命令差异引发混淆。本文通过关键场景对比，助您快速掌握两者的核心操作区别。 一、软件包管理：yum/dnf vs apt 操作CentOSUbuntu更新软件源yum check-upd…...

编程日记 2025/6/28 13:27:30

python-leetcode 61.N皇后

题目&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解…...

编程日记 2025/6/29 8:57:46

Scala 正则表达式

Scala 正则表达式 引言 正则表达式（Regular Expression）是一种强大的文本处理工具，在Scala编程语言中也有着广泛的应用。Scala正则表达式可以帮助开发者高效地进行字符串匹配、搜索、替换和解析等操作。本文将深入探讨Scala正则表达式的相关知识，包括语法、常用模式、匹配…...

编程日记 2025/6/28 7:14:17

【分布式】分布式限流方案解析

文章目录 固定窗口限流方案​实现方式​优点​缺点​ 滑动窗口限流方案​实现方式​优点​缺点​ 令牌桶限流方案​实现方式​优点​缺点​ 漏斗限流方案​实现方式​优点​缺点​ 在分布式系统蓬勃发展的当下&#xff0c;系统面临的流量挑战日益复杂。为确保系统在高并发场景下…...

编程日记 2025/6/28 21:35:36

Docker 拉取镜像部分成功部分失败？

&#x1f40b; Docker 拉取镜像部分成功部分失败&#xff1f;一次代理配置踩坑记录&#xff01; 最近在部署 Zitadel 身份认证平台的过程中&#xff0c;遇到一个看似“随机”的问题&#xff1a;Docker 有些镜像可以拉取&#xff0c;有些却一直超时失败。最终通过配置 Docker 守…...

编程日记 2025/6/28 21:50:15

Spring AI Alibaba 对话记忆使用

一、对话记忆 (ChatMemory)简介 1、对话记忆介绍 ”大模型的对话记忆”这一概念&#xff0c;根植于人工智能与自然语言处理领域&#xff0c;特别是针对具有深度学习能力的大型语言模型而言&#xff0c;它指的是模型在与用户进行交互式对话过程中&#xff0c;能够追踪、理解并利…...

编程日记 2025/6/28 21:42:50

Mysql从入门到精通day5————子查询精讲

本文主要讲述子查询的几种方法&#xff0c;读者注意体会它们的不同场合的适用情况及功能&#xff0c;本篇文章也融入了小编实践过程遇到的坑&#xff0c;希望读者不要再踩坑 一.带IN关键字的子查询 in关键字可以检测结果集中是否存在某个特定的值&#xff0c;检测成功则执行外…...

编程日记 2025/6/28 21:36:48

QScreen 捕获屏幕(截图)

一、QScreen核心能力解析 硬件信息获取 // 获取主屏幕对象 QScreen* primaryScreen QGuiApplication::primaryScreen();// 输出屏幕参数 qDebug() << "分辨率:" << primaryScreen->size(); qDebug() << "物理尺寸:" << primar…...

编程日记 2025/6/29 19:15:14

Skyeye 云智能制造办公系统 VUE 版本 v3.15.15 发布

Skyeye 云智能制造&#xff0c;采用 Springboot winUI 的低代码平台、移动端采用 UNI-APP。包含 30 多个应用模块、50 多种电子流程&#xff0c;CRM、PM、ERP、MES、ADM、EHR、笔记、知识库、项目、门店、商城、财务、多班次考勤、薪资、招聘、云售后、论坛、公告、问卷、报表…...

编程日记 2025/6/28 21:31:04

【最新】探索CFD的未来：从OpenFOAM到深度学习，全面解析计算流体力学的顶级资源与前沿技术

计算流体力学（CFD）作为现代工程与科学研究的核心工具，正以前所未有的速度迈向智能化与多物理场耦合的新时代。本文全面梳理了在线学习CFD的顶级资源，涵盖了从传统数值模拟到深度学习驱动的物理信息模型的广泛领域，旨在为研究者、工程师和学生提供一站式参考指南。内容分为…...

编程日记 2025/6/28 3:10:13

【QT5 网络编程示例】TCP 通信

文章目录 TCP 通信 TCP 通信 QT主要通过QTcpSocket 和 QTcpServer两个类实现服务器和客户端的TCP 通信。 QTcpSocket 是 Qt 提供的套接字类&#xff0c;看用于建立、管理和操作 TCP 连接。 常用方法 connectToHost(host, port)&#xff1a;连接到指定服务器。disconnectFro…...

编程日记 2025/6/28 5:06:30

QT五 文件系统,QFile,QfileInfo

总览 QIODevice&#xff1a;所有 I/O 设备类的父类&#xff0c;提供了字节块读写的通用操作以及基本接口&#xff1b;QFileDevice&#xff1a;Qt5新增加的类&#xff0c;提供了有关文件操作的通用实现。QFlie&#xff1a;访问本地文件或者嵌入资源&#xff1b;QTemporaryFile&a…...

编程日记 2025/6/28 6:00:05

OpenMCU(五)：STM32F103时钟树初始化分析

概述 本文主要描述了STM32F103初始化过程系统时钟的初始化,主要描述了系统时钟的初始化&#xff0c;AHB总线时钟&#xff0c;APB总线时钟等的初始化。 硬件板卡3d图 时钟树 STM32F103的时钟树&#xff0c;如下所示: 时钟源选择 从STM32F103的时钟树框图&#xff0c;我们可以…...

编程日记 2025/6/28 3:52:53

docker save如何迁移镜像更节省空间？

文章目录 方法一&#xff1a;使用docker save命令方法二&#xff1a;直接保存多个镜像到一个tar文件哪个方法更节省磁盘空间&#xff1f;空间效率对比实际测试示例其他优势结论 如何用脚本迁移加载镜像 迁移镜像时候&#xff0c;往往会碰到基础镜像相同的很多镜像需要迁移&…...

编程日记 2025/6/28 1:22:45

在 UniApp 编译小程序时出现 `:class` 不支持 `getStatusClass(device.deviceStatus)` 语法的报错

在 UniApp 编译小程序时出现 :class 不支持 getStatusClass(device.deviceStatus) 语法的报错&#xff0c;这是因为在非 H5 平台&#xff0c;v-bind:class&#xff08;:class 是其简写形式&#xff09;里直接使用方法调用这种动态计算类名的方式可能不被支持。下面为你提供几种…...

编程日记 2025/6/30 10:44:41

Python之贪心算法

Python实现贪心算法(Greedy Algorithm) 概念 贪心算法是一种在每一步选择中都采取当前状态下最优的选择&#xff0c;从而希望导致结果是全局最优的算法策略。 基本特点 局部最优选择&#xff1a;每一步都做出当前看起来最佳的选择不可回退&#xff1a;一旦做出选择&#xf…...

编程日记 2025/6/27 21:13:44

Javaweb后端AOP记录操作日志

日志记录表 提示词 切入点表达式&#xff0c;注解的方法 查询不用加上日志记录功能...

编程日记 2025/6/28 6:25:51

obsidian ios git同步

首先感谢几位博主的文章&#xff0c;我现在时间久了&#xff0c;未保存原文地址。以下是我自己的执行步骤总结。 应用商店安装 iSH 打开iSH&#xff0c;执行 apk update 安装下面软件&#xff0c;&#xff08;我觉得只安装第一个应该就行&#xff0c;下次测试&#xff09;。 …...

编程日记 2025/6/30 1:36:57

我的机器学习学习之路

学习python的初衷 • hi&#xff0c;今天给朋友们分享一下我是怎么从0基础开始学习机器学习的。 • 我是2023年9月开始下定决心要学python的&#xff0c;目的有两个&#xff0c;一是为了提升自己的技能和价值&#xff0c;二是将所学的知识应用到工作中去&#xff0c;提升工作…...

编程日记 2025/6/30 7:59:01

Python的ASGI Web 服务器之uvicorn

文章目录 什么是uvicornUvicorn 和 uWSGI 对比区别安装 Uvicorn使用示例 什么是uvicorn 官网https://www.uvicorn.org/ Uvicorn 是一个用于 Python 的 ASGI Web 服务器实现。 Until recently Python has lacked a minimal low-level server/application interface for async…...

编程日记 2025/6/30 4:16:27

Spring Boot分布式项目实战：装饰模式的正确打开方式

我在最近参与的物流中台项目中&#xff0c;面对复杂的分布式服务调用场景时&#xff0c;发现装饰模式&#xff08;Decorator Pattern&#xff09;竟成为提升系统扩展性的秘密武器。当某个基础服务接口需要同时支持缓存、日志、限流等多种能力时&#xff0c;传统的继承方式已难以…...

编程日记 2025/6/28 3:21:00

基于WebSocket的金融数据实时推送系统架构设计对接多国金融数据API

基于WebSocket的金融数据实时推送系统架构设计 ——高可用、低延迟与全球化数据支持的技术实践 一、实时数据推送的技术演进 在证券交易、外汇监控、量化策略等场景中&#xff0c;毫秒级延迟可能带来完全不同的业务结果。早期基于HTTP轮询的方案存在三大核心问题&#xff1a…...

编程日记 2025/6/28 1:22:48

Java虚拟机JVM知识点(已完结)

JVM内存模型 介绍下内存模型 根据JDK8的规范&#xff0c;我们的JVM内存模型可以拆分为&#xff1a;程序计数器、Java虚拟机栈、堆、元空间、本地方法栈&#xff0c;还有一部分叫直接内存&#xff0c;属于操作系统的本地内存&#xff0c;也是可以直接操作的。 详细解释一下 程…...

编程日记 2025/6/28 4:28:51

ffuf：一款高效灵活的Web模糊测试利器

在网络安全领域&#xff0c;模糊测试&#xff08;Fuzzing&#xff09;是一种强大的技术&#xff0c;用于发现系统中的隐藏功能、潜在漏洞或未公开资源。而在Web渗透测试中&#xff0c;ffuf&#xff08;Fast Fuzzing Tool&#xff09;凭借其高效性、灵活性和强大的自定义能力&am…...

编程日记 2025/6/30 7:59:01

深入理解二叉树、B树与B+树：原理、应用与实现

文章目录 引言一、二叉树&#xff1a;基础而强大的结构基本概念特性分析Java实现应用场景 二、B树&#xff1a;适合外存的多路平衡树基本概念关键特性查询流程示例Java简化实现典型应用 三、B树&#xff1a;数据库索引的首选核心改进优势分析范围查询示例Java简化实现实际应用 …...

编程日记 2025/6/28 4:11:22

NLP高频面试题（二十八）——Reward model是如何训练的，怎么训练一个比较好的Reward model

在强化学习领域&#xff0c;**奖励模型&#xff08;Reward Model&#xff09;是关键组件之一&#xff0c;旨在通过预测特定行为或输出的奖励值&#xff0c;指导智能体的学习方向。特别是在基于人类反馈的强化学习&#xff08;RLHF&#xff09;**中&#xff0c;奖励模型通过整合…...

编程日记 2025/6/28 1:22:47

基础算法篇（3）（蓝桥杯常考点）-图论

前言 这期是蓝桥杯常考点的最后一章了&#xff0c;其中的dijkstra算法更是蓝桥杯中的高频考点 图的基本相关概念 有向图和无向图 自环和重边 稠密图和稀疏图 对于不带权的图&#xff0c;一条路径的路径长度是指该路径上各边权值的总和 对于带权的图&#xff0c;一条路径长度时…...

编程日记 2025/6/28 6:42:34

【力扣hot100题】（017）矩阵置零

还是挺简单的&#xff0c;使用哈希表记录需要置换的行列即可&#xff0c;这样就可以避免重复节省时间。 class Solution { public:void setZeroes(vector<vector<int>>& matrix) {unordered_set<int> row;unordered_set<int> line;for(int i0;i&l…...

编程日记 2025/6/28 7:03:11

量子退火与机器学习（2）：少量实验即可找到新材料，黑盒优化➕量子退火

使用量子退火和因子分解机设计新材料 这篇文章是东京大学的一位博士生的毕业论文中的主要贡献。 结合了黑盒优化和量子退火&#xff0c;是融合的非常好的一篇文章&#xff0c;在此分享给大家。 https://journals.aps.org/prresearch/abstract/10.1103/PhysRevResearch.2.0133…...

编程日记 2025/6/28 5:22:10

Ubuntu 系统上完全卸载 CasaOS

以下是在 Ubuntu 系统上完全卸载 CasaOS 的详细步骤 一.卸载验证 二.卸载步骤 1.停止并禁用 CasaOS 服务 # 停止 CasaOS 核心服务 sudo systemctl stop casaos.service# 禁用开机自启 sudo systemctl disable casaos.service# 确认服务状态&#xff08;应显示 inactive&…...

编程日记 2025/6/28 4:26:03

Flutter敏感词过滤实战：基于AC自动机的高效解决方案

Flutter敏感词过滤实战&#xff1a;基于AC自动机的高效解决方案 在社交、直播、论坛等UGC场景中&#xff0c;敏感词过滤是保障平台安全的关键防线。本文将深入解析基于AC自动机的Flutter敏感词过滤实现方案&#xff0c;通过原理剖析实战代码性能对比&#xff0c;带你打造毫秒级…...

编程日记 2025/6/27 19:40:27