Tutorial: Simple Chat

Examples Simple Chat

Here a simple example on how to create a Simple Chat using [[service]].

  1. Edit a html file in your favorite editor. Here is a boilerplate

    <!DOCTYPE html>
    <html>
    <head>
    <title>WebCom chat demo</title>
    </head>
    <body>
    </body>
    </html>
  2. Include the Webcom javascript library in head section

    <head>
     ...
     <script src='[[siteUrl]]/libjs/latest/webcom.js'></script>
     ...
    </head>
  3. Create HTML markups for a basic chat UI in body section

    <body>
     ...
     <div class="example-chat">
       <header>WebCom chat demo</header>
    
       <div class='toolbar'>
         <label for="nameInput">Username:</label>
         <input type='text' id='nameInput' placeholder='enter a username...'>
       </div>
    
       <ul id='messages'></ul>
    
       <footer>
         <input type='text' id='messageInput'  placeholder='Type a message...'>
       </footer>
     </div>
     ...
    </body>
  4. Before body closing tag (</body>), create a <script> section and create a Webcom reference. Next steps write to this <script> section

     ...
     <script>
         var messagesRef = new Webcom('[[baseUrl]]/base/chat');
         ...
     </script>
    </body>
  5. Register some DOM elements

    var messageField = document.getElementById('messageInput'),
     nameField = document.getElementById('nameInput'),
     messageList = document.getElementById('messages');
  6. Listen for KeyPress events

    // Listen for "enter" pressed
    messageField.addEventListener('keypress', function (e) {
    var msg = messageField.value;
    
    if (e.keyCode === 13 && msg !== '' ) {
     // Save data
     messagesRef.push({
       name: nameField.value, 
       text: msg
     });
    
     // Clear message field
     messageField.value = '';
    }
    });
  7. Subscribe to every chat message by adding a callback that is triggered every time a child is added to the Webcom reference

// Add a callback that is triggered for each chat message.
messagesRef.on('child_added', function (snapshot) {
  // Get data
  var data = snapshot.val(),
      username = data.name || "anonymous",
      message = data.text;

  // Create message elements and sanitize text
  var messageElement = document.createElement("li"),
      nameElement = document.createElement("strong");

  nameElement.setAttribute('class', 'username');
  nameElement.innerText = username;

  messageElement.innerText = message;
  messageElement.insertBefore(nameElement, messageElement.childNodes[0]);

  // Add message
  messageList.appendChild(messageElement);

  // Scroll to bottom message list
  messageList.scrollTop = messageList.scrollHeight;
});

For styles, create a new <style> tag in <head> section and copy/paste CSS content of jsBin CSS tab

<head>
    ...
    <style>

    <!-- content of CSS JSBin tab -->

    </style>
    ...
</head>

###Complete HTML###

Here is full example in jsBin, test it and modify it as you want !

JS Bin on jsbin.com

Or use our version.

You can access the [[console]] and visualize data exchanged in this base in real time with the account : sandbox@list.orange.com (password : sandbox)

Then access the chatsandbox application and browse data