ホームページ  >  記事  >  バックエンド開発  >  PHP は音楽共有とオンライン再生のためのリアルタイム チャット システムを開発

PHP は音楽共有とオンライン再生のためのリアルタイム チャット システムを開発

PHPz
PHPzオリジナル
2023-08-25 22:34:49592ブラウズ

PHP は音楽共有とオンライン再生のためのリアルタイム チャット システムを開発

PHP は音楽共有とオンライン再生のためのリアルタイム チャット システムを開発

インターネットの発展に伴い、リアルタイム チャット システムは重要なコミュニケーション ツールとなっています。人々の日常生活。ユーザーエクスペリエンスを向上させるために、チャットシステムに音楽共有機能やオンライン再生機能を追加することで、ユーザーはチャットプロセス中に同時に音楽を楽しむことができ、コミュニケーションの楽しさを高めることができます。この記事では、PHP を使用してリアルタイム チャット システムの音楽共有およびオンライン再生機能を開発する方法と、対応するコード例を紹介します。

1. 環境の準備

開発を開始する前に、PHP を実行するためのサーバー環境を準備する必要があります。開発とテストを容易にするために、Apache サーバー、MySQL データベース、PHP インタープリターを含む XAMPP や WAMP などの統合開発環境を使用することをお勧めします。

2. データベースの作成

まず、チャット記録と音楽情報を保存するデータベースを作成する必要があります。 MySQL で次の SQL ステートメントを実行して、対応するデータ テーブルを作成します:

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL
);

CREATE TABLE messages (
    id INT PRIMARY KEY AUTO_INCREMENT,
    sender_id INT NOT NULL,
    receiver_id INT NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE music (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(100) NOT NULL,
    artist VARCHAR(100) NOT NULL,
    url VARCHAR(255) NOT NULL
);

3. ユーザーのログインと登録

チャット システムでは、チャット機能を使用するにはユーザーの登録とログインが必要です。 。次に、PHP を使用して、ユーザーのログインと登録のためのコードを作成します。

  1. #ユーザー登録ページ (register.php)

    <!DOCTYPE html>
    <html>
    <head>
     <title>用户注册</title>
    </head>
    <body>
     <h1>用户注册</h1>
     <form action="register.php" method="POST">
         <input type="text" name="username" placeholder="用户名" required>
         <br><br>
         <input type="password" name="password" placeholder="密码" required>
         <br><br>
         <button type="submit">注册</button>
     </form>
    </body>
    </html>

  2. ユーザー登録処理 (register.php)

    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
     $username = $_POST['username'];
     $password = $_POST['password'];
    
     // 将用户名和密码插入数据库中
     $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
     $query = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
     mysqli_query($connection, $query);
     // 注册成功后跳转到登录页面
     header('Location: login.php');
     exit();
    }
    ?>

4. ユーザーのログインと検証

  1. ユーザー ログイン ページ (login.php)

    <!DOCTYPE html>
    <html>
    <head>
     <title>用户登录</title>
    </head>
    <body>
     <h1>用户登录</h1>
     <form action="login.php" method="POST">
         <input type="text" name="username" placeholder="用户名" required>
         <br><br>
         <input type="password" name="password" placeholder="密码" required>
         <br><br>
         <button type="submit">登录</button>
     </form>
    </body>
    </html>

  2. ユーザー ログインの検証 (login.php) )

    <?php
    session_start();
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
     $username = $_POST['username'];
     $password = $_POST['password'];
    
     // 根据用户名查询数据库
     $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
     $query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
     $result = mysqli_query($connection, $query);
    
     // 验证用户名和密码是否正确
     if (mysqli_num_rows($result) == 1) {
         // 登录成功后保存用户信息到session中
         $user = mysqli_fetch_assoc($result);
         $_SESSION['user_id'] = $user['id'];
         $_SESSION['username'] = $user['username'];
         // 登录成功后跳转到聊天页面
         header('Location: chat.php');
         exit();
     } else {
         echo '用户名或密码错误';
     }
    }
    ?>

5. リアルタイムチャット機能

チャットページでは、Ajaxを利用してリアルタイムチャット機能を実装しています。ユーザーがメッセージを送信すると、そのメッセージがサーバーに送信されてデータベースに保存され、リアルタイムでチャット ウィンドウにメッセージが表示されます。

  1. チャット ページ (chat.php)

    <?php
    session_start();
    
    if (!isset($_SESSION['user_id'])) {
     header('Location: login.php');
     exit();
    }
    
    $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
    
    // 查询历史消息
    $query = "SELECT * FROM messages";
    $result = mysqli_query($connection, $query);
    $messages = mysqli_fetch_all($result, MYSQLI_ASSOC);
    ?>
    
    <!DOCTYPE html>
    <html>
    <head>
     <title>实时聊天</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
     <h1>实时聊天</h1>
    
     <div id="chat-box">
         <?php foreach ($messages as $message): ?>
             <p><?php echo $message['content']; ?></p>
         <?php endforeach; ?>
     </div>
    
     <form id="message-form">
         <input type="text" name="message" placeholder="输入消息" required>
         <button type="submit">发送</button>
     </form>
    
     <script>
         // 页面加载完成后,滚动到底部
         $(document).ready(function() {
             $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
         });
    
         // 提交消息表单
         $('#message-form').submit(function(event) {
             event.preventDefault();
             var message = $('input[name="message"]').val();
    
             $.ajax({
                 url: 'send_message.php',
                 method: 'POST',
                 data: {message: message},
                 success: function() {
                     // 清空输入框内容
                     $('input[name="message"]').val('');
                 }
             });
         });
    
         // 定时刷新消息
         setInterval(function() {
             $.ajax({
                 url: 'get_messages.php',
                 method: 'GET',
                 dataType: 'json',
                 success: function(response) {
                     var messages = response.messages;
                     var html = '';
    
                     // 生成消息HTML
                     for (var i = 0; i < messages.length; i++) {
                         html += '<p>' + messages[i].content + '</p>';
                     }
    
                     // 更新聊天窗口内容
                     $('#chat-box').html(html);
    
                     // 滚动到底部
                     $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
                 }
             });
         }, 1000);
     </script>
    </body>
    </html>

  2. メッセージ コードの送信 (send_message.php)

    <?php
    session_start();
    
    if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] != 'POST') {
     exit();
    }
    
    $sender_id = $_SESSION['user_id'];
    $receiver_id = 0; // 这里可以根据实际情况设置接收者的ID
    $content = $_POST['message'];
    
    $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
    $query = "INSERT INTO messages (sender_id, receiver_id, content) VALUES ($sender_id, $receiver_id, '$content')";
    mysqli_query($connection, $query);
    ?>

  3. メッセージコードの取得(get_messages.php)

    <?php
    $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
    $query = "SELECT * FROM messages";
    $result = mysqli_query($connection, $query);
    $messages = mysqli_fetch_all($result, MYSQLI_ASSOC);
    
    echo json_encode(['messages' => $messages]);
    ?>

6. 音楽共有とオンライン再生

音楽共有とオンライン再生機能を実現するために、データベースには、音楽のタイトル、アーティスト、および URL 情報が保存されます。ユーザーは音楽を追加して他のユーザーと共有でき、他のユーザーはチャット ページ内のリンクをクリックして音楽を再生できます。

    #音楽ページの追加 (add_music.php)
  1. <?php
    session_start();
    
    if (!isset($_SESSION['user_id'])) {
     header('Location: login.php');
     exit();
    }
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
     $title = $_POST['title'];
     $artist = $_POST['artist'];
     $url = $_POST['url'];
    
     // 将音乐信息插入数据库中
     $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
     $query = "INSERT INTO music (title, artist, url) VALUES ('$title', '$artist', '$url')";
     mysqli_query($connection, $query);
     // 添加成功后跳转到聊天页面
     header('Location: chat.php');
     exit();
    }
    ?>
    
    <!DOCTYPE html>
    <html>
    <head>
     <title>添加音乐</title>
    </head>
    <body>
     <h1>添加音乐</h1>
     <form action="add_music.php" method="POST">
         <input type="text" name="title" placeholder="标题" required>
         <br><br>
         <input type="text" name="artist" placeholder="艺术家" required>
         <br><br>
         <input type="text" name="url" placeholder="URL" required>
         <br><br>
         <button type="submit">添加</button>
     </form>
    </body>
    </html>

  2. 音楽再生コード (play_music.php)
  3. <?php
    if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['id'])) {
     $id = $_GET['id'];
    
     // 根据ID查询音乐信息
     $connection = mysqli_connect('localhost', 'root', '', 'chat_system');
     $query = "SELECT * FROM music WHERE id=$id";
     $result = mysqli_query($connection, $query);
     $music = mysqli_fetch_assoc($result);
     // 输出音乐信息,并自动播放
     echo <<<HTML
     <h1>{$music['title']}</h1>
     <p>{$music['artist']}</p>
     <audio controls autoplay>
         <source src="{$music['url']}" type="audio/mpeg">
         Your browser does not support the audio element.
     </audio>
     HTML;
    } else {
     exit();
    }
    ?>

  4. 7. 概要

この記事では、PHP を使用してリアルタイム チャット システムの音楽共有およびオンライン再生機能を開発し、データベース、AJAX、フロントエンドを組み合わせてこの機能を実現する方法を示します。テクノロジー。ユーザーはチャット中に音楽を共有し、同時にオンラインで再生することができ、チャットのコンテンツとエクスペリエンスを豊かにすることができます。コード例の提供に加えて、関連するデータベース設計とユーザーのログイン検証の開発プロセスも紹介します。この記事がこの機能の理解と実装に役立つことを願っています。

以上がPHP は音楽共有とオンライン再生のためのリアルタイム チャット システムを開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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