ホームページ ウェブフロントエンド jsチュートリアル nodejs_node.jsで実装された簡易チャットルーム機能の共有

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

May 16, 2016 pm 04:28 PM
nodejs シンプルなチャットルーム

今日は、バックグラウンドで 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。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodejsとvuejsの違い Nodejsとvuejsの違い Apr 21, 2024 am 04:17 AM

Node.js はサーバー側の JavaScript ランタイムであり、Vue.js は対話型ユーザー インターフェイスを作成するためのクライアント側の JavaScript フレームワークです。 Node.js はバックエンド サービス API 開発やデータ処理などのサーバー側開発に使用され、Vue.js はシングルページ アプリケーションや応答性の高いユーザー インターフェイスなどのクライアント側開発に使用されます。

Nodejs はバックエンド フレームワークですか? Nodejs はバックエンド フレームワークですか? Apr 21, 2024 am 05:09 AM

Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォーム サポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンド フレームワークとして使用できます。

Nodejsをmysqlデータベースに接続する方法 Nodejsをmysqlデータベースに接続する方法 Apr 21, 2024 am 06:13 AM

MySQL データベースに接続するには、次の手順に従う必要があります。 mysql2 ドライバーをインストールします。 mysql2.createConnection() を使用して、ホスト アドレス、ポート、ユーザー名、パスワード、データベース名を含む接続オブジェクトを作成します。 connection.query() を使用してクエリを実行します。最後に connection.end() を使用して接続を終了します。

Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Apr 21, 2024 am 05:18 AM

Node.js インストール ディレクトリには、npm と npm.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンド ウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンド プロンプトから使用できますが、npm はコマンド ラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティング システムは npm を使用します。

Nodejsのグローバル変数とは何ですか Nodejsのグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

Node.js には次のグローバル変数が存在します。 グローバル オブジェクト: グローバル コア モジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity

NodejsとJavaの間に大きな違いはありますか? NodejsとJavaの間に大きな違いはありますか? Apr 21, 2024 am 06:12 AM

Node.js と Java の主な違いは、設計と機能です。 イベント駆動型とスレッド駆動型: Node.js はイベント駆動型で、Java はスレッド駆動型です。シングルスレッドとマルチスレッド: Node.js はシングルスレッドのイベント ループを使用し、Java はマルチスレッド アーキテクチャを使用します。ランタイム環境: Node.js は V8 JavaScript エンジン上で実行され、Java は JVM 上で実行されます。構文: Node.js は JavaScript 構文を使用し、Java は Java 構文を使用します。目的: Node.js は I/O 集中型のタスクに適しており、Java は大規模なエンタープライズ アプリケーションに適しています。

Nodejs はバックエンド開発言語ですか? Nodejs はバックエンド開発言語ですか? Apr 21, 2024 am 05:09 AM

はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネス ロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。

Nodejsプロジェクトをサーバーにデプロイする方法 Nodejsプロジェクトをサーバーにデプロイする方法 Apr 21, 2024 am 04:40 AM

Node.js プロジェクトのサーバー デプロイメント手順: デプロイメント環境を準備します。サーバー アクセスの取得、Node.js のインストール、Git リポジトリのセットアップ。アプリケーションをビルドする: npm run build を使用して、デプロイ可能なコードと依存関係を生成します。コードをサーバーにアップロードします: Git またはファイル転送プロトコル経由。依存関係をインストールする: サーバーに SSH で接続し、npm install を使用してアプリケーションの依存関係をインストールします。アプリケーションを開始します。node Index.js などのコマンドを使用してアプリケーションを開始するか、pm2 などのプロセス マネージャーを使用します。リバース プロキシの構成 (オプション): Nginx や Apache などのリバース プロキシを使用して、トラフィックをアプリケーションにルーティングします。

See all articles