ホームページ > 記事 > ウェブフロントエンド > nodejs_node.jsで実装された簡易チャットルーム機能の共有
今日は、バックグラウンドで 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 プロトコルを必要とするためです
app.use(express.static(__dirname));
var サーバー = app.listen(8888);
var ws = io.listen(server);
クライアントはニックネームで識別されるため、サーバーには重複したニックネームを検出する機能が必要です
サーバーはサードパーティの websokcet フレームワークを使用するため、フロントエンド ページは、socket.io クライアント コードを個別に参照する必要があります。ソース ファイルは、socket.io モジュール内にあります。Windows のパスは、node_modulessocket です。 ionode_modulessocket.io-clientdist は次のとおりです。開発バージョンと圧縮バージョンについては、デフォルトで開発バージョンを引用するだけです。
フロントエンドは主に入力ニックネームのチェックとメッセージ処理を処理します。完全なコードは次のとおりです。コードをコピー
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 = '';
}
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);
});
addMessage(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。