在没有闪烁XMLHttpRequest的聊天中更新ProfilePicture

时间:2018-02-19 19:57:31

标签: javascript php jquery html mysql

我目前正在为用户在我的网站上进行用户聊天。我需要帮助解决从我的数据库中检索img数据以优化它的问题。简要总结一下聊天的工作原理如下。

我对消息使用“一对一”数据库结构。

消息(表格) - > | ID | UID |留言| chatroomid |

聊天室表格如下所示

聊天室(表) - > | ID |用户1 |用户2 |

$ chatroomId是一个显示当前点击聊天的变量

我按以下方式显示聊天记录。

logs.php

session_start();

if (isset($_SESSION['chatRoomId'])) {
  $chatroomId = $_SESSION['chatRoomId'];
} else {
  $chatroomId = 0; //There will be no such and we use 0 for the else later
}
$id = $_SESSION['id'];

$result1 = $conn->query("SELECT * FROM messages WHERE chatroomId = $chatroomId ORDER BY id");

$getIds = $conn->query("SELECT * FROM chatrooms WHERE id = $chatroomId");

$getIdsResult = mysqli_fetch_assoc($getIds);
$user1 = $getIdsResult['user1'];
$user2 = $getIdsResult['user2'];

$selfId = 0;
$guestId = 0;

if($user1 == $id){
  $selfId = $user1;
  $guestId = $user2;
} else {
  $selfId = $user2;
  $guestId = $user1;
}


echo "<div class = 'chat-logs'>";

//If possible if we wouldnt have to get all of the images EVERY TIME
if(isset($_SESSION['chatRoomId'])){
  while ($extract = mysqli_fetch_array($result1)){
    $from = $extract['from'];
    if($from == $id){
      echo "
       <div class = 'chat self'>
         <div class = 'imageContainer'>
           <img src = 'displayProfilePicture.php?user_id=$selfId'>
         </div>
         <div class = 'chat-message'>
           ".$extract['msg']."
         </div>
       </div>";
     } else {
        echo "
          <div class = 'chat friend'>
            <div class = 'imageContainer'>
              <img src = 'displayProfilePicture.php?user_id=$guestId'>
            </div>
            <div class = 'chat-message'>
              ".$extract['msg']."
            </div>
          </div>";
     }
  } 
} else {
  echo "No messages";//To be continued...
}

我使用XMLHttpRequest在jQuery的帮助下每200毫秒调用一次脚本并将响应加载到chatlogs div中。

$(document).ready(function(e){
$.ajaxSetup({cache: false});
setInterval(function(){ 
  $( "#chatlogs" ).load( "logs.php", function() { 
      //Something to be executed after the logs is loaded if we want
    });
  }, 200);
});

它目前运作良好。聊天工作,并根据我的需要正确更新。除了一件事。如果我们回顾一下如何加载在数据库中存储为“blobs”的图像,我将使用另一个php脚本“displayProfilePicture.php?user_id = n”显示它们。这导致的是,当logs.php被加载时它会闪烁,并且它会在调用profilePicture.php时不断更新img。

通过浏览具有单独脚本来显示blob的网络似乎是正确的方法。最后我的问题是,如果有一些方法可以让我只加载一次图像然后每次调用logs.php时将其重新用作变量或其他东西?我希望我已经提供了足够的信息,并以可理解的方式说明了问题,如果不是,请让我知道如何添加更多有价值的信息,以便我们一起找到解决方案。

祝你好运

0 个答案:

没有答案