Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+express+socketの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ファイル構造は次のとおりです。

フロントエンド部分:

ログインページログイン部分:

ログイン.html

<!DOCTYPE html>  
<html lang="ja"> 

<ヘッド>  
    <メタ文字セット="UTF-8">  
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">  
    <meta http-equiv="X-UA-compatible" content="ie=edge">  
    <title>ログイン</title>  
    <link rel="スタイルシート" href="css/login.css" >  
</head> 

<本文>  
    <div class="ログインボックスフレックスボックス">  
        <!--ログインタイトルバー-->  
        <h2 class="sign-title box-width">ログイン</h2>  
        <!--アバターバー-->  
        <div class="picture-carousel">  
            <div class="矢印左矢印">  
                <div class="before-arrow"></div>  
            </div>  
            <img class="p1 img-setting" src="./img/1.jpg" alt="1.jpg">  
            <img class="p2 img-setting" src="./img/2.jpg" alt="2.jpg">  
            <img class="p3 img-setting" src="./img/3.jpg" alt="3.jpg">  
            <img class="p2 img-setting" src="./img/4.jpg" alt="4.jpg">  
            <img class="p1 img-setting" src="./img/5.jpg" alt="5.jpg">  
            <div class="右矢印">  
                <div class="after-arrow"></div>  
            </div>  
        </div>  
        <!--ユーザー名列-->  
        <div class="名前ボックスボックス幅">  
            <input type="text" class="user-name box-width" placeholder="お名前を入力してください">  
        </div>  
        <!--確認欄-->  
        <div class="ボタンボックスボックス幅">  
            <input type="button" class="login-button box-width" value="チャットルームにログイン">  
        </div>  
        <!--エラー メッセージ列-->  
        <div class="エラーボックスボックス幅">  
            <span class="error-message">チャットルームへようこそ!</span>  
        </div>  
    </div>  
</本文>  
<script src="js/login.js"></script> 

</html>

ログイン.css

* {  
    パディング: 0;  
    マージン: 0;  
    フォントファミリ: "Microsoft Yahei";  
} 

html,  
体 {  
    幅: 100%;  
    高さ: 100%;  
    フォントファミリ: "Microsoft Yahei";  
    ディスプレイ: フレックス;  
    コンテンツの中央揃え: 中央;  
    アイテムの位置を中央揃えにします。  
} 

体 {  
    背景: 線形グラデーション(-135度, #51D15B, #42A855);  
    背景: -moz-linear-gradient(-135deg, #51D15B, #42A855);  
    背景: -webkit-linear-gradient(-135deg, #51D15B, #42A855);  
    背景: -o-linear-gradient(-135deg, #51D15B, #42A855);  
} 

.flex-box {  
    ディスプレイ: フレックス;  
    コンテンツの中央揃え: 中央;  
    アイテムの位置を中央揃えにします。  
} 

.ボックス幅{  
    幅: 80%;  
} 


/*最外層*/ 

.ログインボックス{  
    幅: 20%;  
    最小幅: 304px;  
    最大幅: 404px;  
    高さ: 50%;  
    最小高さ: 368px;  
    最大高さ: 468px;  
    flex-direction: 列;  
    ボックスの影: 1px 1px 15px #7B8C99;  
    背景: #fff;  
} 


/*ログインタイトル*/ 

.sign-title {  
    色: #42A855;  
    境界線: 2px 実線 #42A855;  
    上境界線: 透明;  
    左境界線: 透明;  
    右境界線: 透明;  
} 


/*画像スイッチ*/ 

.picture-carousel {  
    位置: 相対的;  
    ディスプレイ: フレックス;  
    マージン：10%;  
} 


/*画像切り替え矢印*/ 

.矢印{  
    zインデックス: 3;  
    位置: 絶対;  
    フォントサイズ: 60px;  
    高さ: 100%;  
    幅: 30%;  
    ディスプレイ: フレックス;  
    コンテンツの中央揃え: 中央;  
    アイテムの位置を中央揃えにします。  
    色: #ffffff;  
} 

.arrow:hover {  
    カーソル: ポインタ;  
} 

.左矢印{  
    左: 0;  
} 

.before-arrow {  
    幅: 0px;  
    高さ: 0px;  
    境界線の幅: 30px;  
    境界線のスタイル: solid;  
    境界線の色: 透明 #51D15B 透明 透明;  
} 

.右矢印{  
    右: 0;  
} 

.after-arrow{  
     幅: 0px;  
    高さ: 0px;  
    境界線の幅: 30px;  
    境界線のスタイル: solid;  
    境界線の色: 透明 透明 透明 #51D15B;   
} 

.picture-carousel画像{  
    幅: 80ピクセル;  
    高さ: 80px;  
    遷移: すべて 0.2 秒線形。  
    -moz-transition: すべて 0.2 秒のイーズアウト;  
    -webkit-transition: すべて 0.2 秒のイーズアウト;  
    -o-transition: すべて 0.2 秒のイーズアウト。  
} 

.img設定{  
    マージン: 0px -15px;  
} 

.p1 {  
    変換: スケール(0.6);  
    zインデックス: 1;  
} 

.p1:ホバー{  
    変換: スケール(0.8);  
} 

.p2 {  
    変換: スケール(0.8);  
    zインデックス: 2;  
} 

.p2:ホバー{  
    変換: スケール(1);  
} 

.p3 {  
    変換: スケール(1);  
    zインデックス: 3;  
} 

.p3:ホバー{  
    変換: スケール(1.2);  
} 


/*ユーザー名*/ 

.name-box {  
    ディスプレイ: フレックス;  
    コンテンツの中央揃え: 中央;  
    境界線: 1px実線 #51D15B;  
} 

.name-box .ユーザー名 {  
    幅: 100%;  
    テキスト配置: 中央;  
    パディング: 10px;  
    アウトライン色: #42A855;  
    境界線: なし;  
    フォントサイズ: 16px;  
} 

/* ログインボタン */
.ボタンボックス{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    マージン: 10px 0 20px;
}

.ボタンボックス .ログインボタン{
    幅: 100%;
    パディング: 10px 20px;
    アウトライン:なし;
    境界線: なし;
    背景: #42A855;
    色: 白;
    フォントサイズ: 16px;
}

/* エラーメッセージ*/
.エラーボックス{
    色: #42A855;
    境界線: 2px 実線 #42A855;
    上境界線: 透明;
    左境界線: 透明;
    右境界線: 透明;
}

.error-box span{
    可視性: 非表示;
    色: #d43f3a;
    フォントサイズ: 14px;
}

ログイン.js

// 写真の順序を保存するために使用されます var imgArray = ['1','2','3','4','5'];

// 矢印を取得します var leftArrow = document.getElementsByClassName('left-arrow')[0];
var rightArrow = document.getElementsByClassName('right-arrow')[0];

// ユーザー名を取得します var userName = document.getElementsByClassName('user-name')[0];

// ログインボタンを取得します var loginButton = document.getElementsByClassName('login-button')[0];

// エラーメッセージバーを取得します。var errorMessage = document.getElementsByClassName('error-message')[0];

// 左矢印リスナーイベントを追加します leftArrow.addEventListener('click',function(){
    imgArray.unshift(imgArray[imgArray.length - 1]); // 配列の先頭に要素を追加します //  
    imgArray.pop(); // 配列の最後の要素を削除して返します carouselImg(); // 画像を切り替える });

// 右矢印リスナーイベントを追加します rightArrow.addEventListener('click',function(){
    imgArray.push(imgArray[0]); // 最初の要素を末尾に配置します。 imgArray.shift(); // 配列の最初の要素を削除して返します。 carouselImg(); // 画像を入れ替えます。 });

// 画像を切り替える function carouselImg(){
    for(var count = 0; count < imgArray.length; count++){
        document.getElementsByTagName('img')[count].src = './img/' + imgArray[count] + '.jpg';
        document.getElementsByTagName('img')[count].alt=imgArray[count] + '.jpg';
    }
}

// ログインボタンリスナーイベントを追加します loginButton.addEventListener('click',function(){
    if(userName.value === ''){
        errorMessage.innerHTML = '名前を入力してください';
        errorMessage.style.visibility = '表示可能';
    }それ以外の場合(ユーザー名.値.長さ> 8){
        errorMessage.innerHTML = '名前は 8 語を超えることはできません';
        errorMessage.style.visibility = '表示可能';
    }それ以外{
        window.location.href=encodeURI('index.html?selectpicture=' + document.getElementsByClassName('p3')[0].alt + 
                                    '&username=' + ユーザー名.値);
    }
});

// キーバインディングログインイベントを入力 document.onkeydown = function (event) {  
    var e = イベント || window.event;  
    if(e && e.keyCode === 13){
        ログインボタン.click();
    }
};

インデックス.html

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>チャットルーム</title>
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <link rel="スタイルシート" href="./css/index.css" />
</head>
<本文>
    <div class="チャットボックス">
        <!-- チャット ボックス ヘッダー-->
        <div class="チャットヘッダー">
            <div class="ボタンボックス">
                <input type="button" class="log-out" value="ログアウト" />
            </div>
        </div>
        <!-- チャット ボックスの本文 -->
        <div class="チャットボディ">
            <!-- チャット ボックスの左側 -->
            <div class="チャットボディ左">
                <!-- チャット ボックスの左側のチャット コンテンツ -->
                <div class="チャットコンテンツ"></div>
                <!-- チャットボックスの左側にあるチャット入力ボックス-->
                <div class="チャット編集">
                    <input type="text" class="edit-box" placeholder="メッセージを入力してください" maxlength="15"/>
                    <input type="button" class="edit-button" value="送信" />
                </div>
            </div>
            <!-- チャット ボックスの右側 -->
            <div class="チャットボディ右">
                <!-- チャット ボックスの右側にいる人数を数えます -->
                <div class="online-count">オンライン:0</div>
                <!-- チャット ボックスの右側のユーザー名 -->
                <div class="user-name">ユーザー名</div>
                <!-- チャット ボックスの右側のアバター -->
                <img class="user-img" />
            </div>
        </div>
    </div>
</本文>
</html>

<script src="./js/socket.io.js"></script>
<script src="./js/index.js"></script>

インデックス.css

*{
    マージン: 0;
    パディング: 0;
    フォントファミリー: "Microsoft Yahei"
}
html,本文{
    幅: 100%;
    高さ: 100%;
}

/* 背景色 */
体{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    背景: 線形グラデーション(-135度、#51D15B、#42A855);
    背景: -moz-linear-gradient(-135deg,#51D15B,#42A855);
    背景: -webkit-linear-gradient(-135deg,#51D15B,#42A855);
    背景: -o-linear-gradient(-135deg,#51D15B,#42A855);
}

/* 最外層 */
.チャットボックス{
    幅: 50%;
    最大幅: 720px;
    最小幅: 400px;
    高さ: 80%;
    最小高さ: 530px;
    最大高さ: 530px;
    ディスプレイ: フレックス;
    flex-direction: 列;
    背景: #fff;
    ボックスの影: 1px 1px 15px #333;
}

/* ヘッダー */
.チャットヘッダー{
    マージン: 5px;
    ボックスの影: 1px 1px 15px #7B8C99;
}

.ボタンボックス{
    ディスプレイ: フレックス;
    コンテンツの端揃え: flex-end;
}

.ログアウト{
    高さ: 100%;
    フォントサイズ: 14px;
    フォントの太さ: 太字;
    パディング: 5px 15px;
    色: #79C2EA;
    背景: #fff;
    アウトライン: なし;
    境界線: なし;
    境界線の半径: 15px;
    カーソル: ポインタ;
}

/* 体 */
.チャット本文{
    高さ: 90%;
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    マージン: 5px;
    パディング: 5px;
}

/* 体の左側 */
.チャット本体左{
    高さ: 100%;
    幅: 70%;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースを空ける;
    マージン: 5px;
}

/* 左側のコンテンツ */
.チャットコンテンツ{
    ボックスの影: 1px 1px 15px #7B8C99;
    高さ: 100%;
    下部マージン: 5px;
    オーバーフロー: スクロール;
}

/*チャットバブル*/ 

.my-メッセージボックス{  
    ディスプレイ: フレックス;  
    コンテンツの端揃え: flex-end;  
    コンテンツの位置を中央揃えにします。  
    マージン: 5px;  
} 

.その他のメッセージボックス{  
    ディスプレイ: フレックス;  
    コンテンツの配置: flex-start;  
    コンテンツの位置を中央揃えにします。  
    マージン: 5px;  
} 

.メッセージコンテンツ{  
    ディスプレイ: フレックス;  
    コンテンツの中央揃え: 中央;
    コンテンツの位置を中央揃えにします。
    背景色: #51D15B;  
    パディング:5px 10px;
    境界線の半径: 15px;  
    色: #fff;  
} 

.その他のメッセージの内容{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    コンテンツの位置を中央揃えにします。
    背景色: #79C2EA;
    パディング: 5px 10px;
    境界線の半径: 15px;
    色: #fff;
}

.メッセージコンテンツスパン{
    パディング:20px 0px;
}

.user-chat-img {  
    幅: 50px;  
    高さ: 50px;  
} 

.その他のメッセージコンテンツスパン{
    パディング: 20px 0px;
}

.メッセージ矢印{
    幅: 0;
    高さ: 0;
    境界線の幅:8px;
    境界線のスタイル: solid;
    境界線の色: 透明 透明 透明 #51D15B;
    位置合わせ: 中央;
}

.その他のメッセージ矢印{
    幅: 0;
    高さ: 0;
    境界線の幅: 8px;
    境界線のスタイル: solid;
    境界線の色: 透明 #79C2EA 透明 透明;
    位置合わせ: 中央;
}

.ユーザー情報{
    ディスプレイ: フレックス;
    flex-direction: 列;
    align-content:フレックスエンド;
}
.その他のユーザー情報{
    ディスプレイ: フレックス;
    flex-direction: 列;
    align-content:フレックスエンド;
}

.ユーザーチャット名{
    色: #333;
    フォントサイズ: 16px;
    テキスト配置: 中央;
}

/* チャット入力ボックス*/
.チャット編集{
    上マージン: 5px;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    ボックスの影: 1px 1px 15px #7B8C99;
    オーバーフロー: 非表示;
}

/* チャット入力ボックス入力領域*/
.編集ボックス{
    幅: 80%;
    高さ: 100%;
    マージン: 5px;
    境界線: なし;
    アウトライン: なし;
}

/* チャット入力ボックスボタン*/
.編集ボタン{
    高さ: 100%;
    パディング: 5px 15px;
    背景: #fff;
    色: #79C2EA;
    アウトライン: なし;
    境界線: なし;
    境界線の半径: 15px;
    カーソル: ポインタ;
    フォントサイズ: 14px;
    フォントの太さ: 太字;
}

/* 体の右側 */
.チャット本体右
    高さ: 100%;
    幅: 30%;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    マージン: 5px;
    ボックスの影: 1px 1px 15px #7B8C99;
}

.ユーザー名{
    マージン: 15px;
    フォントサイズ: 18px;
    フォントの太さ: 太字;
    色: #79C2EA;
}

.user-img{
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 5px;
}

.オンラインカウント{
    フォントサイズ: 18px;
    フォントの太さ: 太字;
    色: #79C2EA;
}

/* 小型画面に対応 */
@media スクリーンと (最大幅:420px) {
    .チャットボックス{
        幅: 50%;
        最大幅: 720px;
        最小幅: 300px;
        高さ: 80%;
        最小高さ: 530px;
        最大高さ: 530px;
    }
    .チャット本体左{
        高さ: 100%;
        幅: 100%;
        ディスプレイ: フレックス;
        flex-direction: 列;
        コンテンツの両端揃え: スペースを空ける;
        マージン: 5px;
    }
    .チャット本体右
        表示: なし;
    }
}

インデックス

// URL の内容を取得します。 var url = decodeURI(location.href).split('?')[1].split('&'); //..配列の最初の要素は画像パス、2 番目の要素はユーザー名です。 console.log(url);

// チャットコンテンツボックスを取得します。var chatContent = document.getElementsByClassName('chat-content')[0];

// チャット入力ボックスを取得します。var editBox = document.getElementsByClassName('edit-box')[0];

// チャット入力ボックスの送信ボタンを取得します。var editButton = document.getElementsByClassName('edit-button')[0];

// ユーザー名列を取得します var userName = document.getElementsByClassName('user-name')[0];

// オンライン人数の列を取得します。var onlineCount = document.getElementsByClassName('online-count')[0];

// ログインページの名前は右側に配置されます userName.innerHTML = url[1].split('=')[1];
var userImg = document.getElementsByClassName('user-img')[0];

// ログインページのアバターを右側に配置します userImg.src = `./img/${url[0].split('=')[1]}`;
var logOut = document.getElementsByClassName('log-out')[0];

// クリック イベントをバインドするためにボタンを送信します editButton.addEventListener('click',sendMessage);

// ログアウトボタンのクリックイベントをバインドする logOut.addEventListener('click',closePage);

// Enter キーをバインドしてイベントを送信します document.onkeydown = function(event){
    var e = イベント || window.event;
    if(e && e.keyCode === 13){
        if(editBox.value !== ''){
            編集ボタンをクリックする。
        }
    }
};

// ページを閉じる function closePage(){
    var userAgent = navigator.userAgent;
    コンソールにログ出力します。

    if(userAgent.indexOf('Firefox') != -1 || userAgent.indexOf("Chrome") != -1){ //..Firefox または Google の場合 window.location.href = "about:blank";
    }それ以外{
        ウィンドウをオープンするには、次のようにします。
        ウィンドウを開きます("","_self");
        ウィンドウを閉じる();
    }
}

// ソケット部分 var socket = io();

// メッセージが受信され、それがローカルではない場合にチャットバブルを生成します socket.on('message',function(information){
    console.log('メッセージを受信しました',information);
    if(information.name !== userName.textContent){ // ローカルではない createOtherMessage(information); // チャットバブルを生成する}
});

// 誰かがソケットに接続すると、socket.on('connected', function(onlinecount) {
    console.log(`誰かがログインしています。オンライン人数は: ${onlinecount}`);
    onlineCount.innerHTML = 'オンライン:' + onlinecount;
});

// 切断を受信すると、socket.on('disconnected', function(onlinecount){
    console.log(`誰かが切断しました: 現在の人数: ${onlinecount}`);
    onlineCount.innerHTML = 'オンライン:' + onlinecount;
});

//ローカルメッセージを送信する function sendMessage(){
    if(editBox.value != ''){ //..送信されたコンテンツが空でない場合 var myInformation = {
            名前:userName.textContent,
            チャットコンテンツ: editBox.value、
            画像: userImg.src
        };
        socket.emit('message',myInformation);
        createMyMessage(); // ネイティブチャットバブルを作成 editBox.value = ''; //..テキストボックスをクリア}
}

// チャットバブルを生成する function createMyMessage(){
    var myMessageBox = document.createElement('div');
    myMessageBox.className = 'my-message-box';

    var messageContent = document.createElement('div');
    messageContent.className = 'メッセージコンテンツ';
    var テキスト = document.createElement('span');
    テキストのinnerHTML = editBox.value;
    メッセージコンテンツ.appendChild(テキスト);
    myMessageBox.appendChild(メッセージコンテンツ);

    var arrow = document.createElement('div');
    arrow.className = 'メッセージ矢印';
    myMessageBox.appendChild(矢印);

    var ユーザー情報 = document.createElement('div');
    userInformation.className = 'ユーザー情報';
    var userChatImg = document.createElement('img');
    userChatImg.className = 'ユーザーチャット画像';
    userChatImg.src = userImg.src;
    var userChatName = document.createElement('div');
    userChatName.className = 'ユーザーチャット名';
    userChatName.innerHTML = ユーザー名.textContent;
    ユーザー情報。userChatImg の子を追加します。
    ユーザー情報.appendChild(ユーザーチャット名);
    myMessageBox.appendChild(ユーザー情報);

    チャットコンテンツ。appendChild(myMessageBox);

    chatContent.scrollTop = chatContent.scrollHeight; // 最新のチャットコンテンツまでスクロールします}

// 他のユーザー用のチャットバブルを生成する function createOtherMessage(information) {  
    var otherMessageBox = document.createElement('div');  
    otherMessageBox.className = 'その他のメッセージボックス'; 

    var otherUserInformation = document.createElement('div');  
    otherUserInformation.className = 'その他のユーザー情報';  
    var userChatImg = document.createElement('img');  
    userChatImg.className = 'ユーザーチャット画像';  
    userChatImg.src = 情報.img;  
    var userChatName = document.createElement('span');  
    userChatName.className = 'ユーザーチャット名';  
    userChatName.innerHTML = 情報.名前;  
    他のユーザー情報。userChatImg の子を追加します。  
    他のユーザー情報。ユーザーチャット名を追加します。  
    他のユーザー情報を追加します。 

    var otherMessageArrow = document.createElement('div');  
    otherMessageArrow.className = 'その他のメッセージ矢印';  
    他のメッセージボックス。他のメッセージ矢印の子を追加します。 

    var otherMessageContent = document.createElement('div');  
    otherMessageContent.className = 'その他のメッセージコンテンツ';  
    var テキスト = document.createElement('span');  
    テキストのinnerHTML = 情報.chatContent;  
    他のメッセージコンテンツ。テキストを追加します。  
    他のメッセージボックス。他のメッセージコンテンツに子を追加します。 

    チャットコンテンツ。他のメッセージボックスの子を追加します。 

    チャットコンテンツのトップスクロールの高さをチャットコンテンツの高さに変更します。  
}

サーバー.js

// インポートはあいまいである必要があります var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var パス = require('パス');

// オンライン数統計 var onlineCount = 0;
app.use(express.static(__dirname));

// パスマッピング app.get('/login.html',function(request,response){
    レスポンス.sendFile('login.html');
});

// ユーザーが接続すると io.on('connection',function(socket){
    console.log('ユーザーが接続しました');

    //オンラインユーザーの数をクライアントに送信します io.emit('connected',++onlineCount);

    // ユーザーが切断したとき socket.on('disconnect',function(){

            console.log('ユーザーが切断されました');

            //クライアントの数に送信します io.emit('disconnected',--onlineCount);
            console.log(オンラインカウント);
    });

    // クライアントからメッセージを受信 socket.on('message',function(message){
        // クライアントにメッセージを送信します console.log('サーバーが受信したメッセージは次のとおりです:',message);
        io.emit('メッセージ',メッセージ);
    });
});

var server = http.listen(4000,function(){
    console.log('サーバーは実行中です');
});

やっと

端末入力