最近、プロジェクトのニーズにより、NodeJSのWebSocket実装であるsocket.ioを研究しました。これは、nodeJSバックグラウンドアプリケーションWebSocketが広く使用しているフレームワークです。
準備
1.Socket.ioをインストールし、コマンドNPMを使用してsocket.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（）。聞き（9091）;
var ws = io.listen（app）;
次に、グローバル座標オブジェクトを定義します
コードコピーは次のとおりです。
var posts = {};
クライアントの接続を聞き始めて、新しいブロードキャスト関数を追加します（実際、socket.ioに付属のブロードキャスト方法io.sockets.broadcast.emitを使用できます）。コアコードは次のとおりです。
コードコピーは次のとおりです。
ws.on（ 'connection'、function（client）{
//ブロードキャスト関数
var broadcast = 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（ 'position.change'、msg）;
}
}
}
};
console.log（ '/033 [92mには新しい接続があります：/033 [39m'、posts）;
//クライアント接続が成功した後、他のクライアントの座標情報が送信されます
client.emit（ 'position.change'、posts）;
//クライアントはメッセージを送信します
client.on（ 'position.change'、function（msg）{
//現在、クライアントのメッセージは調整メッセージのみです
Posions [client.id] = msg;
//他のすべてのクライアントにメッセージをブロードキャストします
放送（{
タイプ：「位置」、
投稿：MSG、
ID：client.id
}、 クライアント）;
}）;
//クライアントクロージング接続メッセージを受信します
client.on（ 'close'、function（）{
console.log（ 'close！'）;
//クライアントを削除し、他のクライアントに通知します
Posion [client.id]を削除します。
//他のすべてのクライアントにメッセージをブロードキャストします
放送（{
タイプ：「切断」、
ID：client.id
}、 クライアント）;
}）;
//切断します
client.on（ 'disconnect'、function（）{
console.log（ 'disconnect！'）;
//クライアントを削除し、他のクライアントに通知します
Posion [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は、socket.ioモジュールから見つけることができます。パスは通常、node_modules/socket.io/node_modules/socket.io-client/distです。マージと圧縮には2つのバージョンがあります。開発中にマージバージョンを使用できます。
完全なコードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> socket.io複数の人の同時オンラインインタラクションの例</title>
<メタcharset = "utf-8">
</head>
<body>
<script type = "text/javascript" src = "socket.io.js"> </script>
<script type = "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（var i in data）{
移動（i、data [i]）;
}
}それ以外{
//それ以外の場合、それは切断されるメッセージまたは更新されるメッセージのいずれかです。
if（ 'position' == data.type）{
移動（data.id、data.post）;
}それ以外{
削除（data.id）;
}
}
}）
ws.on（ 'error'、function（）{
console.log（ 'error：'、ws）;
ws.disconnect（）;
}）
関数移動（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 = 'Absolute';
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）;
}
</script>
</body>
</html>
ページ上の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を知りたい友人はこの本を読むことができます。