Nodejs は、複数の人が同時にオンラインでマウスを動かすための小規模なゲーム共有を実装します_node.js

最近、プロジェクトのニーズにより、nodejs の websocket 実装、socket.io を研究しました。これは、nodejs バックグラウンド アプリケーションで Websocket に広く使用されているフレームワークです。

準備

1.ソケット.io をインストールします。コマンド npm installソケット.io を使用します
2. Windows システムの場合、socket.io をインストールするときに vc コードがコンパイルされるため、vc コンパイル環境が必要です

ゲームの基本原則

1. サーバーはクライアントの接続を監視します
2. クライアント接続が成功したら、ページをバインドしてマウス イベントを移動し、イベントを処理して現在の座標をサーバーに送信します
3. サーバーはグローバル座標オブジェクトを保存し、クライアントの一意の番号をキー値として使用します
4. 新しい接続が確立されたら、座標を他のクライアントにブロードキャストします
5. クライアントが切断されると、サーバーは座標情報を削除し、他のクライアントにブロードキャストします

サーバー コードの実装を開始します

scoket.io がサーバー監視を確立する場合、アップグレード プロトコルを処理するために http 接続に依存する必要があるため、http モジュールも必要です。コードは次のとおりです。

コードをコピー コードは次のとおりです:

var http = require('http'),
io = require('socket.io');

var app = http.createServer().listen(9091);

var ws = io.listen(app);

次に、グローバル座標オブジェクトを定義します

コードをコピーします コードは次のとおりです:

var 位置 = {};

クライアントの接続の監視を開始し、ブロードキャスト関数を追加します (実際には、socket.io に付属するブロードキャスト メソッド io.sockets.broadcast.emit を使用できます)。コア コードは次のとおりです。

コードをコピー コードは次のとおりです:

ws.on('接続', function(client){
// ブロードキャスト関数
var ブロードキャスト = function(msg, cl){
for(ws.sockets.sockets の var k){
If(ws.sockets.sockets.hasOwnProperty(k)){
If(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){
Ws.sockets.sockets [k] .emit ('posity.change', msg); }
}
}
};
コンソール.log(' // クライアントが接続に成功すると、他のクライアントの座標情報が送信されます
Client.emit('position.change', 位置);
// クライアントから送信されたメッセージを受信します
Client.on('position.change', function(msg){
// 現在、クライアントのメッセージは座標メッセージのみです
Position[client.id] = msg;
// メッセージを他のすべてのクライアントにブロードキャストします
ブロードキャスト({
タイプ: '位置',
位置: メッセージ、
id: client.id
}、クライアント);
});
// クライアントが接続を終了するメッセージを受信します
Client.on('close', function(){
console.log('close!');
//クライアントを削除し、他のクライアントに通知します
投稿[client.id];
を削除します // メッセージを他のすべてのクライアントにブロードキャストします
ブロードキャスト({
「切断」と入力します。
id: client.id
}、クライアント);
});
// 切断
Client.on('切断', function(){
console.log('切断!');
//クライアントを削除し、他のクライアントに通知します
投稿[client.id];
を削除します // メッセージを他のすべてのクライアントにブロードキャストします
ブロードキャスト({
タイプ: '切断',
id: client.id
}、クライアント);
})
// クライアント例外処理を定義します
Client.on('error', function(err){
console.log('error->', err);
})
});

上記のコードを分析すると、重要な点は です。

1. 新しいクライアントは正常に接続し、他のクライアントの座標情報を送信します

2. クライアントが座標情報を更新すると、他のクライアントに通知します

3. クライアントが切断し、他のクライアントに通知します
4. ブロードキャストメッセージのタイプは、座標の変更と座標の削除に分類されます

クライアント HTML ページの作成

socket.io はカスタム フレームワークであるため、クライアントはsocket.io.js を参照する必要があります。この js は通常、merge を含む node_modulessocket.ionode_modulessocket.io-clientdist にあります。 2 つのバージョンを圧縮すると、開発中にマージされたバージョンを使用できます。

完全なコードは次のとおりです:

コードをコピー コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
var ws = io.connect('http://localhost:9091/');
var isfirst;

ws.on('connect', function(){
console.log(ws);
// Mousemove イベントのバインドを開始します
document.onmousemove = function(ev){
If(ws.socket.transport.isOpen){
WS.emit ('Position.change', {x: Ev.clientx, y: Ev.clienty}); }
}
})

ws.on('position.change', function(data){

// オンラインになっている他のクライアントを同時に起動します
if(!isfirst){
isfirst = true;
// 最初のメッセージは、他のすべてのクライアントの座標を受信することです
for(データ内の変数 i){
move(i, data[i]);
}
}その他{
// それ以外の場合は、別の切断メッセージ、または別の座標更新メッセージになります
If('位置' == データ.タイプ){
move(data.id, data.postion);
}その他{
削除（data.id）;
}
}
})

ws.on('error', function(){

console.log('error:', ws);
ws.disconnect();
})

関数 move(id, pos){
var ele = document.querySelector('#cursor_' id);
If(!ele){
// 存在しない場合は、
を作成します ele = document.createElement('img');
ele.id = 'cursor_' id;
ele.src = 'img/cursor.png';
ele.style.position = '絶対';
document.body.appendChild(ele);
}

ele.style.left = pos.x 'px';

ele.style.top = pos.y 'px';
}

関数の削除(id){

var ele = document.querySelector('#cursor_' id);
ele.parentNode.removeChild(ele);
}

ページ内の img/cursor.png は、cursor.png にあります。ここには他にも多くのマウス アイコンがあります。フロントエンドの原理は比較的単純です。

1. 接続が成功したら、新しい座標メッセージの送信を処理するページのmousemoveイベントをバインドします。
2. メッセージを受信すると、メッセージの種類に応じて、他のクライアントのメッセージを変更したり、他のクライアントのメッセージを削除したりする処理が行われます
3. 他のクライアント カーソル アイコンの追加とカーソル アイコンの削除を定義します
4. クライアント例外メッセージを処理し、サーバーが座標情報を削除できるように切断を追加します

サンプルを実行します

1. サーバー コードを io_multigame.js として保存します
2. クライアント コードを io_multigame.html
として保存します 3. サーバーコードノード io_multigame.js
を実行します。 4. 複数の io_multigame.html ページを開いて効果を確認します

概要

文章はよりカジュアルで、nodejs について言及しています。nodejs を理解したい友人はこの本を読むとよいでしょう。