Socket.io を使用してリアルタイムチャットアプリケーションを構築する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Socket.io を使用してリアルタイムチャットアプリケーションを構築する方法

Linda Hamilton

Nov 26, 2024 pm 08:40 PM

How to Build a Real-Time Chat Application Using Socket.io

このチュートリアルでは、Socket.io と Node.js および Express を使用してリアルタイムチャットアプリケーションを構築するプロセスを説明します。これは、Web アプリケーションでリアルタイム通信がどのように機能するかを実践的に理解できる初心者向けのガイドです。 Socket.io を使用してサーバーをセットアップし、フロントエンドインターフェイスを作成し、クライアントとサーバー間の通信を確立する方法を説明します。

何を学ぶか

Socket.io とは何か、そしてその仕組み
基本的な Node.js サーバーのセットアップ
リアルタイム通信のための Socket.io の統合
HTML と JavaScript を使用してフロントエンドを構築する
リアルタイムでメッセージを送受信する

前提条件

始める前に、以下がインストールされていることを確認してください:

Node.js: ここからダウンロードできます。
npm (ノードパッケージマネージャー): これは Node.js にバンドルされているため、Node.js がインストールされている場合は、すでに npm がインストールされています。
JavaScript、HTML、CSS の基本的な理解も必要です。

ステップ 1: プロジェクトをセットアップする

新しいプロジェクトを設定することから始めましょう。

プロジェクト用に新しいディレクトリを作成し、そこに移動します:

mkdir リアルタイムチャット
cd リアルタイムチャット

新しい Node.js プロジェクトを初期化します:

npm init -y

必要な依存関係をインストールします。サーバーには Express が必要で、リアルタイム通信には Socket.io が必要です。

npm install Expressソケット.io

ステップ 2: バックエンドをセットアップする (Node.js および Express)

server.js という新しいファイルを作成します。このファイルにはバックエンドコードが含まれます。

server.js を作成し、次のコードを追加して、Socket.io を使用して基本的な Express サーバーをセットアップします。

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

// Set up the app
const app = express();
const server = http.createServer(app);
const io = socketIo(server);  // Initialize Socket.io

// Serve static files (for front-end)
app.use(express.static('public'));

// Listen for incoming socket connections
io.on('connection', (socket) => {
    console.log('A user connected');

    // Listen for messages from clients
    socket.on('chat message', (msg) => {
        // Emit the message to all connected clients
        io.emit('chat message', msg);
    });

    // Handle disconnection
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

ログイン後にコピー

説明:

私は Express を使用して静的ファイル (フロントエンド) を提供します。
Socket.io が初期化され、受信接続を待機します。
ユーザーが「チャットメッセージ」経由でメッセージを送信すると、そのメッセージは io.emit() を使用して接続されているすべてのクライアントにブロードキャストされます。
ユーザーが切断すると、サーバーはメッセージを記録します。

ステップ 3: フロントエンドをセットアップする (HTML および JavaScript)

次に、ユーザーがメッセージを送受信できるシンプルなフロントエンドを作成します。

プロジェクトディレクトリに public という名前のフォルダーを作成します。これにはフロントエンドファイルが保持されます。
パブリックフォルダー内に、index.html ファイルを作成します。これがチャットインターフェイスになります。

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

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>リアルタイム チャット</title>
    
        body { フォントファミリー: Arial、サンセリフ; }
        ul { リストスタイルタイプ: なし;パディング: 0; }
        li { パディング: 8px;マージン: 5px 0;背景色: #f1f1f1; }
        input[type="text"] {幅: 300px;パディング: 10px;マージン: 10px 0; }
        ボタン { パディング: 10px; }
    </スタイル>
</head>

    <h1>リアルタイム チャット アプリケーション</h1>

ログイン後にコピー

説明:

チャットインターフェイスには、メッセージを入力するための入力フィールドとメッセージを送信するためのボタンが含まれています。
Socket.io のクライアントライブラリを使用してサーバーとの接続を確立します。
メッセージが送信されると、チャットメッセージイベントを介して送信されます。
受信メッセージは

ステップ 4: アプリケーションを実行する

すべてのセットアップが完了したので、アプリケーションを実行してみましょう。

サーバーを起動します:

ノードサーバー.js

ブラウザを開いて http://localhost:3000 に移動します。チャットインターフェイスが表示されるはずです。
複数のタブまたは異なるブラウザで同じ URL を開いて、リアルタイム通信をテストします。 1 つのタブでメッセージを送信すると、他のすべてのタブにリアルタイムでメッセージが表示されます。

ステップ 5: 結論

おめでとうございます! Socket.io を使用してリアルタイムチャットアプリケーションを構築することに成功しました。このアプリケーションを使用すると、ユーザーはリアルタイムで相互に通信できるようになります。これは、多くの最新の Web アプリケーションにとって強力な機能です。これに基づいて、ユーザー認証、プライベートメッセージ、チャットルームなどの機能を追加できるようになりました。

次は何ですか?