Getting information from Pusher channel using PHP

Question

I'm getting new to "Pusher" (the websocket api) and I'm having hard time to understand how can I fetch information from the server after sending it to the channel. For example, this is my code:

<?php
    include "pusher/Pusher.php";
?>
<script src="http://js.pusher.com/2.1/pusher.min.js"></script>
<script type="text/javascript">
    var pusher = new Pusher('c77c12b92e38f4156e9c');
    var channel = pusher.subscribe('test-channel');
    channel.bind('my-event', function(data) {
      alert('An event was triggered with message: ' + data.message);
    });
</script>
<?php
    $pusher = new Pusher($config["pusher_key"], $config["pusher_secret"], $config["pusher_id"]);
    $pusher->trigger(channel, 'my-event', array('message' => 'Test Message') );

Now, my information is sent to the server, but I don't know how to get it.

Thanks.

Answer 1

You can find the source for a very simple example here: https://github.com/leggetter/pusher-examples/tree/master/php/hello-world/src

And this example working here: http://www.leggetter.co.uk/pusher/pusher-examples/php/hello-world/src/

The problem you are seeing is that you are triggering the event on the server before the page has rendered in the browser. So, a connection has not been made by the browser to Pusher, nor has a subscription been made.

Answer 2

You can try something liked this,for php pusher library I used composer

<div class="notification">
</div>

<script>
var pusher = new Pusher('APP_KEY');
var notificationsChannel = pusher.subscribe('notification');
notificationsChannel.bind('new_notification', function(notification){
    var message = notification.message;
    toastr.success(message);
});
var sendNotification = function(){
    var text = $('input.create-notification').val();
    $.post('./notification/index.php', {message: text}).success(function(){
        console.log('Notification sent!');
    });
};

$('button.submit-notification').on('click', sendNotification);

</script>

HTML

<input class="create-notification" placeholder="Send a notification :)"/>
<button class="submit-notification">Go!</button>

Using PHP in this case

require(dirname(__FILE__).'/../vendor/autoload.php');
$app_id = 'APP_ID';
$app_key = 'APP_KEY';
$app_secret = 'APP_SECRET';
$pusher = new Pusher($app_key, $app_secret, $app_id,array( 'encrypted' => true ));
$data['message'] = $_POST['message'];
$pusher->trigger('notification', 'new_notification', $data);

For more follow this link

Recommended folder structure -

You can add following for more UX kind'a look -

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>