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
);
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）