I have been working on an ajax/php chat system where users can obviously chat with one another. Im concerned about server load, the way it was originally programmed was auto refresh div (chat box) every x seconds it only did this is the user was active as i timed out their inactivity. If they remained inactive for 10 minutes or so they would be shown as idle the system would then stop refreshing. Then i looked into Server-Sent Events with HTML5 which worked well however not all browsers work with this.
Does anyone have a better solution or is the div refresh ok for now? Hope someone can help thanks!
Consider using COMET, or take a look at Ajax Push Engine: Link
An example of a chat system using COMET: Link
// jQuery Document
$(document).ready(function(){
});
//jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
loadLog;
return false;
});
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval (loadLog, 1000);
</script>
Related
I have a website here and I would like users to be able to click links and or buttons inside of the chat windows but the page is auto refreshing at a very high rate using jQuery, what would be the most efficient way to allow this?
Here is my code for auto refreshing.
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url: "chatLogs/masterlog.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval (loadLog, 500); //Reload file every 2.5 seconds
i would suggest you to implement a feature like when the user hold CTRL key pressed (or any other key) it stop the refreshing.
when the user release the key, it start again.
you could implement this simply like this :
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url: "chatLogs/masterlog.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
var i = setInterval (loadLog, 500); //Reload file every 2.5 seconds
document.onkeydown = function(e){
ctrl = e.ctrlKey;
if(ctrl)
clearInterval(i);
}
document.onkeydown = function(e){
ctrl = e.ctrlKey;
if(ctrl)
i = setInterval(loadLog, 500);
}
I ask you for help. Namely, struggling with the tooltip in ajax. Everything works beautifully when the page is load or after such as F5. However, in the part web I use refresh div every 60 seconds by ajax
<script type="text/javascript" >
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#loaddiv').load('refresh_clusterdx_2.php');
}, 60000);
</script>
The code of my tooltip
<script type="text/javascript">
$(document).ready(function(){
function showProfileTooltip(e, id){
var top = e.clientY -45;
var left = e.clientX + 25;
$('.p-tooltip').css({
'top':top,
'left':left
}).show();
//send id & get info from get_prefix.php
$.ajax({
url: '/Info/get_prefix.php?id='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide();
}
$('.profile').mouseover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip(e, id);
});
$('.p-tooltip').mouseleave(function(){
hideProfileTooltip();
});
});
</script>
All beautifully and looks ok until the div is not refreshed. When a div to be refreshed, the tooltip no work :( I can not find a solution to the problem, whether it is at all possible to solve.
Thank you for any help.
Regards
tjakob
To ensure that your functions work after ajax loaded content, you'll have to modify them a little:
$(document).on('mouseover', '.profile', function() {
var id = $('.profile').attr('data-id');
showProfileTooltip(e, id);
});
$(document).on('mouseleave', '.p-tooltip', function() {
hideProfileTooltip();
});
You should always use .on with dynamically loaded content - I'm in the habit of doing this for all my functions now.
Is there any SIMPLE way to create an autoscroll within a php/html chatbox?
I tried a few things, but they all interfered with other .js elements on the page and all end up not working.
to view live code of the chatbox click here!
heres what i have at the moment
// jQuery Document
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval (loadLog, 2500); //Reload file every 2.5 seconds
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
I suspect the weight you get your scroll height doesn't work. I have tried to type it in the command line of FF and didn't get an int nor an object.
Don't try to get the scroll height. Scroll further down... and more than that.
$("#chatbox").animate({ scrollTop: 99999 }, 'normal');
I have only tried with FF, but should work across most browsers.
Then, your success function is dead simple :
success: function(html){ $("#chatbox").animate({ scrollTop: 99999 }, 'normal');
$("#chatbox").html(html);
$("#chatbox").animate({ scrollTop: 99999 }, 'normal');
}
$(".msgln").last().offset().top
I have a page that the function is to refresh div tag.
Div tag function is refresh the data will receive.
So far that's ok.
When I block the text using mouse, that's will clear the block text based on timing "20000". This below the JS script function.
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function()
{
$("#content2").load("post_rf.php");
var refreshId = setInterval(function()
{
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
$.ajaxSetup({ cache: false });
});
</script>
What I want to do is, how to keep the block text in div refresh function ?
Because some user maybe want to copy the text. In this case, user must quickly copy the text before div refresh.
Maybe the example like facebook post live update.
You want to assign your interval to a variable, when user mouse overs your DIV then use clearInterval, when mouse out setInterval again.
var interval;
$(div).bind("mouseout", function() {
interval = setInterval(refresh, 1000);
});
$(div).bind("mouseover", function() {
clearInterval(interval);
});
EDIT
Sorry I posted that on a phone and it's hard to write code that way, try this:
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function() {
$("#content2").load("post_rf.php");
// set your initial interval to kick it off
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
// bind an event to mouseout of your DIV to kickstart the interval again
$("#content2").bind("mouseout", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval);
});
$.ajaxSetup({ cache: false });
});
</script>
I have a code like this below :
$(document).ready(function() {
$("#content2").load("post_rf.php");
// set your initial interval to kick it off
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
// bind an event to mouseout of your DIV to kickstart the interval again
$("#content2").bind("mouseout", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval);
});
$.ajaxSetup({
cache: false
});
});
What I want to do is when mouseover, data keep autorefresh.
In this case if I drag mouse into the area of mouseover, it stop auto refresh until I drag mouseout out the area of mouseover.
So is it possible to set onmouseover, data will keep auto refresh ?
i think what you want is the other way around,
$("#content2").bind("mouseover", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseout", function() {
clearInterval(refreshInterval);
});
I'm a little confused about your question, well the following code is responsible for making stop the auto refresh when you mouseover
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval); // it's clearing the setInterval
});
If you just remove/disable the the line or whole function then it won't stop the auto refresh when you move your mouse on that element.
but if you only want to occur the auti refresh only on mouseover and again want to stop the auto refresh on mouseout then you can do as follows
$("#content2").bind("mouseover", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
$("#content2").bind("mouseout", function() {
clearInterval(refreshInterval);
});
and should not use following code to start the auto refresh initially, just disable the code as follows
/*
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
*/
but you can keep the variable declarede as var refreshInterval=0;