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

用AWTKDesigner新建一個應用程序

先安裝 AWTK Designer

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. 在AWTKDesigner中，執行“打包”“編譯”“模擬運行”

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

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

編寫配置文件

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

這里給出一個例子，可以在此基礎上進行修改，該文件位于：

examples/AwtkApplicationJSWebSocket/build.json

{ "name": "AwtkApplicationJSWebSocketWebSocket", "version": "1.0", "app_type":"js", "author": "[email protected]", "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.sh

2. 調試啟動

start_web_debug.sh

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

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

node websocket_echo_server.js

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