AWTK-WEB 快速入門(5) - C 語言 WebSocket 應用程序

導讀

WebSocket 可以實現(xiàn)雙向通信，適合實時通信場景。本文介紹一下使用 C 語言開發(fā) AWTK-WEB 應用程序，并用 WebSocket 與服務器通訊。

用?AWTK?Designer?新建一個應用程序

先安裝 AWTK Designer：

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

1.?新建應用程序

這里假設應用程序的名稱為 AwtkApplicationCWebSocket，后面會用到，如果使用其它名稱，后面要做相應修改。

2. 編寫代碼

2.1 用 VSCode 打開目錄 AwtkApplicationCWebSocket，并打開文件 src/pages/home_page.c。

使用其它文本編輯器或 IDE 也可以，推薦使用 VSCode，并開啟 Copilot，將大幅提升開發(fā)效率。

VSCode下載地址：https://code.visualstudio.com

2.2 添加事件處理函數(shù)?？梢詤⒖枷旅娴拇a：

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] != '') {      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?中，執(zhí)行“打包”?“編譯”?“模擬運行”

正常情況下可以看到如下界面：

點擊“關閉”按鈕，退出應用程序。

編寫配置文件

具體格式請參考，特殊平臺編譯配置：

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

請根據(jù)應用程序所在目錄，修改配置文件的路徑。

運行

1. 正常啟動

./start_web.sh

2. 調(diào)試啟動

start_web_debug.sh

3. 啟動?websocket?服務器（先安裝?nodejs)

進入 awtk-web 目錄下的 tools/websocket，執(zhí)行：

node websocket_echo_server.js

4. 用瀏覽器打開URL：http://localhost:8080/AwtkApplicationCWebSocket

	圖像顯示應用芯片ZMP110X
硬件高集成化 豐富的多媒體特性 廣泛的應用場景