今日は、バックグラウンドでnodejsを使用して、クライアントとサーバーの通信にsocket.ioを使用して、簡単なチャットルームを実装します。これは、比較的成熟したWebSocketフレームワークです。
最初の作業
1. Expressをインストールし、これを使用してsocket.ioと静的ページをホストします。 Command NPMインストールExpress - save、 - saveはパッケージをpackage.jsonファイルに追加できます。
2。Socket.ioをインストールし、コマンドnpmをインストールsocket.io - saveにインストールします。
サーバーコードの書き込み
最初に、socket.ioの最初の接続にはhttpプロトコルが必要なため、Expressを介してWebサイトをホストし、socket.ioインスタンスに添付します。
コードコピーは次のとおりです。
var express = require（ 'express'）、
io = require（ 'socket.io'）;
var app = Express（）;
app.use（express.static（__ dirname））;
var server = app.listen（8888）;
var ws = io.listen（server）;
サーバー接続イベントを追加します。クライアント接続が成功したとき、すべてのオンラインユーザーに伝えるために発表され、ユーザーがメッセージを送信すると、他のユーザーに通知するためにブロードキャストが送信されます。
コードコピーは次のとおりです。
ws.on（ 'connection'、function（client）{
console.log（ '/033 [96msomeone is connect/033 [39m/n'）;
client.on（ 'join'、function（msg）{
//複製を確認してください
if（checknickname（msg））{
client.emit（ 'nickname'、 '重複したニックネームがあります！'）;
}それ以外{
client.nickname = msg;
ws.sockets.emit（ 'anncount'、 'system'、msg + 'がチャットルームに参加しました！'）;
}
}）;
//メッセージの送信を聞きます
client.on（ 'send.message'、function（msg）{
client.broadcast.emit（ 'send.message'、client.nickname、msg）;
}）;
//切断するときに他のユーザーに通知します
client.on（ 'disconnect'、function（）{
if（client.nickname）{
client.broadcast.emit（ 'send.message'、 'system'、client.nickname + 'チャットルームを残す！'）;
}
}）
}）
クライアントはニックネームで識別されるため、サーバーはニックネームの重複を検出するための関数が必要です
コードコピーは次のとおりです。
//ニックネームが複製されているかどうかを確認します
var checknickname = function（name）{
for（ws.sockets.socketsのvar k）{
if（ws.sockets.sockets.hasownproperty（k））{
if（ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == name）{
trueを返します。
}
}
}
falseを返します。
}
カスタマーサービスコードを書きます
サーバーはサードパーティのWebSokCetフレームワークを使用するため、フロントエンドページはSocket.IOクライアントコードを個別に参照する必要があります。ソースファイルは、socket.ioモジュールから見つけることができます。 Windowsの下のパスはnode_modules/socket.io/node_modules/socket.io-client/distです。ここには開発バージョンと圧縮バージョンがあり、開発バージョンへのデフォルトの参照で十分です。
フロントエンドは主に入力のニックネームチェック、メッセージ処理、および完全なコードを次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> socket.ioチャットルームの例</title>
<メタcharset = "utf-8">
<link rel = "styleSheet" href = "css/reset.css"/>
<link rel = "styleSheet" href = "css/bootstrap.css"/>
<link rel = "styleSheet" href = "css/app.css"/>
</head>
<body>
<div>
<div id = "chat">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<Textarea> </textarea>
<ボタンID = "clear">クリア画面</button>
<ボタンid = "send"> send </button>
</div>
</div>
<script type = "text/javascript" src = "js/socket.io.js"> </script>
<script type = "text/javascript">
var ws = io.connect（ 'http://172.16.2.2.184:8888'）;
var sendmsg = function（msg）{
ws.emit（ 'send.message'、msg）;
}
var addmessage = function（from、msg）{
var li = document.createelement（ 'li'）;
li.innerhtml = '<span>' + from + '</span>' + '：' + msg;
document.QuerySelector（ '＃CHAT_CONATENER'）。appendChild（li）;
//コンテンツ領域のスクロールバーを下に設定します
document.queryselector（ '＃chat'）。scrolltop = document.queryselector（ '＃chat'）。scrollheight;
//焦点を設定します
document.queryselector（ 'textarea'）。focus（）;
}
var send = function（）{
var ele_msg = document.queryselector（ 'textarea'）;
var msg = ele_msg.value.replace（ '/r/n'、 ''）.trim（）;
console.log（msg）;
if（！msg）return;
sendmsg（msg）;
//自分のコンテンツ領域にメッセージを追加します
addmessage（ 'you'、msg）;
ELE_MSG.VALUE = '';
}
ws.on（ 'connect'、function（）{
var nickname = window.prompt（ 'ニックネームを入力！'）;
while（！nickname）{
nickname = window.prompt（ 'ニックネームは空にすることはできません、再入力してください！」）
}
ws.emit（ 'join'、nickname）;
}）;
//重複したニックネームがあります
ws.on（ 'nickname'、function（）{
var nickname = window.prompt（ 'ニックネームには複製があります、再入力してください！'）;
while（！nickname）{
nickname = window.prompt（ 'ニックネームは空にすることはできません、再入力してください！」）
}
ws.emit（ 'join'、nickname）;
}）;
ws.on（ 'send.message'、function（from、msg）{
addmessage（from、msg）;
}）;
ws.on（ 'anneponal'、function（from、msg）{
addmessage（from、msg）;
}）;
document.QuerySelector（ 'Textarea'）。AddEventListener（ 'keypress'、function（event）{
if（event.which == 13）{
送信（）;
}
}）;
document.queryselector（ 'textarea'）。AddEventListener（ 'keydown'、function（event）{
if（event.which == 13）{
送信（）;
}
}）;
document.queryselector（ '＃send'）。addeventlistener（ 'click'、function（）{
送信（）;
}）;
document.QuerySelector（ '＃clear'）。AddEventListener（ 'click'、function（）{
document.QuerySelector（ '＃CHAT_CONATENER'）。innerhtml = '';
}）;
</script>
</body>
</html>
完全なコード圧縮ファイルはここで提供されています
要約します
NodeJSは、特にメッセージングとネットワークのプログラミング、自然な非同期IOの処理に関しては良いことです。