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 をサポートしました。次に、いくつかのソケットイベントが定義されていることがわかります。

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 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」要素、メッセージを送信するための入力ボックス、およびメッセージを送信するためのボタンを備えています。このうち、チャットルームに入るとニックネーム入力ボックスとチャットルームに入るボタンが非表示になり、オンラインユーザーのニックネームとアバターが表示されます。

パブリックディレクトリに 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上記のコードでは、次の機能を実装しています。

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

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

node index.js

ログイン後にコピー

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

6. 概要

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

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

このウェブサイトの声明

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