>  기사  >  백엔드 개발  >  PHP를 사용하여 간단한 채팅 상자를 구현하는 방법

PHP를 사용하여 간단한 채팅 상자를 구현하는 방법

PHPz
PHPz원래의
2023-04-04 09:12:571170검색

오늘날의 인터넷 시대에 사람들은 인스턴트 메시징의 중요성에 점점 더 많은 관심을 기울이고 있습니다. 소셜 네트워킹, 전자상거래, 온라인 교육 등 어떤 분야이든 사용자 요구를 충족하려면 인스턴트 채팅 기능을 제공해야 합니다. 웹 개발 언어로서 PHP는 일반적으로 Ajax 및 Websocket을 사용하여 인스턴트 메시징 기능을 구현합니다. 이번 글에서는 PHP를 이용하여 간단한 채팅박스를 구현하는 방법을 소개하겠습니다.

1. 사전 준비

시작하기 전에 다음 환경이 갖추어져 있는지 확인해야 합니다.

  1. PHP
  2. MySQL
  3. Apache 서버 실행 기능

이러한 환경은 우리에게 필요한 기반입니다. 이 기사를 완성해 보세요.

2. 채팅 상자 인터페이스 만들기

먼저 채팅 상자를 표시할 간단한 HTML 페이지를 만들어야 합니다. 페이지는 채팅 기록을 표시하는 영역과 채팅 내용을 입력하는 영역의 두 부분으로 구성됩니다. Bootstrap을 사용하여 웹 페이지를 아름답게 만들 수 있습니다.

예를 들어, 두 개의 하위 요소(ID가 "message"인 div 요소와 ID가 "input"인 양식 요소)를 포함하는 ID가 "chatbox"인 Div 요소를 생성할 수 있습니다. "메시지" 및 "입력" 요소의 CSS 스타일은 부트스트랩을 사용하여 아름답게 만들 수 있습니다.

3. 채팅 기록 표시 구현

다음으로 채팅 기록 표시 기능을 구현해야 합니다. 채팅 기록을 데이터베이스에 저장하고 데이터베이스에서 메시지를 검색한 다음 "message" Div 요소에 표시해야 합니다.

MySQL에서는 다음 명령을 사용하여 "id", "name", "message" 및 "time"의 4개 필드가 포함된 "chat"이라는 테이블을 생성할 수 있습니다.

CREATE TABLE `chat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `message` text NOT NULL,
  `time` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

PHP에서 MySQL 데이터베이스에 연결하려면 다음 코드를 사용하여 데이터베이스에 연결합니다.

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "chat";

// create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

다음으로, 데이터베이스에서 채팅 기록을 검색하고 다음 코드를 통해 페이지에 표시해야 합니다. :

$sql = "SELECT name, message, time FROM chat ORDER BY id ASC";
$result = $conn->query($sql);

// display chat history
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<p><strong>" .$row["name"]. "</strong> " .$row["message"]. "</p>";
    }
} else {
    echo "No messages yet.";
}

위 코드는 select 문을 사용하여 데이터베이스에서 채팅 기록을 검색한 다음 "while" 루프를 사용하여 이러한 기록을 페이지에 하나씩 표시합니다.

4. 채팅 내용 전송 실현

다음으로 사용자가 채팅 내용을 입력한 후 QQ 채팅 상자처럼 다른 사용자가 실시간으로 채팅 메시지를 받을 수 있는 기능을 구현해야 합니다. 웹페이지에 채팅 내용을 입력하기 위해 "입력" 양식에 입력 상자와 제출 버튼을 추가할 수 있습니다. 사용자가 제출 버튼을 클릭하면 채팅 내용이 PHP 코드로 전송된 다음 MySQL 데이터베이스에 저장됩니다.

PHP 코드는 양식에서 채팅 콘텐츠와 사용자 이름을 가져와 다음 코드를 사용하여 MySQL 데이터베이스에 저장할 수 있습니다.

if (isset($_POST['submit'])) { //check if form submitted
    $name = $_POST['name'];
    $message = $_POST['message'];
    
    //insert message into database
    $sql = "INSERT INTO chat (name, message) VALUES ('$name', '$message')";
    $result = $conn->query($sql);
}

위 코드는 사용자가 제출한 양식 데이터(예: 사용자 이름 및 채팅 콘텐츠)를 MySQL 데이터베이스에 삽입하여 작동합니다. "채팅" 테이블에 채팅 내용을 저장하려면 다음 위치에 있는 MySQL 데이터베이스를 사용하세요.

5. Ajax를 사용하여 채팅 기록을 업데이트하세요

채팅 상자의 마지막 부분은 채팅 기록을 실시간으로 업데이트하는 것입니다. 이를 달성하기 위해 Ajax를 사용하여 데이터베이스에서 주기적으로 새 메시지를 검색하고 이를 "메시지" div에 추가할 수 있습니다. 다음은 jQuery를 사용한 코드 데모입니다.

$(document).ready(function(){
    updateChat();
});

function updateChat() {
    $.ajax({
        type: "GET",
        url: "getchat.php",
        success: function(data){
            $("#message").html(data); // replace message div with result
        }
    });

    setTimeout(updateChat, 3000); // update chat every 3 seconds
}

위 코드는 Ajax를 사용하여 주기적으로 getchat.php 파일을 호출하여 MySQL 데이터베이스에서 새 메시지를 검색합니다. 이 파일에서 다음 코드를 사용하여 메시지를 검색할 수 있습니다.

$sql = "SELECT name, message, time FROM chat WHERE id > $last_id ORDER BY id ASC";
$result = $conn->query($sql);

// display chat history
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<p><strong>" .$row["name"]. "</strong> " .$row["message"]. "</p>";
    }
}

mysqli_close($conn);

위 코드는 select 문을 사용하여 데이터베이스에서 새 메시지를 검색하고 앞서 설명한 것과 유사한 방법을 사용하여 페이지에 표시합니다.

6. 인스턴트 메시징 실현

위의 모든 기능은 웹페이지를 새로 고친 후에만 실현할 수 있으며 실시간 커뮤니케이션을 통해 더 나은 사용자 경험을 가져올 수 있습니다. 다음으로 각 사용자에게 인스턴트 메시지를 보낼 수 있는 웹 채팅 상자를 구현하겠습니다.

  1. 변환 코드

먼저 위의 채팅 상자 코드를 여러 개의 채팅 상자로 변환해야 합니다.

각 대화방의 정보를 저장하려면 MySQL 데이터베이스에 "chatrooms"라는 테이블을 만들어야 합니다. 다음 명령을 사용하여 테이블을 생성합니다.

CREATE TABLE `chatrooms` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

그런 다음 사용자가 새 채팅방의 이름을 입력할 수 있는 양식을 추가해야 합니다. 또한 사용자가 새 채팅방을 만들 수 있는 버튼을 추가해야 합니다. 사용자가 양식을 제출하면 새 채팅방이 채팅방 테이블에 추가되어야 합니다.

새 채팅방을 생성한 후에는 해당 사용자의 모든 채팅방이 표시되어야 합니다. 다음 코드를 사용하여 모든 채팅방을 가져올 수 있습니다.

$sql = "SELECT * FROM chatrooms";
$result = $conn->query($sql);

// display chat rooms
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<a href=&#39;chatroom.php?id=" . $row["id"] . "&#39;>" . $row["name"] . "</a>";
    }
} else {
    echo "No chat rooms yet.";
}
  1. 인스턴트 메시징 구현

다음으로, 사용자가 진행 중인 채팅방을 보고 참여할 수 있도록 member.php 페이지에 인스턴트 메시징 기능을 추가하는 방법을 구현하겠습니다. 채팅방의 실시간 채팅 기록.

진행 중인 라이브 채팅방의 마지막 구축 시간을 기록하려면 먼저 MySQL의 스팸 테이블에 새 필드를 만들어야 합니다.

ALTER TABLE `spam` ADD `last_build_time` TIMESTAMP NULL ON DELETE SET NULL;

채팅방에 새 메시지가 전송될 때마다 스팸 테이블의 last_build_time 필드를 업데이트하여 서버에 최신 빌드를 생성해야 합니다.

즉각적인 통신을 위해 WebSocket 프로토콜을 사용합니다. 먼저 새 키를 생성하여 세션에 저장해야 합니다.

if (!isset($_SESSION['chat_key'])) {
    $_SESSION['chat_key'] = bin2hex(random_bytes(16));
}

다음으로 JavaScript와 라이브러리를 사용하여 WebSocket 서버에 연결하고 최신 빌드를 가져와야 합니다.

// Connect to WebSocket server
var ws = new WebSocket('wss://' + SERVER_HOST + ':' + WS_PORT + '/chat/' + key);

// Send a message to the server
ws.send('build');

// Handle incoming messages from the server
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);

    if (message.action == 'build') {
        $('#chatbox').html(message.html);
    }

    if (message.action == 'addMessage') {
        addMessage(message);
    }

    if (message.action == 'removeMessage') {
        removeMessage(message);
    }
}

function addMessage(message) {
    // add new message to chatbox
    var html = '<div class="message">';
    html += '<span class="name">' + message.name + '</span>';
    html += '<span class="time">' + message.time + '</span>';
    html += '<div class="content">' + message.content + '</div>';
    html += '</div>';

    $('#chatbox .messages').append(html);
}

function removeMessage(message) {
    // remove message from chatbox
    $('#chatbox .messages .message[data-id="' + message.id + '"]').remove();
}

以上代码使用 WebSocket 协议连接服务器,并从服务器接收最新的构建版本,然后更新会话中的 HTML 聊天记录以反映新的消息。

总结

通过这个实例,我们学习了如何使用 PHP 开发一个简单的即时聊天应用,理解了如何使用 Ajax、MySQL 和 WebSocket 等技术实现真正的实时聊天应用。此外,我们还涵盖了许多重要的主题,例如如何管理多个聊天室、如何存储并获取聊天记录等。希望这个例子能给你一个有意义的启示,并启发你在自己的项目中实现即时通讯的功能。

위 내용은 PHP를 사용하여 간단한 채팅 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.