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コンテナアプリケーションログの表示方法

推薦する

JavaScript 配列の重複排除とフラット化関数の紹介

目次1. 配列の平坦化(配列の次元削減とも呼ばれる)方法1: 削減メソッドを使用する方法2: スタッ...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

Linux ユーザー状態とカーネル状態間の通信方法の詳細な説明

CPU 権限の制限により、Linux ユーザー状態とカーネル状態間の通信は、プロセス間通信を使用した...

HTML要素にフォーカスを設定する方法

コードをコピーコードは次のとおりです。 <本文<フォームアクション="&quo...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

MySQLインデックスマージの使い方

インデックスのマージは、MySQL が最下層で提供するインテリジェントなアルゴリズムです。インデック...

HTML テーブル マークアップ チュートリアル (9): セル間隔属性 CELLSPACING

テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...

入力ボックスのコンテンツプロンプトと非表示機能を実装する JavaScript

入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいこ...

JavaScript でフォロー広告を実装するためのサンプルコード

フローティング広告は、ウェブサイト上で非常に一般的な広告形式です。フローティング広告は、ユーザーの閲...

MySQLで適切なインデックスを選択する方法

まずは栗を見てみましょう EXPLAIN select * from employees where...

MySQL での limit の使用方法は何ですか (推奨)

SELECT * FROM テーブル名制限m,n; SELECT * FROM テーブル LIMI...

Vueでフォーム検証を実装する方法

1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...