socket-egret.WebSocket

以下建立一個 websocket server, 並與 egret.webSocket 串接

1. Websocket Server 是一個簡單的 websocket server, 沒有任何其他的關聯的套件, 只需要 python 標準的 sdk. 由 github 下載原始檔 zip 後, 將 server.py 以及 websocket_server 目錄複製到桌面. server.py 可以看我們連結的 port 是 9001 (可自行設定), 我們直接跑 server

2. 撰寫程式碼

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 建立 websocket (egret.WebSocket 需要建立專案時勾選 socket 網路通訊庫, 或事後加入通訊庫亦可)
        const socket = new egret.WebSocket();
        // 有些服務器不支援 Binary Frame 可用 TYPE_STRING (本範例 server 不支援 Binary Frame)
        socket.type = egret.WebSocket.TYPE_STRING;
        // 每當資料從服務器回傳時觸發事件
        socket.addEventListener(egret.ProgressEvent.SOCKET_DATA, e => {
            // 顯示回傳資料
            console.log(socket.readUTF());
        }, this);
        // CONNECT 成功只會執行一次函式就不用了所以用 once 註冊事件
        socket.once(egret.Event.CONNECT, () => console.log('connect 成功！'), this);
        // 連線至 localhost server
        socket.connect('localhost', 9001);

        // 建立發送資料按鈕
        const btn = new eui.Button;
        btn.label = '送出資料';
        btn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            // 還沒連線成功則返回
            if (!socket.connected) return;
            // 送出資料到 localhost server
            socket.writeUTF('XD')
        }, this);
        // 按鈕加至場景
        this.addChild(btn);
    }

}

egret.webSocket 串接結果圖如下