0

I am using pubnub in Javascript (version 3.10.2, which I believe is the latest version as of now). I am making a little game, and alongside the game is a chat div, where I append an li containing my message to a ul. I also have a occupancy counter. I call a function in pubnub.subscribe (presence: displayOccupancy) to display m.occupancy. (sorry if all of this was useless info, first question) The problem is that there is a UUID which I named "test3" which will not timeout from channel "chat" and when I made a button to force that UUID to unsubscribe, it would rejoin automatically after a few seconds. After changing UUIDs and trying this again, they would timeout normally according to my heartbeat and if I made the UUID unsubscribe, it would generate a leave event and that was it. Why does the UUID not leave or timeout from the channel?

EDIT: It's not only the "test3" UUID which lingers. Every time I reopen and test my code from Dreamweaver, the most recent test UUID which I have assigned the previous time I have worked on it "replaces" the UUID which was there before. ("previously" as in from the previous day, not every previous test)

// JavaScript Document

var uuid = PUBNUB.uuid();
var pubnub = PUBNUB.init({
 publish_key: 'pub-c-bbf633c9-8ddb-43f7-bf4c-c03215ccd8d8',
 subscribe_key: 'sub-c-a1b830fa-d9f5-11e5-a22c-02ee2ddab7fe',
 uuid: uuid,
 heartbeat: 10
});

var noOfWordsInRow = 0;
//arrays
var consanantArray = ["b","c","d","f","g","h","j","k","l","m","n","p","r","s","t","v","w","y"];
var vowelArray = ["a","e","i","o","u"];
var submittedWordsArray = [];

//containers
var lettersDiv = $("div#letterDisplay");
var wordAreaDiv = $("div#wordArea");
var submitDiv = $("div#submitDiv");
var startDiv = $("div#start");

var checkDiv = $("div#checkDiv");

var consanantUl = $("ul#consanantUl");
var vowelUl = $("ul#vowelUl");
var chatUl = $("#chatList");

var confirmWord = $("p#word");
var confirmBtn = $("#confirmBtn");
var error = $("#error");
var noOfPlayers = $("p#noOfPlayers");
//buttons
var startGame = $("button#enterGame");

//input
var chatInput = $("#chatInput");

//other

/**
var consanantOne = $("#firstConsanant");
var consanantTwo = $("#secConsanant");
var consanantThree = $("#thirdConsanant");
var consanantFour = $("#fourthConsanant");
var vowelOne = $("#firstVowel");
var vowelTwo = $("#firstVowel");
var vowelThree = $("#firstVowel");
**/

//pubnub portion of game














$("#testLeave").click(function(){
 "use strict";
 pubnub.unsubscribe({
  channel: "chat"
 });
});









//game and chat stuff below
$(window).load(function(){
 "use strict";
 generateLetters();
});

startGame.click(function(){
 "use strict";
 //channel
 startDiv.css("display", "none");
});

function handleMessage(message){
 "use strict";
 chatUl.append("<li>"+message+"</li>");
}

function getNoOfUsers(m){
 "use strict";
 console.log(m);
 if(m.action === "join"){
  
 }
 else if(m.action === "timeout" || m.action === "leave"){
  pub("chat","Player left"); 
 }
 noOfPlayers.html(m.occupancy); 
}

function playerJoined(){
 "use strict";
 pub("chat","Player joined"); 
}

function pub(channel, message){
 "use strict";
 pubnub.publish({
  channel: channel,
  message: message
 });
}

chatInput.keydown(function(key){
 "use strict";
 if(key.which === 13){
  pub("chat",$("#chatInput").val());
  chatInput.val('');
 }
});

function generateLetters(){
 "use strict";
 //vowels
 generateRandomLetters(vowelArray, vowelUl, 3);
 //consanants
 generateRandomLetters(consanantArray, consanantUl, 4);
}

function generateRandomLetters(array, ul, noOfElementsNeeded){ //noOfElementsNeeded = 3 or 4
  "use strict";
  var usedLetters = [];
  var successCount = 0;
  while(successCount < noOfElementsNeeded){
   var letter = array[Math.floor(Math.random()*array.length)];
   var successful = usedLetters.indexOf(letter) === -1; //boolean, checks if the generated letter has been generated before
   if(successful){
    ul.append("<li><button>"+letter+"</button></li>");
    usedLetters.push(letter);
    successCount++;
   }
  }
}

function duplicateLetter(letter){
 "use strict";
 if((confirmWord.text()).indexOf(letter) > -1){
  return true; 
 }
 else {
  return false;
 }
}

function wordLengthAboveTwo(){
 "use strict";
 if((confirmWord.text()).length < 3){
  return false;
 } else {
  return true;
 }
}

function repeatWords(){
 "use strict";
 if(submittedWordsArray.indexOf(confirmWord.text()) === -1){
  return false;
 } else {
  return true; 
 }
}

$(document).on('click', 'ul li button', function(){
 "use strict";
 var letter = $(this).text();
 if(duplicateLetter(letter)){
  error.text("You cannot use the same letter twice in a word.");
 }
 else {
  confirmWord.append(letter);
 }
 
});

confirmBtn.click(function(){
 "use strict";
 if(wordLengthAboveTwo()){
  if(!repeatWords()){
   if(noOfWordsInRow === 5){
    $("#tableOfSubmittedWords").append("<tr><td><p>"+confirmWord.text()+"</p></td></tr>");
    noOfWordsInRow++;
    noOfWordsInRow = 1;
   } else {
    $("#tableOfSubmittedWords tr:last").append("<td><p>"+confirmWord.text()+"</p></td>");
    noOfWordsInRow++;
   }
   submittedWordsArray.push(confirmWord.text());
   confirmWord.text('');
   error.text('');
  } else {
   error.text("You cannot submit two of the same word.");
  }
 } else {
  error.text("Your word has to be above two letters in length.");
 }
});

$(document).on('click', 'p#word', function(){
 "use strict";
 confirmWord.text('');
});

pubnub.subscribe({
 channel: "chat",
 presence: getNoOfUsers,
 message: handleMessage,
 connect: playerJoined
});
@charset "utf-8";
/* CSS Document */

#container {
 height: 800px;
 position:fixed;
}

div#start {
 z-index: 18; 
 height: 850px;
 position: absolute;
 background-color: #00FF8C;
 width: 100%;
}

#letterDisplay {
 position: relative;
 background-color: #01ACFF;
 height: 200px; /*200px*/
 margin: 0 auto;
}

#wordArea {
 overflow: scroll;
 height: 400px;
 width: 100%;
 text-align: center;
}

#submitDiv {
 background-color: #01ACFF;
 height: 250px;
 margin: 0 auto; 
}

#chatDiv {
 position: fixed;
 height: 200px;
 z-index: 2; 
}

ul#chatList li, ul#listOfUsers li{
 display: list-item !important;
 text-align: left;
}

table {
 width: 100%;
 height: 100%;
 table-layout: fixed;
}

table tr {
 width: 100%; 
}

table tr td {
 size: auto;
}

table tr td p{
 font: 25px/1 "Comic Sans MS", Verdana, sans-serif;
 text-transform: uppercase;
}

#confirmBtn {
 height: 75px;
 width: 200px; 
}

#checkDiv {
 padding-top: 25px;
 text-align: center;
 size: auto; 
}

p#word {
 font: 30px/1 "Comic Sans MS", Verdana, sans-serif;
 text-transform: uppercase;
}

p#word:hover {
 color: #E74C3C;
 cursor: pointer;
}

p#error {
 color: #E74C3C; 
 transition: all 0.1s;
 -moz-transition: all 0.1s;
 -webkit-transition: all 0.1s;
}

div ul li p {
 font: 25px/1 "Comic Sans MS", Verdana, sans-serif;
 text-transform: uppercase;
}

button {
 font: 36px/1 "Comic Sans MS", Verdana, sans-serif;
 color: #FFF;
 width: 75px;
 height: 75px;
   text-transform: uppercase;
   border-radius: 4px;
   background-color: #F2CF66;
 text-shadow: 0px -2px #2980B9;
 transition: all 0.1s;
 -moz-transition: all 0.1s;
 -webkit-transition: all 0.1s;
}

button#enterGame {
 width: auto; 
}

button:hover {
 background-color: #E74C3C;
 cursor: pointer;
}

button:active {
 -webkit-transform: translate(0px,5px);
   -moz-transform: translate(0px,5px);
 transform: translate(0px,5px);
 border-bottom: 1px solid;
}

ul {
 list-style-type: none;
 text-align: center;
}

ul#consanantUl {
 padding-top: 25px;
}

ul#vowelUl {
 vertical-align: bottom;
}

ul li{
    display: inline;
    padding-right: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Word Game</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div id="container">
     <button id="testLeave">clik 2 leev</button>
     <div id="start">
         Channel Name? <input type="text" id="channelInput">
            <button id="enterGame">Join</button>
            <p id="startMenuError"></p>
        </div>
        
        <div id="presenceDiv">
            <p id="noOfPlayers"></p>
        </div>
        
        <div id="chatDiv">
         <ul id="chatList"></ul>
            <input type="text" id="chatInput">
        </div>
     <div id="letterDisplay">
         <ul id="consanantUl"></ul>
            <ul id="vowelUl"></ul>
        </div>
        
        <div id="wordArea">
            <table id="tableOfSubmittedWords">
             <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
             <tr></tr>
            </table>
        </div>
        
        <div id="submitDiv">
         <div id="checkDiv">
             <p id="word"></p>
             <button id="confirmBtn">submit</button>
                <p id="error"></p>
            </div>
        </div>
    </div>
    
 <!--Jquery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
 <!--Pubnub-->
 <script src="https://cdn.pubnub.com/pubnub-3.10.2.js"></script>
 <!--My Code-->
 <script src="script.js"></script>
</body>

</html>
fetus
  • 23
  • 5
  • Can you provide you full code, please? – Craig Conover Feb 19 '16 at 22:25
  • @CraigConover I added it, tell me if there is missing info – fetus Feb 21 '16 at 02:49
  • That's better but can you provide full code that I can run without modifying it and with all variables defined? If you want to omit the HTML/CSS and just log values to console, that is fine. By the way, heartbeat set to 10 seconds is fine for fast testing but do not set this lower than 60 seconds for production. – Craig Conover Feb 21 '16 at 18:58
  • @CraigConover I added all the code and put a snippet. Yes, the low heartbeat is for testing. My CSS is extremely rough and my JS is inconsistent and inefficient, but here is all the working code as of now. – fetus Feb 23 '16 at 06:15

0 Answers0