AWTK-WEB快速入门(5)-C语言WebSocket应用程序

原创 ZLG致远电子 2025-02-19 11:32

导读

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


用 AWTK Designer 新建一个应用程序

先安装 AWTK Designer:

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

1. 新建应用程序

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

app_websocket.png

2. 编写代码

2.1 用 VSCode 打开目录 AwtkApplicationCWebSocket,并打开文件 src/pages/home_page.c。

使用其它文本编辑器或 IDE 也可以,推荐使用 VSCode,并开启 Copilot,将大幅提升开发效率。

VSCode下载地址:https://code.visualstudio.com

2.2 添加事件处理函数。可以参考下面的代码:
typedef struct _home_page_t {  widget_t* send;  widget_t* send_text;  widget_t* recv_text;  EMSCRIPTEN_WEBSOCKET_T sock;} home_page_t;
static home_page_t* home_page_create(widget_t* win) { home_page_t* home_page = TKMEM_ZALLOC(home_page_t);
assert(win != NULL); assert(home_page != NULL); if (home_page != NULL) { home_page->send = widget_lookup(win, "send", TRUE); assert(home_page->send != NULL); home_page->send_text = widget_lookup(win, "send_text", TRUE); assert(home_page->send_text != NULL); home_page->recv_text = widget_lookup(win, "recv_text", TRUE); assert(home_page->recv_text != NULL); }
return home_page;}
static ret_t home_page_destroy(home_page_t* home_page) { if (home_page != NULL) { emscripten_websocket_close(home_page->sock, 0, 0); TKMEM_FREE(home_page); }
return RET_OK;}
bool WebSocketOpen(int eventType, const EmscriptenWebSocketOpenEvent* e, void* userData) { home_page_t* home_page = (home_page_t*)userData; return_value_if_fail(home_page != NULL, FALSE);
widget_set_text_utf8(home_page->recv_text, "opened");
/* emscripten_websocket_send_utf8_text(e->socket, "hello on the other side"); char data[] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10}; emscripten_websocket_send_binary(e->socket, data, sizeof(data)); */
return 0;}
bool WebSocketClose(int eventType, const EmscriptenWebSocketCloseEvent* e, void* userData) { home_page_t* home_page = (home_page_t*)userData; return_value_if_fail(home_page != NULL, FALSE);
emscripten_websocket_delete(e->socket); widget_set_text_utf8(home_page->recv_text, "closed"); home_page->sock = 0;
return 0;}
bool WebSocketError(int eventType, const EmscriptenWebSocketErrorEvent* e, void* userData) { home_page_t* home_page = (home_page_t*)userData; return_value_if_fail(home_page != NULL, FALSE);
widget_set_text_utf8(home_page->recv_text, "error");
return 0;}
bool WebSocketMessage(int eventType, const EmscriptenWebSocketMessageEvent* e, void* userData) { home_page_t* home_page = (home_page_t*)userData; return_value_if_fail(home_page != NULL, FALSE);
if (e->isText) { widget_set_text_utf8(home_page->recv_text, (const char*)(e->data)); }
return 0;}
static ret_t on_send(void* ctx, event_t* e) { home_page_t* home_page = (home_page_t*)ctx; return_value_if_fail(home_page != NULL, RET_BAD_PARAMS);
if (home_page->sock > 0) { char text[1024]; widget_get_text_utf8(home_page->send_text, text, sizeof(text) - 1); if (text[0] != '\0') { emscripten_websocket_send_utf8_text(home_page->sock, text); } }
return RET_OK;}
EMSCRIPTEN_WEBSOCKET_T create_socket(void* user_data, const char* url) { EmscriptenWebSocketCreateAttributes attr; emscripten_websocket_init_create_attributes(&attr);
attr.url = url; attr.protocols = "binary,base64"; EMSCRIPTEN_WEBSOCKET_T socket = emscripten_websocket_new(&attr);
emscripten_websocket_set_onopen_callback(socket, user_data, WebSocketOpen); emscripten_websocket_set_onclose_callback(socket, user_data, WebSocketClose); emscripten_websocket_set_onerror_callback(socket, user_data, WebSocketError); emscripten_websocket_set_onmessage_callback(socket, user_data, WebSocketMessage);
return socket;}
/** * 初始化窗口 */ret_t home_page_init(widget_t* win, void* ctx) { (void)ctx; const char* url = "ws://localhost:8090/"; home_page_t* home_page = home_page_create(win); return_value_if_fail(win != NULL && home_page != NULL, RET_BAD_PARAMS);
assert(emscripten_websocket_is_supported());
home_page->sock = create_socket(home_page, url); widget_on(home_page->send, EVT_CLICK, on_send, home_page);
return RET_OK;}

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

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

正常情况下可以看到如下界面:
app_websocket_ui.png
点击“关闭”按钮,退出应用程序。

编写配置文件

具体格式请参考,特殊平台编译配置:

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

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

examples/AwtkApplicationCWebSocket/build.json
{  "name": "AwtkApplicationCWebSocket",  "version": "1.0",  "assets": "res/assets",  "vendor": "zlgopen",  "app_name": "org.zlgopen.AwtkApplicationCWebSocket",  "author": "xianjimli@hotmail.com",  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",  "themes":["default"],  "sources": [     "src/*.c",     "src/common/*.c",     "src/pages/*.c",     "src/*.h",     "src/common/*.h",     "src/pages/*.h"  ],  "web": {    "app_type": "c",    "assets": "design",    "config": {      "fontScale": "0.8",      "defaultFont": "sans"    }  }


编译 WEB 应用程序

进入 awtk-web 目录,不同平台使用不同的脚本编译:
  • Windows 平台
./build_win32.sh examples/AwtkApplicationCWebSocket/build.json release
  • Linux 平台
./build_linux.sh examples/AwtkApplicationCWebSocket/build.json release
  • MacOS 平台
./build_mac.sh examples/AwtkApplicationCWebSocket/build.json release

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


运行

1. 正常启动
./start_web.sh
2. 调试启动
start_web_debug.sh
3. 启动 websocket 服务器(先安装 nodejs)

进入 awtk-web 目录下的 tools/websocket,执行:

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

app_websocket_ui1.png


图像显示应用芯片ZMP110X

  • 硬件高集成化

  • 丰富的多媒体特性

  • 广泛的应用场景

长按购买


视频推荐



评论 (0)
  • 在智能语音产品的开发过程中,麦克风阵列的选型直接决定了用户体验的优劣。广州唯创电子提供的单麦克风与双麦克风解决方案,为不同场景下的语音交互需求提供了灵活选择。本文将深入解析两种方案的性能差异、适用场景及工程实现要点,为开发者提供系统化的设计决策依据。一、基础参数对比分析维度单麦克风方案双麦克风方案BOM成本¥1.2-2.5元¥4.8-6.5元信噪比(1m)58-62dB65-68dB拾音角度全向360°波束成形±30°功耗8mW@3.3V15mW@3.3V典型响应延迟120ms80ms二、技术原
    广州唯创电子 2025-03-27 09:23 162浏览
  • 在电子设计中,电磁兼容性(EMC)是确保设备既能抵御外部电磁干扰(EMI),又不会对自身或周围环境产生过量电磁辐射的关键。电容器、电感和磁珠作为三大核心元件,通过不同的机制协同作用,有效抑制电磁干扰。以下是其原理和应用场景的详细解析:1. 电容器:高频噪声的“吸尘器”作用原理:电容器通过“通高频、阻低频”的特性,为高频噪声提供低阻抗路径到地,形成滤波效果。例如,在电源和地之间并联电容,可吸收电源中的高频纹波和瞬态干扰。关键应用场景:电源去耦:在IC电源引脚附近放置0.1μF陶瓷电容,滤除数字电路
    时源芯微 2025-03-27 11:19 160浏览
  • 在嵌入式语音系统的开发过程中,广州唯创电子推出的WT588系列语音芯片凭借其优异的音质表现和灵活的编程特性,广泛应用于智能终端、工业控制、消费电子等领域。作为该系列芯片的关键状态指示信号,BUSY引脚的设计处理直接影响着系统交互的可靠性和功能拓展性。本文将从电路原理、应用场景、设计策略三个维度,深入解析BUSY引脚的技术特性及其工程实践要点。一、BUSY引脚工作原理与信号特性1.1 电气参数电平标准:输出3.3V TTL电平(与VDD同源)驱动能力:典型值±8mA(可直接驱动LED)响应延迟:语
    广州唯创电子 2025-03-26 09:26 206浏览
  • 六西格玛首先是作为一个量度质量水平的指标,它代表了近乎完美的质量的水平。如果你每天都吃一个苹果,有一间水果店的老板跟你说,他们所卖的苹果,质量达到六西格玛水平,换言之,他们每卖一百万个苹果,只会有3.4个是坏的。你算了一下,发现你如果要从这个店里买到一个坏苹果,需要805年。你会还会选择其他店吗?首先发明六西格玛这个词的人——比尔·史密斯(Bill Smith)他是摩托罗拉(Motorloa)的工程师,在追求这个近乎完美的质量水平的时候,发明了一套方法模型,开始时是MAIC,后来慢慢演变成DMA
    优思学院 2025-03-27 11:47 151浏览
  • ​2025年3月27日​,贞光科技授权代理品牌紫光同芯正式发布新一代汽车安全芯片T97-415E。作为T97-315E的迭代升级产品,该芯片以大容量存储、全球化合规认证、双SPI接口协同为核心突破,直击智能网联汽车"多场景安全并行"与"出口合规"两大行业痛点,助力车企抢占智能驾驶与全球化市场双赛道。行业趋势锚定:三大升级回应智能化浪潮1. 大容量存储:破解车联网多任务瓶颈随着​车机功能泛在化​(数字钥匙、OTA、T-BOX等安全服务集成),传统安全芯片面临存储资源挤占难题。T97-415E创新性
    贞光科技 2025-03-27 13:50 148浏览
  • 案例概况在丹麦哥本哈根,西门子工程师们成功完成了一项高安全设施的数据集成项目。他们利用宏集Cogent DataHub软件,将高安全设施内的设备和仪器与远程监控位置连接起来,让技术人员能够在不违反安全规定、不引入未经授权人员的情况下,远程操作所需设备。突破OPC 服务器的远程连接难题该项目最初看似是一个常规的 OPC 应用:目标是将高安全性设施中的冷水机(chiller)设备及其 OPC DA 服务器,与远程监控站的两套 SCADA 系统(作为 OPC DA 客户端)连接起来。然而,在实际实施过
    宏集科技 2025-03-27 13:20 109浏览
  • 文/陈昊编辑/cc孙聪颖‍2025 年,作为中国实施制造强国战略第一个十年计划的关键里程碑,被赋予了极为重大的意义。两会政府工作报告清晰且坚定地指出,要全力加速新质生产力的发展进程,推动传统产业全方位向高端化、智能化与绿色化转型。基于此,有代表敏锐提议,中国制造应从前沿技术的应用切入,逐步拓展至产业生态的构建,最终延伸到提升用户体验的维度,打出独树一帜、具有鲜明特色的发展牌。正是在这样至关重要的时代背景之下,于 AWE 2025(中国家电及消费电子博览会)这一备受瞩目的舞台上,高端厨房的中国方案
    华尔街科技眼 2025-03-25 16:10 85浏览
  • WT588F02B是广州唯创电子推出的一款高性能语音芯片,广泛应用于智能家电、安防设备、玩具等领域。然而,在实际开发中,用户可能会遇到烧录失败的问题,导致项目进度受阻。本文将从下载连线、文件容量、线路长度三大核心因素出发,深入分析烧录失败的原因并提供系统化的解决方案。一、检查下载器与芯片的物理连接问题表现烧录时提示"连接超时"或"设备未响应",或烧录进度条卡顿后报错。原因解析接口错位:WT588F02B采用SPI/UART双模通信,若下载器引脚定义与芯片引脚未严格对应(如TXD/RXD交叉错误)
    广州唯创电子 2025-03-26 09:05 146浏览
  • 汽车导航系统市场及应用环境参照调研机构GII的研究报告中的市场预测,全球汽车导航系统市场预计将于 2030年达到472亿美元的市场规模,而2024年至2030年的年复合成长率则为可观的6.7%。汽车导航系统无疑已成为智能汽车不可或缺的重要功能之一。随着人们在日常生活中对汽车导航功能的日渐依赖,一旦出现定位不准确或地图错误等问题,就可能导致车主开错路线,平白浪费更多行车时间,不仅造成行车不便,甚或可能引发交通事故的发生。有鉴于此,如果想要提供消费者完善的使用者体验,在车辆开发阶段便针对汽车导航功能
    百佳泰测试实验室 2025-03-27 14:51 188浏览
  • 长期以来,智能家居对于大众家庭而言就像空中楼阁一般,华而不实,更有甚者,还将智能家居认定为资本家的营销游戏。商家们举着“智慧家居、智慧办公”的口号,将原本价格亲民、能用几十年的家电器具包装成为了高档商品,而消费者们最终得到的却是家居设备之间缺乏互操作性、不同品牌生态之间互不兼容的碎片化体验。这种早期的生态割裂现象致使消费者们对智能家居兴趣缺失,也造就了“智能家居无用论”的刻板印象。然而,自Matter协议发布之后,“命运的齿轮”开始转动,智能家居中的生态割裂现象与品牌生态之间的隔阂正被基于IP架
    华普微HOPERF 2025-03-27 09:46 109浏览
  • 在当今竞争激烈的工业环境中,效率和响应速度已成为企业制胜的关键。为了满足这一需求,我们隆重推出宏集Panorama COOX,这是Panorama Suite中首款集成的制造执行系统(MES)产品。这一创新产品将Panorama平台升级为全面的工业4.0解决方案,融合了工业SCADA和MES技术的双重优势,帮助企业实现生产效率和运营能力的全面提升。深度融合SCADA与MES,开启工业新纪元宏集Panorama COOX的诞生,源于我们对创新和卓越运营的不懈追求。通过战略性收购法国知名MES领域专
    宏集科技 2025-03-27 13:22 189浏览
我要评论
0
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦