Tutorial: Simple Chat

Tips and TricksExamples 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('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

↑ ↑