この記事では、オンラインリアルタイム多人数チャットルームを実現するための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('サーバーは実行中です'); }); やっと 端末入力 ノードサーバー.js ブラウザのアドレスバーに入力 http://localhost:4000/ログイン.html 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.16 Win10 zip バージョンのインストールと設定のグラフィック チュートリアル
>>: Docker クロスホストネットワーク (オーバーレイ) の実装
この記事では、VMware Workstation Pro で Win10 オペレーティング システ...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...
XMeter API は、以下のサービスを含む、JMeter に基づくワンストップのオンライン イン...
この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...
目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...
この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...
最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...
Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...
世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移...
Docker はホストマシン上のブリッジを仮想化します。コンテナを作成して起動すると、各コンテナには...
Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...
序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...