Aula 04 - Recebendo mensagens real time




Nessa aula vou mostrar para você como faz para começar a receber as mensagens real time que o pusher envia para nós, para isso vamos entrar no próprio pusher e enviar as mensagens para nosso site, e com apenas algumas linhas de código recebemos facilmente essa mensagem, sem precisar atualizar a página.

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 src="https://js.pusher.com/3.1/pusher.min.js"></script>
  <script>

    Pusher.logToConsole = true;

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

    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
      alert(data.message);
    });
  </script>
</body>
</html>