Hype Global Behavior (Custom Behavior Extension)

Extension Project
, , , ,
23

If you want to use Pusher.com (you need an account there) to broadcast Custom Behavior across devices, tabs and maschines use the following in your head section. Make sure to replace the YOUR-SERVER-URL and YOUR-PUSHER-KEY

Installation

	<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
	<script>
		/*
		* Quick Pusher Extension for HypeTriggerCustomBehavior v1.7
		* written by Max Ziebell
		*/
		
		var pusher = new Pusher('YOUR-PUSHER-KEY', {
			cluster: 'eu',
			forceTLS: true
		});

		var channel = pusher.subscribe('HypeGlobalBehaviorChannel');
		channel.bind('HypeGlobalBehaviorEvent', function(data) {
			HypeGlobalBehavior.triggerCustomBehaviorNamed(data.behavior);
		});
		
		var socketId = null;
		pusher.connection.bind('connected', function() {
			socketId = pusher.connection.socket_id;
		});
		
		var triggerPusherBehavior = function(hypeDocument, element, event) {
			if (event.customBehaviorName.substr(0,1)!='#') {
				var xhr = new XMLHttpRequest();
				xhr.open("POST", "YOUR-FULL-URL/PusherTrigger.php", true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
				xhr.onreadystatechange = function () {
        			if (xhr.readyState != 4 || xhr.status != 200) return;
					console.log("Success: " + xhr.responseText);
				};
				xhr.send("behavior="+event.customBehaviorName+"&socket_id="+socketId);
			}
		}
		
		if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
		window.HYPE_eventListeners.push({"type":"HypeTriggerCustomBehavior", "callback": triggerPusherBehavior});
	
	</script>

on the server you need PHP and you would normally have to use PHP Composer to build the Pusher library. I attached a ready built vendor library but beware that it was last updated on September 29. in 2018. For production you should update the vendor build (see GitHub - pusher/pusher-http-php: PHP library for interacting with the Pusher Channels HTTP API)

Install the vendor folder on your server. Compile it fresh or use this version from September 29. in 2018 vendor.zip (334,6 KB)

There is a newer vendor bundle if you don’t want to generate it your self done by @pj-avt found on this post.

Create a file called PusherTrigger.php and replace the placeholder with your Pusher infos:

<?php
require __DIR__ . '/vendor/autoload.php';

$options = array(
	'cluster' => 'eu',
	'useTLS' => true
);

$pusher = new Pusher\Pusher(
	'YOUR-PUSHER-KEY',
	'YOUR-PUSHER-SECRET',
	'YOUR-PUSHER-APP-ID',
	$options
);

$data['behavior'] = $_POST['behavior']; /* Todo sanatize and use private channel */
$pusher->trigger('HypeGlobalBehaviorChannel', 'HypeGlobalBehaviorEvent', $data, $_POST['socket_id']);

You can download the file here PusherTrigger.php.zip (1,0 KB). Be aware that some servers need the file to begin with <?php rather then only <?.

This should give the desired results and it works with Hype GlobalBehavior. Have Fun!

Quick test without installation

If you want to quickly test it open this file twice (in two tabs or devices)
http://dev.maxziebell.de/Hype/GlobalBehavior/PusherTest.html

And then trigger RedAlert in one of them. Both should fire!

For now this is an addition to the Hype GlobalBehavior and also needs that JS but it can easily be tweak to only work with the regular Custom Behavior from Hype.

Further information

To learn more about Pusher visit the following pages: Pusher Documentation

1 Like