LoginSignup
59

More than 5 years have passed since last update.

pusherを触ってみる

Last updated at Posted at 2016-03-18

pusherとは

  • プッシャーは、簡単かつ安全にウェブやモバイルアプリ、または他の任意のインターネット接続デバイスにWebSocketを介して、リアルタイムの双方向機能を統合し、迅速にするためのシンプルなホストされているAPIです。
  • www.pusher.com

ログインから、サンプルデモまで

アカウント登録

  • http://pusher.com
  • create a free accountボタンをクリックする
  • 以下の登録画面が出る

register.png

  • 登録方法

    • Email/Password
    • Github
    • google
  • 登録後に、メールでアカウントのアクティブティもやらないといけない

  • 登録後のdashboard画面

dashboard.png

アプリを作成

  • dashboard画面に、create an appボタンをクリックする
  • 以下のアプリ作成画面が出る

create_new_app.png

説明

  • アプリ名
    • 「create apps for multiple environments」をチェックすると、同時に、development, staging, production三つのアプリを作れる
  • cluster
    • デフォルトは、us-east-1が、「Want to request a different region?」をチェックすると、Tokyo regionも選択できる
  • front-end techとback-end tech
    • 何でもOK
  • share your app

    • 共同操作者を招待できるかもしれないが、今後は試してみる
  • サンプルデモ用アプリを作ってみた

created_app.png

サンプルコード実装

クライアント側(JS)

<!DOCTYPE html>
<head>
  <title>Pusher Test</title>
  <script src="https://js.pusher.com/3.0/pusher.min.js"></script>
  <script>
    // Enable pusher logging - don't include this in production
    Pusher.log = function(message) {
      if (window.console && window.console.log) {
        window.console.log(message);
      }
    };

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

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

サーバー側(php)

<?php
  require('vendor/pusher/pusher-php-server/lib/Pusher.php');

  $options = array(
    'encrypted' => true
  );
  $pusher = new Pusher(
    'XXXXXXX',
    'XXXXXXX',
    'XXX',
    $options
  );

  $data['message'] = 'hello pusher';
  $pusher->trigger('test_channel', 'my_event', $data);
?>

実行と結果

  • サーバー側
php hello-pusher.php
  • クライアント側

hello_pusher.png

課題

  • クライアント側のJSコードを見て、何か変なことを発見してないか?
  • 答え: 不安全か?
  • そうだね。セキュリティですよね。
    • 'XXXXXXXX'のapp secretが、誰は見えて、コピーすると、サーバーと接続できてしまうな
    var pusher = new Pusher('XXXXXXXXXX', {
      encrypted: true
    });
  • 次回は、クライアント側のJSコードのセキュリティ問題を検討しよう

参照

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
59