PHP를 사용하여 간단한 온라인 채팅방을 개발하는 방법-PHP 튜토리얼-php.cn

PHP를 사용하여 간단한 온라인 채팅방을 개발하는 방법

王林

풀어 주다： 2023-09-21 08:40:01

원래의

1141명이 탐색했습니다.

PHP를 사용하여 간단한 온라인 채팅방을 개발하는 방법

PHP를 사용하여 간단한 온라인 채팅방을 개발하는 방법은 무엇입니까?

인터넷의 급속한 발전과 함께 사람들 간의 의사소통은 점점 더 인터넷에 의존하고 있습니다. 일반적인 소셜 도구로서 온라인 채팅방은 사람들의 일상 생활에 없어서는 안 될 부분이 되었습니다. 이 기사에서는 PHP 언어를 사용하여 간단한 온라인 채팅방을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

준비
시작하기 전에 컴퓨터에 PHP 운영 환경과 Apache 서버가 설치되어 있는지 확인하세요. XAMPP 또는 WAMP와 같은 도구를 통해 PHP 개발 환경을 구축할 수 있습니다. 동시에 기본적인 HTML, CSS, JavaScript 지식도 알아야 합니다.
데이터베이스 및 테이블 만들기
먼저 데이터베이스에 채팅 기록을 저장할 테이블을 만듭니다. 다음 SQL 문을 사용하여 테이블을 생성할 수 있습니다.
```
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라는 파일을 만듭니다. 이 파일은 채팅 페이지로 사용됩니다. 파일에 다음 스타일과 스크립트를 가져옵니다.
```
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="script.js"></script>
```
로그인 후 복사
페이지에서 채팅 기록을 표시하는 div 요소를 만듭니다.
```
<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>";
 }
  }
}
?>

로그인 후 복사

마지막으로 To process를 사용하여 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;
}

로그인 후 복사