複数人チャットルームを実現する js コード

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

設計要件:

1) ユーザーは登録してチャットルームにログインする必要があります
2) チャットルームにはオンラインユーザー全員を表示できる
3) 各チャットコンテンツの前に、そのチャットコンテンツを送信したユーザー名が表示されます。
4) プライベートチャットが利用可能です。
5) ユーザーがチャットルームに出入りすると、システムはチャットルームで放送します。

config.jsコードは以下のとおりです

モジュール.エクスポート={
    "ポート":3000,
    "ホスト":"127.0.0.1"
}

Broadcast.jsのコードは以下のとおりです

exports.broadcast = 関数 (データ、ユーザー) {
    var from =データ.from;
    var メッセージ = data.message;
    message = from+"say: "+メッセージ;
    //メッセージを構築する var send = {
        mstype:"ブロードキャスト",
        メッセージ:メッセージ
    };
    send = 新しいバッファ(JSON.stringify(send));
    // ユーザーグループ内のすべてのユーザー、送信側のすべてのユーザーを走査します for(var username in users){
        if(ユーザー名!=from){
            users[ユーザー名].write(send);
        }
    }
};

Signup.jsコードは次のとおりです

exports.signup = 関数 (ソケット、データ、ユーザー) {
//登録ユーザーのユーザー名を取得します。var username=data.username;
    if(!users[username]){ //存在しない場合は、ユーザー名とソケットを保存します
        users[ユーザー名]=ソケット;
        var 送信 = {
            mstype:"サインアップ",
            コード:1000、
            ユーザー名:ユーザー名、
            メッセージ: 「登録が完了しました」
        };
        socket.write(JSON.stringify(send));
    }その他{//cunzai
        var 送信 = {
            mstype:"サインアップ",
            コード:1001、
            メッセージ: 「ユーザー名はすでに使用されています。ユーザー名を再入力してください」
        }
        socket.write(JSON.stringify(send));
    }
};

p2p.jsコードは以下のとおりです

exports.p2p = 関数 (ソケット、データ、ユーザー) {
    var from =データ.from;
    var to = data.to;
    var メッセージ = data.message;
    var 受信者=users[to];
    if(!receiver){//受信者が存在しないvar send={
          mstype:"p2p",
          コード:2001、
          メッセージ: 「ユーザー」+to+「存在しません」
      }
      socket.write(JSON.stringify(send));
    }それ以外{
        //存在する場合は、受信者に情報を送信します var send={
            mstype:"p2p",
            コード:2000、
            から:から、
            メッセージ:from+"to you"+メッセージ
        }
        受信者.write(JSON.stringify(send));
    }
};

サーバーコード

//p2p チャットルームサーバー var net=require("net");
var config = require("./config");
var ブロードキャスト = require("./broadcast");
var p2p = require("./p2p");
var signup = require("./signup");
var ユーザー = {};
var server=net.createServer();
server.on ("接続", 関数 (ソケット) {
    socket.on("データ",関数(データ) {
        データ = JSON.parse(データ);
        スイッチ (data.mstype) {
            ケース「サインアップ」:
                signup.signup(ソケット、データ、ユーザー);
                壊す;
            「ブロードキャスト」の場合:
                ブロードキャスト。ブロードキャスト(データ、ユーザー);
                壊す;
            ケース「p2p」:
                p2p.p2p(ソケット、データ、ユーザー);
                壊す;
            デフォルト:
                壊す;
        }
    });
    socket.on("エラー",関数() {
        console.log("クライアントが異常終了しました");
    });
});
server.listen(config.port,config.host,function() {
    console.log("サーバーはポート"+config.port+"でリッスンを開始します");
});

クライアントのコードは次のとおりです。

var net = require("net");
var config = require("./config");
var クライアント = net.createConnection({
    ポート:config.port、
    ホスト:config.host
});
var ユーザー名;
クライアント.on("接続",関数() {
    console.log("ユーザー名を入力してください:");
    process.stdin.on("データ",関数(データ){
        データ=data.toString().trim();
        // ユーザーがすでに存在するかどうかを確認します if(!username){
            var 送信 = {
                mstype:"サインアップ",
                ユーザー名:データ
            };
            Client.write(JSON.stringify(send));
            戻る;
        }
        var regex=/(.{1,18}):(.+)/;
        var matches = regex = regex.exec(data);
        if(一致する){
            //一致した場合はP2Pです
            var from=username;//送信者はあなた自身です var to=matches[1];//誰に送信されたか var message=matches[2];
            //JSON形式の情報を構築 var send={
                mstype: "p2p",
                差出人:ユーザー名、
                に:に、
                メッセージ:メッセージ
            };
            Client.write(JSON.stringify(send));
        }それ以外{
            //ブロードキャスト var send = {
                mstype:"ブロードキャスト",
                差出人:ユーザー名、
                メッセージ:データ
            };
            Client.write(JSON.stringify(send));
        }
    });
});
Client.on("データ",関数(データ) {
    データ = JSON.parse(データ);
    スイッチ (data.mstype) {
        ケース「サインアップ」:
            var code=データ.code;
            スイッチ(コード){
                ケース1000:
                    ユーザー名=data.ユーザー名;
                    console.log(データ.メッセージ);
                    壊す;
                ケース1001:
                    console.log(データ.メッセージ);
                    壊す;
                デフォルト:
                    壊す;
            }
            壊す;
        「ブロードキャスト」の場合:
            console.log(データ.メッセージ);
            壊す;
        ケース「p2p」:
            var code=データ.code;
            スイッチ(コード){
                ケース2000:
                    console.log(データ.メッセージ);
                    壊す;
                ケース2001:
                    console.log(データ.メッセージ);
                    壊す;
                デフォルト:
                    壊す;
            }
            壊す;
        デフォルト:
            壊す;
    }
});
Client.on("エラー",関数() {
    console.log("チャットルームは閉鎖されました!!");
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Node.jsで実装されたシンプルなチャットルーム機能共有
  • Angular、Nodejs、socket.io を使用してチャットルームや複数人用チャットルームを構築します
  • jsを使用して簡単なチャットルーム機能を書く
  • AngularJS+Node.js でオンラインチャットルームを実装する
  • Ajax PHP JavaScript MySQL でシンプルな非リフレッシュオンラインチャットルームを実現
  • JavaScript がチャットルームのチャット記録を模倣する
  • JavaScript でシンプルなチャットルームを実装する
  • Nodejs はマルチルームのシンプルなチャットルーム機能を実現します
  • NodeJSはチャットルーム機能を実装します
  • Node.js でソケットを使用してプライベートおよびパブリック チャット ルームを作成する

<<:  CSSを使用してファイルアップロードパターンを描画する

>>:  Nginx レイヤー 4 負荷分散構成ガイド

推薦する

Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

1. 補助AIDE (Advanced Instruction Detection Environm...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...

JSの高階関数5つを共有する

目次1. はじめに2. 再帰3. コールバック関数3.1 匿名コールバック関数3.2 パラメータ付き...

HTML入力ファイルコントロールはアップロードされるファイルの種類を制限します

入力ファイルの HTML コントロールを Web ページに追加します。 <input id=&...

Vue の詳細な入門ノート

目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

なぜ Tomcat が起動できないのでしょうか?

目次現象:ポートの使用:ファイルにスペルミスがあります:現象: Tomcat がインストールされ、W...

MySQL のデバッグと最適化に関する 101 のヒントを共有する

MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費

目次1. 背景2. テーブル作成ステートメントとデータ挿入テーブルを作成するデータの挿入3. ウィン...

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明最近、...

Flash での HTML と CSS の適用

Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...