複数人チャットルームを実現する 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 負荷分散構成ガイド

推薦する

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...

Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法

同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

Dockerコマンドの学習を1つの記事にまとめる

目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

Windows で IP アドレスを指定してサーバーへのリモート アクセスを設定する方法

当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...

Vue でキープアライブを使用した後にキャッシュをクリアする方法

キープアライブとは何ですか?通常の開発では、コンポーネントによっては複数回初期化する必要のないものも...

Vue は無限ロードウォーターフォールフローを実装します

この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...

CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

物件の詳細な説明transition 属性の目的は、一部の CSS プロパティ (背景など) をスム...

mysql-8.0.15-winx64 解凍バージョンのインストールチュートリアルと終了する 3 つの方法

1.公式サイトからダウンロードして解凍する参考: 2. 環境変数を設定するMYSQL_HOMEをMy...

mysql8.0.21 のダウンロードとインストールに関する詳細なチュートリアル

公式ウェブサイトアドレス: https://www.mysql.com/インストールの提案: インス...

Vue スクロールダウンしてさらにデータを読み込む スクロールケースの詳細な説明

vue-無限スクロールインストール npm インストール vue-infinite-scroll -...

スケルトン スクリーンの読み込みプレースホルダー アニメーション効果を実装するための CSS + HTML (アニメーション付き)

効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...