CocosCreator で http と WebSocket を使用する方法

CocosCreator で http と WebSocket を使用する方法

CocosCreator バージョン 2.3.4

1. HTTPGET

Get メソッドでは、クライアントはローカル アドレス ポート 3000 を要求し、パラメータ url と name を渡します。サーバーはそれを受信すると、name パラメータを返します。

Cocos クライアント:

//アクセスアドレス let url = "http://127.0.0.1:3000/?url=123&name=321";
//新しいHttpを作成する
xhr = new XMLHttpRequest();
//データを受信する xhr.onreadystatechange = function () {
    xhr.readyState == 4 の場合、xhr.status >= 200 の場合、xhr.status < 400 の場合
        var レスポンス = xhr.responseText;
        console.log(応答);
    }
};
//エラー処理 xhr.onerror = function(evt){
    コンソールログ(evt);
}
// リクエストを初期化、GET メソッド、true 非同期リクエスト xhr.open("GET", url, true);
//リクエストを送信 xhr.send();

テストを容易にするために、Node.js を使用してローカル マシン上にシンプルなサーバーを構築します。アクセスを受信すると、リクエスト パラメータの名前値が返されます。

Nodejs サーバー:

var app = require('express')(); 
var http = require('http').Server(app);  
 
 
app.get('/', 関数(req, res){ 
    // ドメイン間を移動できるドメイン名を設定します。* は、任意のドメイン名がドメイン間を移動できることを表します。res.header("Access-Control-Allow-Origin","*");
    // 許可されるヘッダー タイプ res.header("Access-Control-Allow-Headers","content-type");
    //クロスドメイン許可リクエストメソッドres.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    res.send(要求クエリ名); 
}); 
   
http.listen(3000, 関数(){ 
    console.log('*:3000 でリッスンしています'); 
});

nodejs サーバーを実行し、cocos コードを実行します。

console.log(response); //出力は321

2. HTTP POST

クライアントはパラメータ名を使用してサーバーに要求し、サーバーはそれを受信した後に名前を返します。

Cocos クライアント:

url = "http://127.0.0.1:3000/" とします。
xhr = new XMLHttpRequest();
 
xhr.onreadystatechange = 関数 () {
    xhr.readyState == 4 の場合、xhr.status >= 200 の場合、xhr.status < 400 の場合
        var レスポンス = xhr.responseText;
        console.log(応答);
    }
};
xhr.onerror = 関数(evt){
    コンソールログ(evt);
}
xhr.open("POST", url, true);
xhr.setRequestHeader("コンテンツタイプ", "application/x-www-form-urlencoded");
xhr.send("名前=123");

Nodejs サーバー:

var app = require('express')(); 
var http = require('http').Server(app);  
var クエリ文字列 = require('クエリ文字列');
 
 
app.post('/', 関数(req, res){ 
    // ドメイン間を移動できるドメイン名を設定します。* は、任意のドメイン名がドメイン間を移動できることを表します。res.header("Access-Control-Allow-Origin","*");
    // 許可されるヘッダー タイプ res.header("Access-Control-Allow-Headers","content-type");
    //クロスドメイン許可リクエストメソッドres.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
     
    var 本文 = "";
     
    req.on('data', 関数(チャンク) {
        body += chunk; // 必ず += を使用してください。body=chunk の場合、favicon.ico が要求されるため、body は {} と等しくなります。
        console.log("チャンク:",チャンク);
    });
     
    req.on('end', 関数() {
        本文 = クエリ文字列.parse(本文);
        console.log("本文:",本文);
        res.send(本文.名前);
    });
}); 
   
http.listen(3000, 関数(){ 
    console.log('*:3000 でリッスンしています'); 
});

Cocos出力

console.log(応答); //出力123

ウェブソケット

Cocos クライアントコード:

ローカルサーバー127.0.0.1:8001に接続し、接続が成功した後に文字列を送信し、受信した文字列を出力します。

ws = new WebSocket("ws://127.0.0.1:8001");
ws.onopen = 関数 (イベント) {
    console.log("テキスト送信WSが開かれました。");
};
ws.onmessage = 関数 (イベント) {
    console.log("応答テキストメッセージ: " + event.data);
};
ws.onerror = 関数 (イベント) {
    console.log("テキストの送信でエラーが発生しました");
};
ws.onclose = 関数 (イベント) {
    console.log("WebSocketインスタンスが閉じられました。");
};
 
setTimeout(関数() {
    ws.readyState === WebSocket.OPEN の場合 {
        console.log("WebSocket がメッセージの送信を開始しました。");
        ws.send("Hello WebSocket、テキストメッセージです。");
    }
    それ以外 {
        console.log("WebSocketインスタンスの準備ができていませんでした...");
    }
}, 3000);

Nodejs サーバー:

文字列を正常に受信したら、受信したデータを出力し、文字列を返します。

var ws = require("nodejs-websocket");
  
console.log("Websocketの作成を開始します");
var server = ws.createServer(function(conn){
    console.log("接続に成功しました");
    conn.on("テキスト", 関数(obj) {
       console.log("受信:",obj);
        conn.send("サーバーからメッセージが届きました");     
          
    })
    conn.on("close", 関数(コード, 理由) {
        console.log("接続を閉じる")
    });
    conn.on("エラー", 関数(コード, 理由) {
        console.log("異常終了")
    });
}).listen(8001)
console.log("Websocketの作成を開始します");

テスト結果、クライアント ブラウザー出力:

nodejs 側の出力:

4. Egretのhttpとwebsocketをcocosに移植する

cocos にはカプセル化ツールクラスがないため、Egret から http と websocket を cocos に直接移植して使用すると非常に便利です。

以上がCocos CreatorのHttpとWebSocketの詳しい内容です。Cocos Creatorの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • Unity3Dはカメラレンズの動きを実現し、角度を制限する
  • CocosCreatorで複数のタイマーを使用する方法の詳細な説明
  • CocosCreator 学習モジュールスクリプト
  • CocosCreator で物理エンジン ジョイントを使用する方法
  • CocosCreatorでJSZip圧縮を使用する方法
  • CocosCreator 入門チュートリアル: TS で初めてのゲームを作る
  • CocosCreator ソースコードの解釈: エンジンの起動とメインループ
  • CocosCreator 一般的なフレームワーク設計リソース管理
  • CocosCreatorでリストを作成する方法
  • CocosCreator の新しいリソース管理システムの分析
  • CocosCreator でカメラトラッキングに cc.follow を使用する方法

<<:  MySQLプリコンパイル機能の詳細な説明

>>:  Dockerコンテナアプリケーションログの表示方法

推薦する

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...

新しいカーネルをLinuxシステムに移植する手順

1. ubuntu16.04 イメージと対応する ubuntu16.04 カーネル バージョンのソー...

横スクロールウェブサイトデザインの概要

水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

JavaScriptアニメーション関数のカプセル化の詳細な説明

目次1. アニメーション機能の原理2. アニメーション関数のシンプルなカプセル化3. アニメーション...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

node-media-serverを使用してシンプルなストリーミングメディアサーバーを構築する

node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

Linux に起動方法を追加する (サービス/スクリプト)

システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...