Nodejsでチャットルームを構築する-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejsでチャットルームを構築する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 24, 2023 pm 12:23 PM

インターネットの急速な発展に伴い、人々がお互いにコミュニケーションをとる方法も常に変化しています。チャットルームは、地理的またはタイムゾーンの制限に関係なく、ユーザーがリアルタイムで通信および情報交換できるようにするオンラインインスタントメッセージングアプリケーションです。チャットルームを実装するには様々な方法がありますが、この記事ではnodejsでチャットルームを構築する方法を紹介します。

1. チャットルームの基本的な実装原理

チャットルームはネットワークベースのインスタントメッセージングシステムであり、その実装原理は非常にシンプルです。ユーザーがチャットルームに入ると、まずチャットサーバーに接続する必要があり、サーバーはユーザーの接続情報をチャットルームのユーザーリストに追加します。ユーザーがチャットルームにメッセージを送信すると、サーバーはそのメッセージをチャットルーム内のすべてのユーザーにブロードキャストします。さらに、サーバーはユーザーの接続ステータスと切断されたユーザー情報をリアルタイムで監視する必要もあります。

2. 準備

チャットルームの構築を開始する前に、nodejs と npm がインストールされていることを確認してください。まだインストールされていない場合は、nodejs 公式 Web サイトにアクセスしてダウンロードしてインストールしてください。

3. チャットルームのサーバー側を構築する

プロジェクトを作成する

まず、ローカルにチャットルームプロジェクトを作成する必要があります。環境を確認し、必要なモジュールをダウンロードします。まずコマンドラインでプロジェクトディレクトリを作成し、次のように入力します:

mkdir myChatRoom
cd myChatRoom

次に、npm を使用してプロジェクトを初期化します:

npm init

次に、使用する必要があるモジュールをインストールします:

npm i express socket.io -S

上記のコマンドの :

express は、HTTP リクエストとレスポンスを処理するために使用される、一般的に使用される Nodejs Web フレームワークです。
socket.io は、WebSocket カプセル化に基づくリアルタイム通信ライブラリです。

サーバー側コードの実装

プロジェクトのルートディレクトリで、index.js ファイルを作成し、次のコードを

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

const onlineUsers = {};
const onlineCount = 0;

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('login', (user) => {
    socket.nickname = user.username;
    // check if the user already exists
    if (!onlineUsers.hasOwnProperty(socket.nickname)) {
      onlineUsers[socket.nickname] = user.avatar;
      onlineCount++;
    }

    io.emit('login', { onlineUsers, onlineCount, user });
    console.log(`user ${user.username} joined`);
  });

  socket.on('chatMessage', (msg) => {
    io.emit('chatMessage', { nickname: socket.nickname, message: msg });
  });

  socket.on('disconnect', () => {
    if (onlineUsers.hasOwnProperty(socket.nickname)) {
      const userLeft = { username: socket.nickname, avatar: onlineUsers[socket.nickname] };
      delete onlineUsers[socket.nickname];
      onlineCount--;

      io.emit('logout', { onlineUsers, onlineCount, user: userLeft });
      console.log(`user ${userLeft.username} left`);
    }
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

# に貼り付けます。 # #上記のコードでは、http サーバーを起動し、socket.io を使用して HTTP サービスをアップグレードして、WebSocket をサポートしました。次に、いくつかのソケットイベントが定義されていることがわかります。

ユーザーがログインすると、サーバーはログインイベントを送信し、ユーザーの情報をオンラインユーザーリストに追加します。その後、サーバーはオンラインユーザーリストを他のユーザーにブロードキャストします。
ユーザーがメッセージを送信すると、サーバーは chatMessage イベントを送信し、すべてのオンラインユーザーにメッセージをブロードキャストします。
ユーザーが切断すると、サーバーは切断イベントを送信し、オンラインユーザーリストからユーザーを削除します。

4. チャットルームクライアントを構築する

プロジェクトのパブリックディレクトリに HTML ファイルを作成します。次のコードをファイルにコピーします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
    <style>
        #nickname {
            display: none;
        }

        #messages {
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-top: 10px;
        }

        img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="loginPanel">
    <p>输入一个昵称:</p>
    <input type="text" id="nicknameInput">
    <button id="submit">进入聊天室</button>
</div>
<div id="chatroom" style="display:none;">
    <div id="nickWrapper">
        <img  src="/static/imghwm/default1.png"  data-src="./socket.io/socket.io.js"  class="lazy"  id="avatarImg"/ alt="Nodejsでチャットルームを構築する" >
        <span id="nickname"></span>
        <button id="logout">退出聊天室</button>
    </div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="请输入聊天信息">
    <button id="sendBtn">发送</button>
</div>

<script></script>
<script src="./chat.js"></script>
</body>
</html>

上記のコードでは、HTML にニックネーム入力ボックス、チャットルームに入るボタン、チャットルームから出るボタン、および ID を追加しました。「messages」要素、メッセージを送信するための入力ボックス、およびメッセージを送信するためのボタンを備えています。このうち、チャットルームに入るとニックネーム入力ボックスとチャットルームに入るボタンが非表示になり、オンラインユーザーのニックネームとアバターが表示されます。

パブリックディレクトリに chat.js ファイルを作成し、次のコードをそこに貼り付けます:

const socket = io();
const submitBtn = document.querySelector('#submit');
const logoutBtn = document.querySelector('#logout');
const sendBtn = document.querySelector('#sendBtn');
const messageInput = document.querySelector('#messageInput');
const nicknameInput = document.querySelector('#nicknameInput');
const chatWrapper = document.querySelector('#chatroom');
const loginPanel = document.querySelector('#loginPanel');
const avatarImg = document.querySelector('#avatarImg');
const nickname = document.querySelector('#nickname');
const messages = document.querySelector('#messages');

let avatar;


// 提交昵称登录
submitBtn.addEventListener('click', function () {
  const nickname = nicknameInput.value;
  if (nickname.trim().length > 0) {
    avatar = `https://avatars.dicebear.com/api/bottts/${Date.now()}.svg`;
    socket.emit('login', { username: nickname, avatar: avatar });
  } else {
    alert('昵称为空，请重新输入');
    nicknameInput.value = '';
    nicknameInput.focus();
  }
});

// 退出登录
logoutBtn.addEventListener('click', function () {
  socket.disconnect();
});

// 发送消息
sendBtn.addEventListener('click', function () {
  const msg = messageInput.value.trim();
  if (msg.length > 0) {
    socket.emit('chatMessage', msg);
    messageInput.value = '';
    messageInput.focus();
  }
});

// 回车发送消息
messageInput.addEventListener('keyup', function (e) {
  e.preventDefault();
  if (e.keyCode === 13) {
    sendBtn.click();
  }
});

// 服务器发送登录信号
socket.on('login', (info) => {
  loginPanel.style.display = 'none';
  chatWrapper.style.display = 'block';
  avatarImg.src = avatar;
  nickname.innerText = nicknameInput.value;
  renderUserList(info.onlineUsers);
});

// 服务器发送聊天消息信号
socket.on('chatMessage', (data) => {
  renderChatMessage(data.nickname, data.message);
});

// 服务器发送退出信号
socket.on('logout', (info) => {
  renderUserList(info.onlineUsers);
});

// 渲染在线用户列表
function renderUserList(users) {
  const list = document.createElement('ul');
  Object.keys(users).forEach((nickname) => {
    const item = `
    <li>
      <img  src="/static/imghwm/default1.png"  data-src="${users[nickname]}"  class="lazy"/ alt="Nodejsでチャットルームを構築する" >
      <span>${nickname}</span>
    </li>
    `;
    list.innerHTML += item;
  });
  chatWrapper.insertBefore(list, messages);
}

// 渲染聊天消息
function renderChatMessage(nickname, message) {
  const msg = document.createElement('div');
  msg.innerHTML = `<p>${nickname}: ${message}</p>`;
  messages.appendChild(msg);
}

In上記のコードでは、次の機能を実装しています。

チャットメッセージがある場合、サーバーは「chatMessage」イベントを送信し、メッセージの内容をブロードキャストを通じてすべてのクライアントにプッシュします。
ユーザーが切断すると、「オンラインユーザーリスト」はそのユーザーをユーザーリストから削除し、ブロードキャストを通じて現在の「オンラインユーザー」リストをすべてのクライアントにプッシュします。

5. プロジェクトを実行します

コマンドラインでプロジェクトのルートディレクトリを入力し、次のコマンドを入力してプロジェクトを開始します:

node index.js

次に、http を入力します。ブラウザ：://localhost:3000/ サーバーにアクセスし、チャットルームに入ります。

6. 概要

この記事では、nodejs とソケット.io に基づいてシンプルなチャットルームを実装し、チャットルームを構築するためのシンプルで安定した便利な方法を提供しました。。これは非常に基本的なチャットルームにすぎませんが、読者はこの記事の紹介と実践を通じて、nodejs を使用したチャットルームの構築についておおよその理解を得ることができると思います。

以上がNodejsでチャットルームを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

React vs.バックエンドフレームワーク：比較Apr 13, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PM

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。

断片の使用法を使用しますApr 02, 2025 pm 05:50 PM

反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。