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

WBOY
リリース: 2016-05-16 16:28:46
オリジナル
1471 人が閲覧しました

今日は、バックグラウンドで 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('textarea').addEventListener('keypress', function(event){
              if(event.that == 13){
                  send();
              }
          });
          document.querySelector('textarea').addEventListener('keydown', function(event){
              if(event.that == 13){
                  send();
              }
          });
          document.querySelector('#send').addEventListener('click', function(){
              send();
          });

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


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

总结

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート