Chat with simple autoload
Posted: Fri Mar 10, 2023 1:40 pm
Simple system. Create a page in JSON format and create a JSON structure. Inside the page you must pass the information that must present in JSON that we will read in a script ( You can use either the DATA API or POST LIST, taking this information and docking in JSON ). On the chat page we will do the following script .
Let's create a function and call our page with the JSON data we just assembled. That was a method I used.
https://www.w3schools.com/js/js_json_html.asp
has other ways to call the file and present it in a Div. After the function is configured I will make it update every 1 second using this method.
https://www.w3schools.com/jsref/met_win_setinterval.asp
at the end so it should stick the structure.
Use this div to call the chat
And a simple structure, soon new updates. Check out my website: https://godcode.wapka.xyz/
-----------------------NOTE-----------------
Remember when you are creating the page with json information, you must create an array list with multiple objects. See the example of my https://hlsking.wapka.site/msg.
Let's create a function and call our page with the JSON data we just assembled. That was a method I used.
https://www.w3schools.com/js/js_json_html.asp
has other ways to call the file and present it in a Div. After the function is configured I will make it update every 1 second using this method.
https://www.w3schools.com/jsref/met_win_setinterval.asp
at the end so it should stick the structure.
Code: Select all
<script>
setInterval(chat, 1000);
function chat() {
const dbParam = JSON.stringify({table:"customers",limit:4});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<ol class='chat'>"
for (let x in myObj) {
text += " <li class="+ myObj[x].quem +"><div class='msg'>" + "<font color='black'>" + myObj[x].name + " : " + " </font>" + "<p>" + myObj[x].content + "</p>" + "</br>" + "<time>" + myObj[x].time + "</time>" + "</div><hr/></li>";
}
text += "</ol>"
document.getElementById("chat").innerHTML = text;
}
xmlhttp.open("GET", "/message page in Json.html");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</script> Use this div to call the chat
Code: Select all
<p id="chat"></p> -----------------------NOTE-----------------
Remember when you are creating the page with json information, you must create an array list with multiple objects. See the example of my https://hlsking.wapka.site/msg.
