PHP を使用して簡単なオンラインチャットルームを開発する方法-PHPチュートリアル-php.cn

PHP を使用して簡単なオンラインチャットルームを開発する方法

王林

リリース： 2023-09-21 08:40:01

オリジナル

1314 人が閲覧しました

PHP を使用して簡単なオンラインチャットルームを開発する方法

PHP を使用してシンプルなオンラインチャットルームを開発するにはどうすればよいですか?

インターネットの急速な発展に伴い、人々の間のコミュニケーションはますますインターネットに依存するようになりました。一般的なソーシャルツールとして、オンラインチャットルームは人々の日常生活に欠かせないものになっています。この記事では、PHP 言語を使用して簡単なオンラインチャットルームを開発する方法と具体的なコード例を紹介します。

事前準備
データベースとテーブルの作成
まず、チャットレコードを保存するテーブルをデータベースに作成します。次の SQL ステートメントを使用してテーブルを作成できます。
1
2
3
4
5
6
CREATE TABLE chat (
  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(30) NOT NULL,
  message TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)
ログイン後にコピー
このテーブルには、自動インクリメントされる ID、送信者のユーザー名、メッセージの内容、およびメッセージが送信された時間が含まれます。
チャットページの作成
プロジェクトディレクトリに、index.php という名前のファイルを作成します。このファイルはチャットページとして機能します。次のスタイルとスクリプトをファイルにインポートします:
1
2
3
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="script.js"></script>
ログイン後にコピー
ページで、チャット履歴を表示する div 要素を作成します:
1
<div id="chat-box"></div>
ログイン後にコピー
同時に、ユーザー名を入力するためのフォームを追加します

<form id="chat-form">
  <input type="text" id="username" placeholder="用户名" required>
  <input type="text" id="message" placeholder="消息" required>
  <button type="submit">发送</button>
</form>

ログイン後にコピー

バックエンド処理コードを作成する

チャットレコードの保存と読み取りを処理するために、同じディレクトリに chat.php という名前のファイルを作成します。まず、データベースに接続します:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chatroom";
 
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}
?>

ログイン後にコピー

次に、メッセージを保存する関数を作成します:

<?php
function saveMessage($username, $message)
{
  global $conn;
   
  $sql = "INSERT INTO chat (username, message) VALUES ('$username', '$message')";
   
  if ($conn->query($sql) === TRUE) {
 return true;
  } else {
 return false;
  }
}
?>

ログイン後にコピー

次に、チャットレコードを取得する関数を作成します:

<?php
function getChatHistory()
{
  global $conn;
   
  $sql = "SELECT * FROM chat";
  $result = $conn->query($sql);
   
  if ($result->num_rows > 0) {
 while($row = $result->fetch_assoc()) {
   echo "<p>{$row['username']}: {$row['message']}</p>";
 }
  }
}
?>

ログイン後にコピー

最後に、フロントエンドによって送信されたフォームデータを処理するために、次のコードを chat.php ファイルに追加します。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = $_POST["username"];
  $message = $_POST["message"];
   
  if (saveMessage($username, $message)) {
 echo "消息发送成功！";
  } else {
 echo "消息发送失败！";
  }
}
?>

ログイン後にコピー

フロントエンドスクリプトの記述
script という名前のファイルをプロジェクトディレクトリ.js ファイル。フォームデータの送信とチャットレコードの取得に使用されます。 jQuery の ajax メソッドを使用して処理します。

$(document).on("submit", "#chat-form", function(e) {
  e.preventDefault();
   
  var username = $("#username").val();
  var message = $("#message").val();
   
  $.ajax({
 url: "chat.php",
 method: "POST",
 data: { username: username, message: message },
 success: function(response) {
   $("#message").val("");
 }
  });
});
 
function getChatHistory() {
  $.ajax({
 url: "chat.php",
 method: "GET",
 success: function(response) {
   $("#chat-box").html(response);
 }
  });
}
 
setInterval(getChatHistory, 1000);

ログイン後にコピー

スタイルの書き方
プロジェクトディレクトリに style.css という名前のファイルを作成し、チャットページのスタイルを設定します。

body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#chat-box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 200px;
  margin: 20px auto;
  overflow: auto;
  padding: 10px;
  width: 400px;
}
 
#chat-form {
  display: flex;
  margin: 0 auto;
  width: 400px;
}
 
#chat-form input[type="text"] {
  flex: 1;
  padding: 5px;
}