ntassone/query_chat.html

## query_chat.html
<html>
  <head>
    <title>Query Chat</title>
    <script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .container {
        max-width: 800px;
        margin: 50px auto;
      }
      #messages {
        margin-top: 20px;
        padding: 0;
        list-style: none;
        border: 1px solid #ccc;
        border-style: none none solid none;
      }
        #messages li {
          position: relative;
          border-top: 1px solid #ccc;
          padding: 15px;
          background: #f7f7f7;
          font-size: .9em;
        }
        #messages li button {
          position: absolute;
          right: 15px;
          top: 11px;
        }
    </style>
  </head>
  <body>

    <div class="container">
      <h2>Chat Messages</h2>
      Your Name: <input type="text" name="user-name" />
      Your Message: <input type="text" name="new-message" />
      <ul id="messages">
        <li>chat messages will go in here <button>&times;</button></li>
      </ul>
    </div>

    <script>
      /*
       * The messages array will contain objects with two properties: 'name' and 'value'.
       * Because we used Key#add to insert new messages as children under chatMessages
       * key, the 'name' of each object will be a GoInstant generated name. The value
       * will be the userMessage we sent to be stored.
       *
       * Sample messages might look like:
       *  messages = [
       *    {
       *      name: "id-143da6a9715-000",   // generated by GoInstant when using Key#add
       *      value: {
       *        text: "Hello",
       *        timestamp: 1390938801050,
       *        user: "Henry Morton Stanley"
       *      }
       *    },
       *    {
       *      name: "id-143da66d2ce-000",   // generated by GoInstant when using Key#add
       *      value: {
       *        text: "And hello to you, sir.",
       *        timestamp: 1390938554192,
       *        user: "David Livingston"
       *      }
       *    },
       *    {
       *      name: "id-143da5e18cc-000",   // generated by GoInstant when using Key#add
       *      value: {
       *        text: "Dr. Livingston, I presume?",
       *        timestamp: 1390937982286,
       *        user: "Henry Morton Stanley"
       *      }
       *    }
       *  ];
       *
       *
       * Also, the array order will reflect the sorting order of the chatMessagesQuery
       * and the number of messages in the array being a maximum of what was
       * specified by the limit.
       */
      function updateChatMessages(messages) {
        var messageList = $('#messages');

        // we are getting the entire contents of the list so empty it and refill it
        // with the new values.
        messageList.empty();

        $.each(messages, function(index, messageInfo) {
          var messageId = messageInfo.name;
          var messageData = messageInfo.value;

          // Generate a message as a list element to add to the list of messages. A
          // more refined application would use more elegant CSS.
          var listElement =
            '<li id="' + messageId + '">' +
            '<span style="font-family:arial;">[' + messageData.timestamp + '] </span>' +
            '<span style="font-family:arial;color:red">' + messageData.user +
            ' says: </span>' +
            '<span style="font-family:arial;">' + messageData.text + '</span>' +
            '</li>';

          messageList.append(listElement);
        });
      }

      $(document).ready(function () {

        // TODO: The 'QueryChat' application should be created in your GoInstant
        // dashboard and the URL updated appropriately.
        var url = 'https://goinstant.net/<YOURACCOUNT>/<YOURAPPLICATION>';
        goinstant.connect(url, function (err, connection, lobby) {
          if (err) {
            throw err;  // Could not connect to GoInstant
          }

          var chatMessagesKey = lobby.key('chatMessages');

          var filter = { };
          var sort = { 'timestamp': 'desc' };
          var limit = 10;
          var options = { sort: sort, limit: limit };

          var chatMessagesQuery = chatMessagesKey.query(filter, options);

          chatMessagesQuery.on("change", function(results) {
            updateChatMessages(results);
          });

          chatMessagesQuery.execute(function(err, results) {
            if (err) {
              throw err;  // Invalid query
            }
            updateChatMessages(results);
          });

         // add a new message when the user hits the <Enter> key.
          var newMessage = $('input[name="new-message"]');
          newMessage.keypress(function(e) {

            var messageText = newMessage.val();
            if (e.which === 13 && messageText) {

              var currUser = $('input[name="user-name"]');
              var userName = currUser.val() || 'anonymous';

              // this is the data we are storing that defines a chat message.
              var userMessage = {
                text: messageText,        // user inputted text
                user: userName,           // user inputted name
                timestamp: Date.now()     // current time
              };

              // use Key#add to insert our message under the chatMessagesKey. This will
              // automatically generate a unique subkey name and store our userMessage
              // object as the generated key's value.
              //
              // It is worth noting that the uniquely generated subkey names are also
              // guaranteed to be ordered such that each subsequent name is semantically
              // larger than the previously generated name. This makes having a timestamp
              // in the userMessage somewhat redundant and even prone to error if the
              // computer time of user sending the new message is not accurate.
              chatMessagesKey.add(userMessage);

              // clear out the added text message but not the existing user name.
              newMessage.val('');
            }
          });
        });
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<title>Query Chat</title>
	<script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	.container {
	max-width: 800px;
	margin: 50px auto;
	}
	#messages {
	margin-top: 20px;
	padding: 0;
	list-style: none;
	border: 1px solid #ccc;
	border-style: none none solid none;
	}
	#messages li {
	position: relative;
	border-top: 1px solid #ccc;
	padding: 15px;
	background: #f7f7f7;
	font-size: .9em;
	}
	#messages li button {
	position: absolute;
	right: 15px;
	top: 11px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h2>Chat Messages</h2>
	Your Name: <input type="text" name="user-name" />
	Your Message: <input type="text" name="new-message" />
	<ul id="messages">
	<li>chat messages will go in here <button>×</button></li>
	</ul>
	</div>

	<script>
	/*
	* The messages array will contain objects with two properties: 'name' and 'value'.
	* Because we used Key#add to insert new messages as children under chatMessages
	* key, the 'name' of each object will be a GoInstant generated name. The value
	* will be the userMessage we sent to be stored.
	*
	* Sample messages might look like:
	* messages = [
	* {
	* name: "id-143da6a9715-000", // generated by GoInstant when using Key#add
	* value: {
	* text: "Hello",
	* timestamp: 1390938801050,
	* user: "Henry Morton Stanley"
	* }
	* },
	* {
	* name: "id-143da66d2ce-000", // generated by GoInstant when using Key#add
	* value: {
	* text: "And hello to you, sir.",
	* timestamp: 1390938554192,
	* user: "David Livingston"
	* }
	* },
	* {
	* name: "id-143da5e18cc-000", // generated by GoInstant when using Key#add
	* value: {
	* text: "Dr. Livingston, I presume?",
	* timestamp: 1390937982286,
	* user: "Henry Morton Stanley"
	* }
	* }
	* ];
	*
	*
	* Also, the array order will reflect the sorting order of the chatMessagesQuery
	* and the number of messages in the array being a maximum of what was
	* specified by the limit.
	*/
	function updateChatMessages(messages) {
	var messageList = $('#messages');

	// we are getting the entire contents of the list so empty it and refill it
	// with the new values.
	messageList.empty();

	$.each(messages, function(index, messageInfo) {
	var messageId = messageInfo.name;
	var messageData = messageInfo.value;

	// Generate a message as a list element to add to the list of messages. A
	// more refined application would use more elegant CSS.
	var listElement =
	'<li id="' + messageId + '">' +
	'<span style="font-family:arial;">[' + messageData.timestamp + '] </span>' +
	'<span style="font-family:arial;color:red">' + messageData.user +
	' says: </span>' +
	'<span style="font-family:arial;">' + messageData.text + '</span>' +
	'</li>';

	messageList.append(listElement);
	});
	}

	$(document).ready(function () {

	// TODO: The 'QueryChat' application should be created in your GoInstant
	// dashboard and the URL updated appropriately.
	var url = 'https://goinstant.net/<YOURACCOUNT>/<YOURAPPLICATION>';
	goinstant.connect(url, function (err, connection, lobby) {
	if (err) {
	throw err; // Could not connect to GoInstant
	}

	var chatMessagesKey = lobby.key('chatMessages');

	var filter = { };
	var sort = { 'timestamp': 'desc' };
	var limit = 10;
	var options = { sort: sort, limit: limit };

	var chatMessagesQuery = chatMessagesKey.query(filter, options);

	chatMessagesQuery.on("change", function(results) {
	updateChatMessages(results);
	});

	chatMessagesQuery.execute(function(err, results) {
	if (err) {
	throw err; // Invalid query
	}
	updateChatMessages(results);
	});

	// add a new message when the user hits the <Enter> key.
	var newMessage = $('input[name="new-message"]');
	newMessage.keypress(function(e) {

	var messageText = newMessage.val();
	if (e.which === 13 && messageText) {

	var currUser = $('input[name="user-name"]');
	var userName = currUser.val() \|\| 'anonymous';

	// this is the data we are storing that defines a chat message.
	var userMessage = {
	text: messageText, // user inputted text
	user: userName, // user inputted name
	timestamp: Date.now() // current time
	};

	// use Key#add to insert our message under the chatMessagesKey. This will
	// automatically generate a unique subkey name and store our userMessage
	// object as the generated key's value.
	//
	// It is worth noting that the uniquely generated subkey names are also
	// guaranteed to be ordered such that each subsequent name is semantically
	// larger than the previously generated name. This makes having a timestamp
	// in the userMessage somewhat redundant and even prone to error if the
	// computer time of user sending the new message is not accurate.
	chatMessagesKey.add(userMessage);

	// clear out the added text message but not the existing user name.
	newMessage.val('');
	}
	});
	});
	});
	</script>
	</body>
	</html>