Help us understand the problem. What is going on with this article?

pusherを触ってみる

More than 3 years have passed since last update.

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コードのセキュリティ問題を検討しよう

参照

alingogo
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。
http://www.jrits.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away