検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejsでチャットルームを構築する

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

WBOY
WBOYオリジナル
2023-05-24 12:23:381014ブラウズ

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

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

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

2. 準備

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

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

  1. プロジェクトを作成する

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

mkdir myChatRoom
cd myChatRoom

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

npm init

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

npm i express socket.io -S

上記のコマンドの :

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

プロジェクトのルート ディレクトリで、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 をサポートしました。次に、いくつかのソケット イベントが定義されていることがわかります。

    新しいソケット接続があると、サーバーは接続イベントを送信し、「ユーザーが接続されました」と出力します。
  1. ユーザーがログインすると、サーバーはログイン イベントを送信し、ユーザーの情報をオンライン ユーザー リストに追加します。その後、サーバーはオンライン ユーザー リストを他のユーザーにブロードキャストします。
  2. ユーザーがメッセージを送信すると、サーバーは chatMessage イベントを送信し、すべてのオンライン ユーザーにメッセージをブロードキャストします。
  3. ユーザーが切断すると、サーバーは切断イベントを送信し、オンライン ユーザー リストからユーザーを削除します。
4. チャット ルーム クライアントを構築する

    HTML ファイルを作成する
プロジェクトのパブリック ディレクトリに 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 id="avatarImg" src=""/>
        <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 src="./socket.io/socket.io.js"></script>
<script src="./chat.js"></script>
</body>
</html>

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

    チャット ルーム クライアント JS コードの作成
パブリック ディレクトリに 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="${users[nickname]}"/>
      <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上記のコードでは、次の機能を実装しています。

    ユーザーが「ログイン」ボタンをクリックすると、「ログイン」イベントがサーバーに送信され、サーバーはユーザーの追加を委託されます。内部的に「オンライン ユーザー」リストに追加し、ブロードキャストを通じて現在の「オンライン ユーザー」リストをすべてのクライアントにプッシュします。
  1. チャット メッセージがある場合、サーバーは「chatMessage」イベントを送信し、メッセージの内容をブロードキャストを通じてすべてのクライアントにプッシュします。
  2. ユーザーが切断すると、「オンライン ユーザー リスト」はそのユーザーをユーザー リストから削除し、ブロードキャストを通じて現在の「オンライン ユーザー」リストをすべてのクライアントにプッシュします。
5. プロジェクトを実行します

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

node index.js

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

6. 概要

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

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

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

関連記事

続きを見る