【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']);
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

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のインスタンス化
データの送信
データの受信
1. 参考
2. 関連記事はこちら

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);
}

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 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']);
}