すくまりのメモ帳すくまりのメモ帳
← 記事一覧に戻る

【Egret Engine】WebSocketを使ったJSONの送受信

2019-04-17
【Egret Engine】WebSocketを使ったJSONの送受信
Main.ts
class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
        Game.init(this.stage);
        
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    static I : Game;
    static mainStage: egret.Stage;
    static height: number;
    static width: number;
 
    static init(stage:egret.Stage) {
 
        Game.I = this;
        Game.height = egret.MainContext.instance.stage.stageHeight;
        Game.width  = egret.MainContext.instance.stage.stageWidth;
        Game.mainStage = stage;       
        
        /* メソッドなどを記入*/
        new GameStage();
        new Network();
 
    }
 
 
}
 
class GameStage extends egret.DisplayObjectContainer{
 
    static display : egret.DisplayObjectContainer = null;
 
    constructor(){
        super();
        this.initial();
    }
 
    initial(){
        GameStage.display = new egret.DisplayObjectContainer();
        Game.mainStage.addChild(GameStage.display);
    }
 
 
}
 
class GameObject extends egret.DisplayObjectContainer{
 
    object: egret.DisplayObjectContainer = null;
    static objects: GameObject[] = [];
 
    constructor(){
        super();
        this.initial();
    }
 
    initial(){
        this.object = new egret.DisplayObjectContainer();
        GameStage.display.addChild(this.object);
        GameObject.objects.push(this);
    }
 
}
 
class Network extends egret.DisplayObjectContainer{
    
   public constructor() {
        super();
        this.initWebSocket();
    }
 
    private socket:egret.WebSocket;
 
    private initWebSocket():void {
        this.socket = new egret.WebSocket();
        this.socket.type = egret.WebSocket.TYPE_BINARY;
        this.socket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
        this.socket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
        this.socket.addEventListener(egret.Event.CLOSE, this.onSocketClose, this);
        this.socket.addEventListener(egret.IOErrorEvent.IO_ERROR, this.onSocketError, this);
        this.socket.connect("echo.websocket.org", 80);
    }
 
    private sendData():void {
 
        let test:egret.ByteArray = new egret.ByteArray();
        let object = {
                        "number"    : 1, 
                        "string"    : "js-primer",
                        "boolean"   : true,
                        "null"      : null,
                        "array"     : [1, 2, 3]
                     };
        let jObject : string = JSON.stringify(object);
        test.writeUTF(jObject);
        this.socket.writeBytes(test, 0, test.bytesAvailable);
    }
 
    private onSocketOpen():void {
        console.log("WebSocketOpen");
        this.sendData();
    }
 
    private onSocketClose():void {
        console.log("WebSocketClose");
    }
 
    private onSocketError():void {
        console.log("WebSocketError");
    }
 
    private onReceiveMessage(e:egret.Event):void {
 
        let test:egret.ByteArray = new egret.ByteArray();
        this.socket.readBytes(test);
        let jObject:string = test.readUTF();
        let object = JSON.parse(jObject);
        console.log(object);
        console.log(object['number']);
    }
 
}

WebSocketのインスタンス化

private socket:egret.WebSocket;
 
private initWebSocket():void {
    this.socket = new egret.WebSocket();
    this.socket.type = egret.WebSocket.TYPE_BINARY;
    this.socket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
    this.socket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
    this.socket.addEventListener(egret.Event.CLOSE, this.onSocketClose, this);
    this.socket.addEventListener(egret.IOErrorEvent.IO_ERROR, this.onSocketError, this);
    this.socket.connect("echo.websocket.org", 80);
}

socket.typeでbinary型かstring型を選択できます。

addEventListener(egret.ProgressEvent.SOCKET_DATA)でサーバーのデータを受信します。

socket.connect("echo.websocket.org", 80);はWebSocketのテストサーバーです。

データの送信

private sendData():void {
 
    let test:egret.ByteArray = new egret.ByteArray();
    let object = {
                    "number"    : 1, 
                    "string"    : "js-primer",
                    "boolean"   : true,
                    "null"      : null,
                    "array"     : [1, 2, 3]
                    };
    let jObject : string = JSON.stringify(object);
    test.writeUTF(jObject);
    this.socket.writeBytes(test, 0, test.bytesAvailable);
}

データの受信

private onReceiveMessage(e:egret.Event):void {
 
    let test:egret.ByteArray = new egret.ByteArray();
    this.socket.readBytes(test);
    let jObject:string = test.readUTF();
    let object = JSON.parse(jObject);
    console.log(object);
    console.log(object['number']);
}

参考

Egret Developer WebSocket
Egret Developer API WebSocket
Egret Developer API ByteArray

HTML5 Egret Engine 入門へ戻る