1対1チャットの基礎：MySQL、PHP、WebSocketsで実現するリアルタイム会話

2024-05-22

MySQLデータベーススキーマ：シンプルチャット（1対1）

データベーススキーマ

アプリケーションに必要なテーブルは次のとおりです。

users
- user_id (INT, PRIMARY KEY)
- username (VARCHAR(255))
messages
- sender_id (INT, FOREIGN KEY REFERENCES users(user_id))
- content (TEXT)
- timestamp (DATETIME)

usersテーブルには、ユーザーのID、ユーザー名、パスワードを保存します。messagesテーブルには、メッセージのID、送信者ID、受信者ID、メッセージの内容、およびタイムスタンプを保存します。

PHPコード

次のコードは、メッセージを送信するためのPHPスクリプトです。

<?php

require 'dbconnect.php';

$sender_id = $_SESSION['user_id'];
$recipient_id = $_POST['recipient_id'];
$content = $_POST['content'];

$sql = "INSERT INTO messages (sender_id, recipient_id, content, timestamp) VALUES ($sender_id, $recipient_id, '$content', NOW())";

if ($mysqli->query($sql) === TRUE) {
    echo "Message sent successfully!";
} else {
    echo "Error sending message: " . $mysqli->error;
}

$mysqli->close();

?>

このスクリプトは、dbconnect.phpファイルに接続します。このファイルには、データベースに接続するためのコードが含まれています。次に、スクリプトは送信者ID、受信者ID、メッセージの内容、およびタイムスタンプを取得します。次に、スクリプトはメッセージをデータベースに挿入するSQLクエリを実行します。クエリが成功すると、スクリプトは「メッセージが送信されました！」というメッセージを出力します。クエリが失敗すると、スクリプトはエラーメッセージを出力します。

このチュートリアルでは、PHPとMySQLを使用してシンプルなチャットアプリケーションを作成する方法を説明しました。このアプリケーションでは、ユーザーは他のユーザーと1対1でチャットできます。

必要なファイル

このコードを実行するには、以下の3つのファイルが必要です。

dbconnect.php：データベース接続用のコードを含むファイル
index.php：ユーザーインターフェースとメッセージ送信用のコードを含むファイル
chat.php：メッセージの読み込みと表示用のコードを含むファイル

dbconnect.php

<?php

$dbhost = "localhost";
$dbusername = "username";
$dbpassword = "password";
$dbname = "chat";

$mysqli = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);

if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
}

このファイルは、データベースに接続するための情報を設定します。

index.php

<?php

session_start();

if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

$user_id = $_SESSION['user_id'];

require 'dbconnect.php';

$sql = "SELECT username FROM users WHERE user_id = $user_id";
$result = $mysqli->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $username = $row['username'];
    }
} else {
    echo "Error: User not found";
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Application</title>
    <style>
        body {
            font-family: sans-serif;
        }

        .chat-container {
            width: 600px;
            margin: 0 auto;
        }

        .chat-header {
            background-color: #eee;
            padding: 10px;
        }

        .chat-header h2 {
            margin: 0;
        }

        .chat-messages {
            height: 400px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .chat-message {
            margin-bottom: 10px;
        }

        .chat-message .sender {
            font-weight: bold;
        }

        .chat-message .content {
            margin-left: 10px;
        }

        .chat-form {
            margin-top: 10px;
        }

        .chat-form input[type="text"] {
            width: 400px;
            padding: 5px;
        }

        .chat-form button {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>Welcome, <?php echo $username; ?></h2>
        </div>

        <div class="chat-messages">
            <?php
            $sql = "SELECT messages.*, users.username AS sender_username FROM messages JOIN users ON messages.sender_id = users.user_id WHERE recipient_id = $user_id ORDER BY timestamp ASC";
            $result = $mysqli->query($sql);

            if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    echo '<div class="chat-message">';
                    echo '<span class="sender">' . $row['sender_username'] . ':</span>';
                    echo '<span class="content">' . $row['content'] . '</span>';
                    echo '</div>';
                }
            } else {
                echo "No messages yet";
            }
            ?>
        </div>

        <div class="chat-form">
            <form action="chat.php" method="post">
                <input type="text" name="content" placeholder="Enter message">
                <button type="submit">Send</button>
            </form>
        </div>

他の方法：WebSocketsを使用したリアルタイムチャット

WebSocketsは、クライアントとサーバー間で双方向のリアルタイム通信を可能にする技術です。これにより、サーバーはクライアントにメッセージをプッシュして、チャットスレッドをリアルタイムで更新することができます。

WebSocketsチャットシステムは、以下のコンポーネントで構成されます。

クライアントサイドJavaScriptコード：このコードは、WebSockets接続を確立し、メッセージの送受信を処理します。
サーバーサイドコード：このコードは、WebSockets接続を処理し、メッセージをブロードキャストします。
データベース：このデータベースには、ユーザー情報、メッセージ、およびその他のチャット関連データが保存されます。

WebSocketsチャットシステムの動作

クライアントは、サーバーにWebSockets接続を確立します。
クライアントは、メッセージを送信します。
サーバーは、メッセージをデータベースに保存し、すべての接続済みクライアントにブロードキャストします。
クライアントは、受信したメッセージを処理し、チャットスレッドを更新します。

WebSocketsチャットシステムの利点

低遅延：WebSocketsは、HTTPリクエスト/レスポンスベースのチャットシステムよりも低遅延で通信できます。
スケーラビリティ：WebSocketsは、多くの接続を処理できるため、スケーラブルなチャットシステムを構築するのに適しています。

WebSocketsチャットシステムの例

以下の例は、Node.jsとSocket.IOを使用してWebSocketsチャットシステムを実装する方法を示しています。

クライアントサイドJavaScriptコード

const socket = io('http://localhost:3000');

socket.on('message', (message) => {
  console.log(message);
  const chatMessage = document.createElement('div');
  chatMessage.textContent = message;
  document.getElementById('chat-messages').appendChild(chatMessage);
});

const sendMessage = () => {
  const message = document.getElementById('message-input').value;
  socket.emit('message', message);
  document.getElementById('message-input').value = '';
};

document.getElementById('send-button').addEventListener('click', sendMessage);

サーバーサイドNode.jsコード

const express = require('express');
const socketIO = require('socket.io');

const app = express();
const server = app.listen(3000);
const io = socketIO(server);

io.on('connection', (socket) => {
  socket.on('message', (message) => {
    io.emit('message', message);
  });
});