nodejs_node.jsで実装された簡易チャットルーム機能の共有-jsチュートリアル-php.cn

nodejs_node.jsで実装された簡易チャットルーム機能の共有

WBOY

リリース： 2016-05-16 16:28:46

オリジナル

1490 人が閲覧しました

今日は、バックグラウンドで nodejs を使用し、クライアントとサーバー間の通信にソケット.io を使用して、単純なチャットルームを実装します。これは、比較的成熟した WebSocket フレームワークです。

初期作品

1. Express をインストールし、socket.io と静的ページをホストするために使用します。コマンド npm install Express --save, --save でパッケージを package.json ファイルに追加します。 2.socket.io をインストールし、コマンド npm installソケット.io --save.

サーバーコードの書き込み

まず、Express を介して Web サイトをホストし、socket.io インスタンスにアタッチします。これは、socket.io は初期接続に http プロトコルを必要とするためです

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

var Express = require('express'),
io = require('socket.io');
var app =express();

app.use(express.static(__dirname));

var サーバー = app.listen(8888);

var ws = io.listen(server);

サーバー接続イベントを追加します。クライアント接続が成功すると、すべてのオンラインユーザーにアナウンスが送信され、他のユーザーに通知が送信されます。

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

ws.on('接続', function(client){

コンソール.log(' Client.on('join', function(msg){
// 重複があるかどうかを確認します
if(checkNickname(msg)){
client.emit('ニックネーム', 'ニックネームが重複しています!');
}その他{
Client.nickname = msg;
ws.sockets.emit('アナウンス', 'システム', msg 'チャットルームに参加しました!');
}
});
// メッセージの送信をリッスンします
Client.on('send.message', function(msg){
Client.broadcast.emit('send.message',client.nickname, msg);
});
// 切断時に他のユーザーに通知
Client.on('切断', function(){
If(クライアント.ニックネーム){
Client.broadcast.emit('send.message','System', client.nickname 'チャットルームから退出してください!');
}
})

})

クライアントはニックネームで識別されるため、サーバーには重複したニックネームを検出する機能が必要です

コードをコピーしますコードは次のとおりです: // ニックネームが繰り返されているかどうかを確認します

var checkNickname = 関数(名前){

for(ws.sockets.sockets の var k){

If(ws.sockets.sockets.hasOwnProperty(k)){

If(ws.sockets.sockets[k] && ws.sockets.sockets[k].nickname == 名前){

return true;

}

}

}

false を返します;

}

クライアントコードの書き込み

サーバーはサードパーティの websokcet フレームワークを使用するため、フロントエンドページは、socket.io クライアントコードを個別に参照する必要があります。ソースファイルは、socket.io モジュール内にあります。Windows のパスは、node_modulessocket です。 ionode_modulessocket.io-clientdist は次のとおりです。開発バージョンと圧縮バージョンについては、デフォルトで開発バージョンを引用するだけです。

フロントエンドは主に入力ニックネームのチェックとメッセージ処理を処理します。完全なコードは次のとおりです。

コードをコピー

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

    socket.io 聊天室例子

<スクリプトタイプ="text/javascript">

var ws = io.connect('http://172.16.2.184:8888');
var sendMsg = function(msg){
WS.emit ('Send.Message', MSG); }
var addMessage = function(from, msg){
var li = document.createElement('li');
li.innerHTML = '' ' : ' msg;
document.querySelector('#chat_conatiner').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('rn', '').trim();
console.log(msg);
If(!msg) return;
sendMsg(msg);
// 独自のコンテンツ領域にメッセージを追加します
addMessage('you', msg);
ele_msg.value = '';
}

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

var Nickname = window.prompt('ニックネームを入力してください!');
while(!ニックネーム){
Nickick = window.prompt('ニックネームを空にすることはできません。再入力してください!')
}
ws.emit（ 'join'、nickname）;
});

// ニックネームが重複しています

ws.on('ニックネーム', function(){
var Nickname = window.prompt('ニックネームが繰り返されています。再入力してください!');
while(!ニックネーム){
Nickick = window.prompt('ニックネームを空にすることはできません。再入力してください!')
}
ws.emit（ 'join'、nickname）;
});

ws.on('send.message', function(from, msg){

addMessage(from, msg);
});

ws.on('お知らせ', function(from, msg){

addMessage(from, msg);
});

document.querySelector('#clear').addEventListener('click', function(){
              document.querySelector('#chat_conatiner').innerHTML = '';
          });

この里は完全な代码压缩文件を提供します

总结

nodejs は好西、尤是在処理メッセージ通讯、网络编程面、天生的异步IO。