Como Criar um Sistema de Chat em Tempo Real com PHP, JavaScript e MySQL

Este tutorial irá guiá-lo na criação de um sistema de chat em tempo real com PHP, JavaScript e MySQL. Vamos criar uma área administrativa para os atendentes monitorarem e responderem aos visitantes, além de implementar um sistema de login, notificações em tempo real, painel administrativo e outras funcionalidades.

Passo 1: Estrutura do Banco de Dados

Primeiro, vamos criar a estrutura do banco de dados necessário para o sistema de chat. A tabela `chats` irá armazenar as informações do chat, enquanto a tabela `users` irá armazenar os usuários (atendentes e administradores). Além disso, criamos as tabelas `messages` para armazenar as mensagens individuais dos chats, e `visitor_sessions` para registrar as sessões dos visitantes.

CREATE TABLE `users` (
      `user_id` INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `email` VARCHAR(320) NOT NULL,
      `password` VARCHAR(128) NOT NULL,
      `role` ENUM('admin', 'attendant') NOT NULL,
      `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );

    CREATE TABLE `visitor_sessions` (
      `session_id` INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `visitor_id` INT(11) UNSIGNED NOT NULL,
      `chat_id` INT(11) UNSIGNED NOT NULL,
      `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );

    CREATE TABLE `chats` (
      `chat_id` INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `visitor_id` INT(11) UNSIGNED NOT NULL,
      `attendant_id` INT(11) UNSIGNED DEFAULT NULL,
      `status` ENUM('open', 'closed') DEFAULT 'open',
      `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
      `feedback` VARCHAR(255) DEFAULT NULL
    );

    CREATE TABLE `messages` (
      `message_id` INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `chat_id` INT(11) UNSIGNED NOT NULL,
      `sender_id` INT(11) UNSIGNED NOT NULL,
      `message` TEXT NOT NULL,
      `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );

As tabelas agora estão organizadas da seguinte maneira:

• users: Contém os usuários do sistema, incluindo atendentes e administradores.
• visitor_sessions: Registra as sessões dos visitantes no chat (relacionando com a tabela `chats`).
• chats: Armazena os chats, incluindo o status (aberto ou fechado) e o feedback após o atendimento.
• messages: Armazena as mensagens enviadas dentro de cada chat.

Passo 2: Sistema de Login e Área Administrativa

Agora, vamos criar o sistema de login, onde administradores e atendentes poderão acessar a área administrativa do chat.

Criação do Formulário de Login

Crie um arquivo chamado login.php para o formulário de login. O formulário permitirá que o usuário insira o email e a senha.

<form method="POST" action="login_process.php">
        <label for="email">Email:</label>
        <input type="email" name="email" required />
        <br>
        <label for="password">Senha:</label>
        <input type="password" name="password" required />
        <br>
        <button type="submit">Entrar</button>
    </form>

Agora, crie o arquivo login_process.php, que irá verificar as credenciais do usuário e redirecionar para a área administrativa.

<?php
    session_start();
    include('db_connection.php');

    $email = $_POST['email'];
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
    $stmt->execute([$email]);
    $user = $stmt->fetch();

    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['user_id'];
        $_SESSION['role'] = $user['role'];
        header("Location: admin_dashboard.php");
    } else {
        echo "Email ou senha inválidos.";
    }
    ?>

Este script irá verificar as credenciais do usuário e, se estiverem corretas, redirecionará o usuário para a área administrativa de acordo com seu perfil.

Passo 3: Área Administrativa (Admin Dashboard)

A área administrativa permitirá que os atendentes visualizem os chats em tempo real, respondam às mensagens e alterem o status do chat.

Criação do Painel de Administração

<?php
    session_start();
    include('db_connection.php');

    // Verifica se o usuário está logado e é um atendente
    if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'attendant') {
        header("Location: login.php");
        exit;
    }

    // Obtém os chats abertos
    $stmt = $pdo->prepare("SELECT * FROM chats WHERE status = 'open' ORDER BY created_at DESC");
    $stmt->execute();
    $chats = $stmt->fetchAll();
    ?>

    <h2>Painel de Atendentes</h2>
    <table>
        <tr>
            <th>Chat ID</th>
            <th>Visitante</th>
            <th>Mensagem</th>
            <th>Ação</th>
        </tr>
        <?php foreach ($chats as $chat): ?>
            <tr>
                <td><?php echo $chat['chat_id']; ?></td>
                <td>Visitante <?php echo $chat['visitor_id']; ?></td>
                <td><?php echo htmlspecialchars($chat['message']); ?></td>
                <td>
                    <a href="respond_chat.php?chat_id=<?php echo $chat['chat_id']; ?>">Responder</a>
                    <a href="close_chat.php?chat_id=<?php echo $chat['chat_id']; ?>">Fechar Chat</a>
                </td>
            </tr>
        <?php endforeach; ?>
    </table>

Passo 4: Implementando Feedback dos Visitantes

<form action="submit_feedback.php" method="POST">
        <label for="feedback">Seu Feedback:</label>
        <textarea name="feedback" required></textarea>
        <br>
        <button type="submit">Enviar Feedback</button>
    </form>

Conclusão

Agora você tem um sistema de chat em tempo real, completo com painel administrativo, login de usuários, feedback dos visitantes e muitas funcionalidades interativas. Este sistema é totalmente personalizável e pode ser expandido com mais recursos, como notificações em tempo real e autenticação de dois fatores.

Recomendações de segurança:

• Use HTTPS para proteger as informações enviadas entre o cliente e o servidor.
• Adicione validação de entrada para prevenir ataques de SQL Injection.
• Considere implementar autenticação de dois fatores para maior segurança.

Se precisar de ajuda ou quiser personalizar ainda mais o seu sistema, entre em contato conosco!

Solicite Suporte para Personalização de Chat