Ajax Instant Messenger Using PHP - php

Question

Trying to create an AJAX IM for my site...
need to load the part of page when row is inserted into mysql DB ... can anybody help me with this.. thanks in advance

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var waittime=2000;
var intUpdate = null;
function verifDB(){
$.ajax({
type: "POST",
url: "verifdb.php",
success: function(msg){
alert(msg),;
}
});
intUpdate = setTimeout("verifDB()", waittime);
}
verifDB();
</script>
verifdb.php file is queried every 2000 ms to check on the database
you can put your file in requette verifdb.php
and you will have the answer in the variable msg

Answer 2

Client Side
For assyncronous requests on the client side you can use JQuery or plain Javascript XMLHTTPRequest
Server Side
I know you've specified PHP but I would recommend you to check how google channels work and make a similar implementation in PHP.
Since checking having multiple users checking for updates on the database, I would recommend you to use memcache.
Something like:
$script_called_time = time();
while($memcache->get('last_message') < $script_called_time){
usleep(100);
}
$result = $database->query("SELECT * FROM `messages` WHERE `date` > " . $script_called_time . "'");
...
This way the connection will be established and the user will receive a response when there's any...

Answer 3

(function() {
var chat = {
messageToSend: "",
messageResponses: [
"I Love You",
"I Wants to Kiss You.",
'Hug Me!"',
"Lets Sleep Together",
"Lets go for a date",
"Will you be physical with me?"
],
init: function() {
this.cacheDOM();
this.bindEvents();
this.render();
},
cacheDOM: function() {
this.$chatHistory = $(".chat-history");
this.$button = $("button");
this.$textarea = $("#message-to-send");
this.$chatHistoryList = this.$chatHistory.find("ul");
},
bindEvents: function() {
this.$button.on("click", this.addMessage.bind(this));
this.$textarea.on("keyup", this.addMessageEnter.bind(this));
},
render: function() {
this.scrollToBottom();
if (this.messageToSend.trim() !== "") {
var template = Handlebars.compile($("#message-template").html());
var context = {
messageOutput: this.messageToSend,
time: this.getCurrentTime()
};
this.$chatHistoryList.append(template(context));
this.scrollToBottom();
this.$textarea.val("");
// responses
var templateResponse = Handlebars.compile(
$("#message-response-template").html()
);
var contextResponse = {
response: this.getRandomItem(this.messageResponses),
time: this.getCurrentTime()
};
setTimeout(
function() {
this.$chatHistoryList.append(templateResponse(contextResponse));
this.scrollToBottom();
}.bind(this),
1500
);
}
},
addMessage: function() {
this.messageToSend = this.$textarea.val();
this.render();
},
addMessageEnter: function(event) {
// enter was pressed
if (event.keyCode === 13) {
this.addMessage();
}
},
scrollToBottom: function() {
this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight);
},
getCurrentTime: function() {
return new Date()
.toLocaleTimeString()
.replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");
},
getRandomItem: function(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
};
chat.init();
var searchFilter = {
options: { valueNames: ["name"] },
init: function() {
var userList = new List("people-list", this.options);
var noItems = $('<li id="no-items-found">No items found</li>');
userList.on("updated", function(list) {
if (list.matchingItems.length === 0) {
$(list.list).append(noItems);
} else {
noItems.detach();
}
});
}
};
searchFilter.init();
})();
Messenger Using Jquery And PHP
If you needs any help regarding this answer feel free to contact me at pachauriashokkumar[at]gmail[dot]com if you need complete code with css JS and HTML Drop me an email i will email the code to you
External Files are needed
https://code.jquery.com/jquery-3.4.1.js
https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js
https://raw.githubusercontent.com/javve/list.js/v1.5.0/dist/list.min.js
Messenger Using JQuery And PHP Demo Is Here Also Author of This Post on PenCode is available for clarification over email pachauriashokkumar[at]gmail[dot]com