RMSN/index.html at master · leppert/RMSN · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<title>RMSN - Reading Message Server</title>
<style type="text/css">
  body {
    font-family:'Helvetica Neue', helvetica, arial, sans-serif;
    padding: 30px 60px;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="http://js.pusherapp.com/1.9/pusher.min.js"></script>
<script src="/rmsn.js"></script>
<script>
// Enable pusher logging
Pusher.log = function(message){ if(window.console && window.console.log) window.console.log(message); };
// Flash fallback logging
WEB_SOCKET_DEBUG = true;

now.ready(function(){
  var config    = {app_id:1234, key:'killerrandomkey', secret:'supersecretphrase'},
      pusher    = new Pusher(config.key),
      channels  = ['channel_one','channel_two','channel_three'], channel,
      events    = ['event_one','event_two','event_three'],
      $channels = $('#channels'),
      $events   = $('#events'),
      print = function(channel, event_name, data){
        $('#results').append('<br>'+channel+' : '+event_name+' : '+data);
        console.log(channel, event_name, data);
      };

  $.each(channels, function(K, V){
    $channels.append('<option value="'+V+'">'+V+'</option>');
    channel = pusher.subscribe(V);
    $.each(events, function(k, v){
      channel.bind(v, function(data){ print(V, v, data); });
    });
  });
  $.each(events, function(k, v){
    $events.append('<option value="'+v+'">'+v+'</option>');
  });

  $('#creds').text('KEY_'+config.key+'='+config.app_id+':'+config.secret);

  $("#send-button").click(function(){
    $.get('/', {
      app_id: config.app_id,
      channel_name: $channels.val(),
      name: $events.val(),
      data: $('#data').val()
    });
    $(':text').val('');
  });
});
</script>
</head>
<body>
  <h1>RMSN</h1>
  <h2><a href="https://github.com/leppert/RMSN">Reading Message Server</a> Test Page</h2>
  <h5>For this demo to work, you'll need to add this variable to your environment:<br><code id="creds"></code></h5>
  <h5>
    Once you're done testing, it's highly recommended that you add <code>REDIRECT_URL</code> to your environment.<br>
    Doing so will prevent this page from falling into the wrong hands.
  </h5>
  <form>
    <select id="channels"></select>
    <select id="events"></select>
    <input type="text" id="data" placeholder='{"json":data}'>
    <input type="button" value="Send" id="send-button">
  </form>
  <div id="results"></div>
</body>
</html>