Hướng dẫn Pusher – Viết ứng dụng thời gian thực

Trong bài này mình sẽ giới thiệu và hướng dẫn các bạn cách sử dụng Pusher cơ bản để viết 1 ứng dụng Nofitication – Thông báo (giống như Facebook) với thời gian thực. Hiểu được cách làm việc của Pusher

huong-dan-pusher

 Giới thiệu về Pusher

Pusher là 1 dịch vụ cung cấp cho người dùng 1 Server ảo làm trung gian xử lý các dữ liệu với thời gian thực. Hiện với hơn 65.000 người sử dụng. Pusher cung cấp các gói dịch vụ với nhiều mức giá cũng như lưu trữ thông tin khác nhau. Các bạn có thể tham khảo tại trang chủ của Pusher. Với bài này chúng ta sẽ đăng ký 1 tài khoản và sử dụng gói Free

Cách hoạt động của Pusher

Mình sẽ giải thích 1 cách ngắn gọn nhất có thể và theo ý cá nhân của mình. Còn về lý thuyết cao hơn thì các bạn vào Pusher để xem nhé

Ví dụ ở đây chúng ta đăng ký 1 tài khoản. Thì Pusher sẽ tạo riêng cho chúng ta 1 Channel, từ Channel này sẽ tiếp nhận các yêu cầu gửi lên từ phía Web server và trả ngược lại cho người dùng. Nó như 1 cây cầu trung gian giúp chúng ta khỏi phải setup server riêng các kiểu, đỡ mất thời gian :D Còn nếu muốn nâng cao hơn thì tất nhiên chúng ta có thể tự xây dựng 1 server giống như vậy, nhưng sẽ nói ở bài viết khác

Quy trình của bài demo này:

  1. Có 3 phía cần lưu ý: 1 là client (người duyệt web) , 2 là Web server (nơi xử lý PHP), 3 là Pusher
  2. Client duyệt web > gửi thông tin đến Web server (PHP) > PHP chuyển tiếp đến Pusher > Pusher trả về lại cho client (hoặc client khác)

Hướng dẫn sử dụng Pusher

Mình có 2 trang như thế này:

  • Trang 1 – gồm 1 form nhập liệu với các thông tin: Username , Tin nhắn
  • Trang 2 –  ngồi chờ (lắng nghe) xem có thay đổi gì mới hoặc thông báo gì mới hay không. Nếu có thì sẽ hiện lên thông báo theo thời gian thực. Các bạn xem 2 hình bên dưới

huong-dan-pusher-form

Screen Shot 2015-03-15 at 5.36.52 PM

Và đây là kết quả (bên form vừa bấm gửi là bên kia nhận được ngay nhé)

Screen Shot 2015-03-15 at 5.39.23 PM

Tương tự như vậy, các bạn có thể dùng Pusher để viết các ứng dụng khác như: cập nhật thông tin trực tiếp, chatbox, xổ số, thống kê online…theo thời gian thực

Ok, và dưới đây là hướng dẫn:

Các bạn vào trang chủ của Pusher và đăng ký 1 tài khoản free. Đăng ký xong, các bạn login vào và sẽ thấy các thông tin cần thiết để chạy ứng dụng như: appid, key, serect:

Screen Shot 2015-03-15 at 5.46.01 PM

Ok. Bây giờ các bạn tạo 1 file index.html. File này sẽ là form để nhập dữ liệu vào và gửi đi bằng Ajax với nội dung như sau:

<!DOCTYPE html>
<head>
  <title>NamCoder Pusher</title>
  <meta charset="utf-8">
  <script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
      <h3>NamCoder Pusher</h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Gửi tin nhắn</h3>
        </div>
        <div class="panel-body">
          <form class="">
            <div class="form-group">
              <label>Username: </label>
              <input type="text" class="form-control" id="username" placeholder="Nhap Username" autofocus>
            </div>
            <div class="form-group">
              <label>Nội dung: </label>
              <textarea name="" id="mes" cols="30" rows="10" class="form-control"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Send</button>
          </form>
        </div>
      </div>
        
      </div>
    </div>
  </div>
  <script>
    $('form').submit(function(){
      var mes = $('#mes').val();
      var username = $('#username').val();
      $.ajax({
        type:'post',
        url:'execute.php',
        data:'message='+mes+'&username='+username
      });
      return false;
    });
  </script>
</body>

Tiếp đến là 1 file execute.php để tiếp nhận dữ liệu từ form và chuyển đến cho Pusher

<?php 

require('pusher.php');

$data['message'] = $_POST['message'];
$data['username'] = $_POST['username'];

$pusher = new Pusher('x1', 'x2', 110012);

$pusher->trigger('test_channel', 'my_event', $data );

/*
Thay x1 = Pusher key
Thay x2 = Pusher secret
*/

 ?>

Và cuối cùng là 1 file user.html, trang này là trang nằm chờ có sự kiện mới hoặc có gì thay đổi là nó sẽ hiện lên thông báo, ở đây là nhận tin nhắn mới, code với nội dung như sau:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>NamCoder - Hướng dẫn sử dụng Pusher</title>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    var pusher = new Pusher('xx');  /* <--- cho nao thay bang Pusher key*/
    var channel = pusher.subscribe('xx');   /* <--- cho nay thay bang pusher channel*/
    channel.bind('xx', function(data) {  /* <--- cho nay thay bang pusher event*/
      content(data.username,data.message);
    });

    function content(user,msg){
      $('#username').text(user);
      $('#noidung').text(msg);
       $('#modal').modal('show');
    }

  </script>
</head>
<body>
  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Tin nhắn từ <strong id="username"></strong></h4>
        </div>
        <div class="modal-body">
          <div id="noidung"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
        <div class="jumbotron">
          <h1>Hướng dẫn sử dụng Pusher</h1>
          <p>Trang này là demo để chờ có Nofitication mới. Sẽ báo lên Modal</p>
          <p>
            <a class="btn btn-lg btn-primary" href="http://namcoder.com" role="button">Download source code</a>
          </p>
        </div>
  </div>
</body>

Các bạn save lại, chạy trên localhost của các bạn và xem thành quả. Lưu ý, các bạn phải ghi đúng các thông số có trong Pusher cung cấp cho các bạn nhé.

Các bạn có thể download source code tại đây về để thử

Cám ơn các bạn đã xem. Có thắc mắc gì thì comment bên dưới nhé