AWTK-WEB 快速入門(6) - JS WebSocket 應(yīng)用程序

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

用AWTKDesigner新建一個(gè)應(yīng)用程序

先安裝 AWTK Designer

1.新建應(yīng)用程序

這里假設(shè)應(yīng)用程序的名稱為 AwtkApplicationJSWebSocket，后面會(huì)用到，如果使用其它名稱，后面要做相應(yīng)修改。

2. 編寫代碼

2.1刪除 src 目錄下全部文件（留著也可以，只是看起來比較亂），在 src 目錄創(chuàng)建 js 目錄。

2.2在 src/js 下創(chuàng)建 application.js ，內(nèi)容如下：

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

2.3 在 src/js 下創(chuàng)建 home_page.js，內(nèi)容如下：

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. 在AWTKDesigner中，執(zhí)行“打包”“編譯”“模擬運(yùn)行”

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

點(diǎn)擊“關(guān)閉”按鈕，退出應(yīng)用程序。

編寫配置文件

具體格式請(qǐng)參考，特殊平臺(tái)編譯配置

這里給出一個(gè)例子，可以在此基礎(chǔ)上進(jìn)行修改，該文件位于：

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 應(yīng)用程序

進(jìn)入 awtk-web 目錄，不同平臺(tái)使用不同的腳本編譯：

• Windows平臺(tái)

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

• Linux平臺(tái)

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

• MacOS平臺(tái)

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

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

運(yùn)行

1. 正常啟動(dòng)

./start_web.sh

2. 調(diào)試啟動(dòng)

start_web_debug.sh

3. 啟動(dòng)websocket服務(wù)器（先安裝nodejs)

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

node websocket_echo_server.js

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