Aula 05 - Conexão e chamando pusher com PHP




Muito bem vindo de volta a série de aulas sobre chat real time com pusher, nessa aula vou mostrar como faz uma conexão com o banco de dados e como chamo o pusher com o php no arquivo config.php. O código da aula está logo abaixo para você copiar e testar.

Conexao.php

<?php

namespace App\Models;

use PDO;

class Conexao{
    private $pdo;

    public function __construct(){
        $this->pdo = new PDO("mysql:host=localhost;dbname=pusher","root","root");
        $this->pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
        $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    public function conectar(){
        return $this->pdo;
    }

}

config.php

<?php

ini_set("display_errors",1);
date_default_timezone_set("America/Sao_Paulo");

require 'vendor/autoload.php';

$pusher = new Pusher("a2561ec933d71a50558c","945ea8caf5bb6d7593cb","197998");

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Real time com Pusher</title>
</head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="https://js.pusher.com/3.1/pusher.min.js"></script>
<body>

<div class="container">
<div class="col-md-6 col-md-offset-2" style="background-color: #333;padding: 10px;">
    <h2 style="color: #FFF;text-align: center;"><i class="fa fa-comments-o"></i> Chat real time com pusher</h2>

    <div class="chat-box">
        <form action="">
            <div class="form-group">
                <div id="chat-show-messages" class="form-control" style="height: 300px;overflow: scroll;border: solid 2px #ccc;"></div>
            </div>
            <hr>

            <div class="form-group">
                <label>Nome</label>
                <input type="text" id="chat-name" class="form-control">

                <label>Mensagem</label>
                <textarea id="chat-messages" class="form-control" rows="5"></textarea>
                <br>
                <button id="send-message" class="btn btn-default btn-lg">Enviar</button>
            </div>
        </form>
    </div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.js"></script>
<script type="text/javascript">
    // Enable pusher logging - don't include this in production
        // Pusher.logToConsole = true;

        var pusher = new Pusher('a2561ec933d71a50558c', {
          encrypted: true
        });

        $("#send-message").on('click', function(event){
            event.preventDefault();
        });
</script>
</body>
</html>