Edited at

pusherを触ってみる

More than 3 years have passed since last update.


pusherとは


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

  • www.pusher.com


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


アカウント登録


  • http://pusher.com

  • create a free accountボタンをクリックする

  • 以下の登録画面が出る



  • 登録方法


    • Email/Password

    • Github

    • google



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


  • 登録後のdashboard画面



アプリを作成


  • dashboard画面に、create an appボタンをクリックする

  • 以下のアプリ作成画面が出る

説明


  • アプリ名


    • 「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


    • 共同操作者を招待できるかもしれないが、今後は試してみる



  • サンプルデモ用アプリを作ってみた



サンプルコード実装


クライアント側(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


  • クライアント側


課題


  • クライアント側のJSコードを見て、何か変なことを発見してないか?

  • 答え: 不安全か?

  • そうだね。セキュリティですよね。


    • 'XXXXXXXX'のapp secretが、誰は見えて、コピーすると、サーバーと接続できてしまうな



    var pusher = new Pusher('XXXXXXXXXX', {

encrypted: true
});


  • 次回は、クライアント側のJSコードのセキュリティ問題を検討しよう


参照