settingsAccountsettings
By using our mini forum, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy
Menusettings

Q: Messenger (Online Chat with Firebase, JavaScript and AJAX)

+3 votes

Write a JS program that records and displays messages. The user can post a message, supplying a name and content and retrieve all currently recorded messages. Use the following HTML to test your code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Messenger</title>
  <style>
    label { display: inline-block; width: 5em; }
    #author, #content { width: 30em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="main">
  <textarea id="messages" cols="80" rows="12" disabled="true"></textarea>
  <div id="controls">
    <label for="author">Name: </label><input id="author" type="text"><br>
    <label for="content">Message: </label><input id="content" type="text">
    <input id="submit" type="button" value="Send">
    <input id="refresh" type="button" value="Refresh">
  </div>
</div>
<script src="solution.js"></script>
<script>
    attachEvents();
</script>
</body>
</html>

You will need to create the database yourself – use Firebase and set the access rules to be public, so that anyone can post a message and read what’s been posted. Since Firebase objects are by default sorted alphabetically, you’ll need to keep a timestamp property so they can be ordered by most recently posted instead. Use the following message structure:

{

  author: authorName,

  content: msgText,

  timestamp: time

}

The key associated with each message object is not important – when making a POST request with the message object as parameter, Firebase will automatically assign a random key. To get started, you can create a “messenger” entry in your Firebase and import the following JSON object:

{
  "-KWi2_-QHxL1yov93j5i" : {
    "author" : "Pesho",
    "content" : "hi guys",
    "timestamp" : 1479315195400
  },
  "-KWi2aENk0utP8BLnhi6" : {
    "author" : "Gosho",
    "content" : "whats up",
    "timestamp" : 1479315200447
  },
  "-KWi3eFIUZbh8Z3OjZEB" : {
    "author" : "Pesho",
    "content" : "not much, how about you?",
    "timestamp" : 1479315479039
  },
  "-KWiX5ixY39AqdD2hJzV" : {
    "author" : "LJ",
    "content" : "LEEEEROOOY JEEEEENKIIINS",
    "timestamp" : 1479323197569
  }
}

Examples:

online chat created with firebase

asked in JavaScript category by user nikole
share on fb share via email

1 Answer

+2 votes

>> HERE YOU CAN VIEW AND TEST THE PROJECT ONLINE << (on GitHub io)

To get a useable timestamp, you can use Date.now() – this will return the number of milliseconds since 1st of January 1970. The exact value is irrelevant, what’s important is it will be greater for messages that are posted later. We can then sort them by this value.

To create a new entry in Firebase, type its name in the address box and click Go:

online chat with firebase 1

You can then import content with the button in the upper right corner:

online chat with firebase 2

Put the sample data inside a file with extension .json and select it from the popup:

online chat with firebase 3

Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Messenger</title>
    <style>
        label { display: inline-block; width: 5em; }
        #author, #content { width: 30em; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="messenger.js"></script>
</head>
<body>
<div id="main">
    <textarea id="messages" cols="80" rows="12" disabled="true"></textarea>
    <div id="controls">
        <label for="author">Name: </label><input id="author" type="text"><br>
        <label for="content">Message: </label><input id="content" type="text">
        <input id="submit" type="button" value="Send">
        <input id="refresh" type="button" value="Refresh">
    </div>
</div>
<script>
    attachEvents();
</script>
</body>
</html>

and the JavaScript file (messenger.js):

function attachEvents() {
    $("#submit").click(attachSend);
    $("#refresh").click(attachRefresh);

    function attachSend() {
        let messageJson = {
            "author": $("#author").val(),
            "content": $("#content").val(),
            "timestamp": Date.now()
        };

        let sendMessageRequest = {
            url: "https://messenger-e76f7.firebaseio.com/messenger.json",
            method: "POST",
            data: JSON.stringify(messageJson),
            success: attachRefresh
        };

        $.ajax(sendMessageRequest);
    }

    function attachRefresh() {
        $.get("https://messenger-e76f7.firebaseio.com/messenger.json")
            .then(displayMessages);
    }

    function displayMessages(messages) {
        let output = $("#messages");
        output.empty();
        let messagesStr = "";
        for (let key in messages) {
            messagesStr += `${messages[key]["author"]}: ${messages[key]["content"]}\n`
        }
        output.text(messagesStr);
    }
}
answered by user richard8502
edited by user golearnweb

Facebook Follow Button

Twitter Follow Button

Related questions

622 questions

979 answers

129 comments

53 users

  | Privacy Policy | Contact Us | Sitemap
Copyright
...