Skip to content

Instantly share code, notes, and snippets.

@Borgaard

Borgaard/sochatty_firebase.html

Created January 5, 2016 20:53
Show Gist options
  • Save Borgaard/ef2aa250b9ba03ca31f1 to your computer and use it in GitHub Desktop.
Save Borgaard/ef2aa250b9ba03ca31f1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Borgaard created this gist Jan 5, 2016.
    89 changes: 89 additions & 0 deletions sochatty_firebase.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    <html>
    <style>
    .timeColor {
    color: gray;
    margin-right: 5px;
    }
    .userColor {
    color: orange;
    margin-right: 5px;
    }
    .msgColor {
    color: purple;
    margin-right: 5px;
    }
    </style>
    <body>
    <div id="chat-window"></div>
    <div id="chat-form">
    <form id="formy">
    <textarea name="chat-entry" id="chat-entry" cols="30" rows="1"></textarea>
    <input type="submit" value="ChatzOr"></input>
    </form>
    </div>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script>
    var firebase = new Firebase("https://sochatty.firebaseio.com/");

    function addNewPost(post){
    var timeSpan = document.createElement("span");
    var userSpan = document.createElement("span");
    var msgSpan = document.createElement("span");

    timeSpan.textContent = (new Date(post["time"])).toUTCString();
    timeSpan.className = "timeColor";

    userSpan.textContent = post["username"] + " says: ";
    userSpan.className = "userColor";

    msgSpan.textContent = post["messageBody"];
    msgSpan.className = "msgColor";

    var li = chatWindow.appendChild(document.createElement("li"));
    li.appendChild(timeSpan);
    li.appendChild(userSpan);
    li.appendChild(msgSpan);
    // li.textContent = (new Date(post["time"])).toUTCString() + " | " + "</span>" + post["username"] + " says: " + post["messageBody"];
    }

    firebase.limitToLast(1).on('child_added', function (snapshot) {
    var post = snapshot.val();
    addNewPost(post);
    });

    var chatWindow = document.querySelector("#chat-window");
    firebase.once("value", function(snapshot){
    // var funnyExists = snapshot.exists();
    // console.log(snapshot.val());
    var snappy = snapshot.val();
    for (var key in snappy){
    var post = snappy[key];
    addNewPost(post);
    }
    });

    //on page load, check Local Storage to see if there's already a username
    var username = localStorage.getItem("username");
    //if there is no username, ask the user and set value in local storage
    if (username == null) {
    username = prompt("What is your username?");
    localStorage.setItem("username", username);
    }
    var chatVal = document.querySelector("#chat-entry");
    var form = document.querySelectorAll("#formy")[0];
    form.addEventListener("submit", function(event){
    event.preventDefault()
    // console.log(event.timeStamp);
    console.log(arguments);
    firebase.push({
    username: username,
    messageBody: chatVal.value,
    time: event.timeStamp
    })
    // var li = chatWindow.appendChild(document.createElement("li"));
    // li.textContent = (new Date(event.timeStamp)).toUTCString() + " | " + username + " says: " + chatVal.value;
    chatVal.value = "";
    });
    </script>
    </body>
    </html>