すくまりゲームズ

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

投稿者: squmari | 2019年4月17日

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のインスタンス化 [crayon-5cc11714a81c47… 続きを読む »

【Egret Engine】簡単に使えるUnityライクなテンプレートの作成

投稿者: squmari | 2019年3月30日

0件のコメント

はじめに H5ゲームはUnityと比べてコーディングが難しいです。そこで、よく使う機能をまとめたEgret Engineのテンプレートを作成しました。 GitHubにも挙げておきますので、よかったら使ってください。 Eg… 続きを読む »

【p2.js】衝突したオブジェクトのHPを個別に減らす方法

投稿者: squmari | 2019年3月30日

0件のコメント

p2.js物理エンジン関連記事【p2.js】p2.js 物理エンジンを使用した自然落下【p2.js】p2.js 物理エンジンを使用して1000個の玉を描画する方法【p2.js】クラス分けで拡張性が向上したp2.js… 続きを読む »

【Egret Engine】1000個作っても大丈夫！p2.js物理ボールの生成方法

投稿者: squmari | 2019年2月7日

1件のコメント

はじめに過去記事のように、何度か p2.js 物理エンジンを使用したボールの生成を行ってきました。これらのコードをより軽く、拡張性の高いコードを作成したので公開します。過去記事【EgretEngine】p2.js… 続きを読む »

【Egret Engine】メソッドを繰り返す方法「Timer」「StartTick」「Enter_Frame」

投稿者: squmari | 2019年1月30日

0件のコメント

はじめにメソッドを一定間隔で繰り返す方法を紹介します。・一定時間ごとに繰り返す→「Timer」・固定フレームで繰り返す→「StartTick」・フレームレートで繰り返す→「EnterFrame」 &… 続きを読む »

【Egret Engine】DragonBones を使用したアニメーションの作成と読み込み

投稿者: squmari | 2019年1月20日

0件のコメント

はじめに DragonBonesエディタを使用して、簡単なアニメーションの作成と読み込みを行います。目次準備 DragonBonesを使用したアニメーションの作成 Animationの準備… 続きを読む »

【Egret Engine】DragonBones の基本操作と使い方

投稿者: squmari | 2019年1月15日

1件のコメント

はじめに 2Dアニメーション作成エディタのDragonBonesの基本的な使い方を紹介します。目次準備 DragonBonesを起動プロジェクトを起動エディタウィンドウの… 続きを読む »

【Egret Engine】p2.js 物理エンジンを使用した衝突判定

投稿者: squmari | 2019年1月12日

0件のコメント

はじめに p2.jsを物理エンジンを使用した衝突判定を行います。目次準備 p2.js 物理エンジンを使用した衝突判定 collisionGroupとcollisionMask… 続きを読む »

【Unity】enum型から数字や文字列への変換やenum型への変換方法

投稿者: squmari | 2019年1月5日

0件のコメント

はじめに列挙型enumの基本的な使い方、数字や文字列への変換、enum型への変換方法を紹介します。目次 enum型から数字や文字列へ変換する方法数字や文字列からenum型へ… 続きを読む »

【Egret Engine】setIntervalを使用したメソッドの連続実行

投稿者: squmari | 2019年1月4日

0件のコメント

はじめにこの記事ではJavaScript でおなじみの関数「setInterval」を使用して、メソッドを連続実行してみます。目次「setInterval」を使用したメソッドの連続実行「clearI… 続きを読む »