Created
March 14, 2017 04:05
-
-
Save gieart87/f2b72ca3b067a120ba9ae84c70d28ed9 to your computer and use it in GitHub Desktop.
Sample Client Subscriber PubNub Realtime Notification
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>PubNub Simple Chat Room Demo</title> | |
| <script src="http://cdn.pubnub.com/pubnub.min.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <h4>This demo is built on <a href="https://www.pubnub.com" style="color:red">PubNub</a> api.</h4> | |
| <hr/> | |
| <div id="userList" class="table-bordered userList" ></div> | |
| <button id="leaveButton" class="btn btn-danger leaveButton" onclick="leave()">Leave</button> | |
| <div id="chatHistory" class="table-bordered chatHistory"></div> | |
| <input type="text" id="message" placeholder="Enter your message here" class="message"/> | |
| <button id="sendButton" class="btn btn-primary sendButton">Send</button> | |
| <script type="text/javascript"> | |
| (function() { | |
| var publish_key = '<pubnub_publish_key>'; | |
| var subscribe_key = '<pubnub_subscribe_key>'; | |
| channel = 'crono_pos_28'; | |
| var username = window.location.search.substring(1).split('=')[1]; | |
| pubnub =PUBNUB.init({ | |
| publish_key : publish_key, | |
| subscribe_key : subscribe_key, | |
| uuid : username | |
| }); | |
| pubnub.subscribe({ | |
| channel : channel, | |
| callback : function(message) { | |
| console.log(message); | |
| $('#chatHistory')[0].innerHTML = message + '<br/>' + $('#chatHistory')[0].innerHTML; | |
| }, | |
| presence : function(state) { | |
| if (state.action == 'join') { | |
| if ($('#userList').text().indexOf(state.uuid) == -1) { | |
| $('#userList')[0].innerHTML = state.uuid + '<br/>' + $('#userList')[0].innerHTML; | |
| } | |
| } else if (state.action == 'leave' || state.action == 'timeout') { | |
| var index = $('#userList')[0].innerHTML.indexOf(state.uuid); | |
| if ( index !== -1) { | |
| $('#userList')[0].innerHTML = | |
| $('#userList')[0].innerHTML.substring(0,index) + | |
| $('#userList')[0].innerHTML.substring(index+state.uuid.length+4); | |
| } | |
| } | |
| } | |
| }); | |
| pubnub.bind('click', pubnub.$('sendButton'), function(e) { | |
| pubnub.publish({ | |
| channel : channel, | |
| message : pubnub.get_uuid() + ' : ' + $('#message').val() | |
| }); | |
| $('#message').val(''); | |
| }); | |
| })(); | |
| </script> | |
| <script type="text/javascript"> | |
| function leave() { | |
| pubnub.unsubscribe({ | |
| channel : channel, | |
| callback : function() { | |
| window.location = 'Login.html'; | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment