douji1077 2017-11-10 06:40
浏览 54
已采纳

每次将新消息插入DB（MySQL）时刷新chat <div>

I have been searching on the net for a code that refreshes the chat <div> every time a new message is received from the other chat user. I have read about setTimeout() and setInterval() however need more experienced developers advice and help.

The best example is this website. Unless you refresh the browser, you will not see the notification right away. I guess the best example is facebook. Whenever the Database is updated, the notification is popped up right away without refreshing the browser.

Here`s my code.

$check_sql = ("SELECT time from messages where conversation_id = '".$con_id."' ");
$check_query = mysqli_query($con, $check_sql) or die ("ERROR　checking:".mysqli_error($con);
while($row = mysqli_fetch_assoc($check_query){
  $current_time = date_default_timezone_get();
  $message_time_sent = $row['time'];
  $cal = $message_time_sent->diff($current_time);
  $ans = $cal->format("%D %H:%i:%s");
  sscanf($ans,"%d %d:%d:%d ", $day, $hr, $min, $sec);

  if (($day == 0) && ($hr == 0) && ($min == 0) && ($sec >0)){
   //do something here to get receive message automatically and notification....
 }

What I want to achieve:

  1. Facebook automatically receives messages without refreshing the browser. I hope it could be like this.
  2. Automatic pop up of notification without refreshing the browser which I think it is not really important, once we can figure out item 1, then the rest will be all good.

The tricky part about using setInteval() the browser will keep refreshing the <div> chat so when the user input a text to send, it will disappear everytime it refreshes. Please excuse my English....

So, is there a proper way of handling this....

  • 写回答

1条回答 默认 最新

  • dth62818 2017-11-10 07:34
    关注

    setInterval - set interval will call your function every interval you set

    setInterval sample: https://repl.it/OE1o

    <html>
<body>
    <div id="sample">
        Day Mon DD YYYY HH:MM:SS GMT+XXX (Time Zone)
    </div>
</body>
</html>

<script>
var sample = document.getElementById('sample');
setInterval(
    // Here is where to do things like dom manipulation
    function() {
        sample.innerHTML = new Date;
    },

    // Here is where you set the interval asuming I want to update every 1 second
    1000
);
</script>

    setTimeout - will be call once the timeout is reached.

    setTimeout sample: https://repl.it/OE3H

    setTimeout(
    // This function will be called once the timeout is reached
    function() {
        console.log('Hello World');
    },

    // The timeout is 5 seconds
    5000
);
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥20 delta降尺度方法，未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet，要求快速高效
  • ¥15 再不同版本的系统上，TCP传输速度不一致
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节，有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程