由于重复ajax调用，无法正确复制文本

r9f1avp5  于 2021-06-20  发布在  Mysql
关注(0)|答案(2)|浏览(407)

我有一个简单的聊天网络应用程序，一切正常。但是，有两个问题：1）当我尝试复制文本时，重复的ajax调用会导致选中所有文本，如果gif长于间隔，则会在循环中运行。2） 新消息的通知是有效的，但是为了看到新消息，您必须单击发件人，即使您当前正在与他们交谈。

当我试图复制一条消息时会发生这种情况：

我不知道如何在不点击用户链接的情况下显示新消息。
以下是主页chat.php：

  1. <?php
  3. //error_reporting(E_ERROR);
  4. //ini_set('display_errors', 1);
  6. include 'includes/header.php';
  7. include 'includes/DB.php';
  9. try {
  10.     $db = new DB();
  11. } catch (Exception $e) {
  12. }
  14. $username = $_SESSION['logged_in'];
  15. $short_name = substr($username, 0, strpos($username, '.'));
  16. ?>
  17. <div id="page-wrap">
  18.     <h2 id="chat_title_h2">IT Chat</h2>
  19.     <p id="name-area">Hello, <?= $short_name ?></p>
  20.     <div id="chat-wrap">
  21.         <div id="user-list">
  22.             <p style="color:white;font: bold 12px 'Lucida Grande', Sans-Serif;margin-top:10px; margin-left:10px;">
  23.                 Conversations</p>
  24.             <?php
  25.             //Populate the user list
  26.             foreach ($users_result = $db->getRows('SELECT * FROM users ORDER BY username', ['']) as $user) {
  27.                 $username = $user['username'];
  28.                 $short_list_name = substr($username, 0, strpos($username, '.'));
  29.                 echo '<p style="margin-left:10px;color:white;"><a class="link" style="color:white!important;" href=' . $username . '>' . $short_list_name . '</a><span class="dot" data-name="' . $username . '"</p>';
  30.             }
  31.             ?>
  32.         </div>
  33.         <div id="chat-area"></div>
  34.     </div>
  35. </div>
  37. <div id="wrapper">
  38.     <form name="message-form" id="message-form" method="post" enctype="multipart/form-data">
  39.         <div class="input-group">
  40.             <span class="input-group-addon" style="background-color:darkorange;color:white;font-size:18px;border:none;border-radius:0;">
  41.             <label for="upload" style="margin-top:5px;font-size:20px;">
  42.                 <span class="fa fa-paperclip"></span>
  43.                 <input type="file" id="upload" name="upload" style="display:none;">
  44.             </label>
  45.             </span>
  46.             <textarea id="message" class="form-control" rows="3" maxlength="50000" style="resize:none;margin:0;height:50px;"></textarea>
  47.             <span class="input-group-addon btn btn-primary" id="send-button" style="background-color:darkorange!important;box-shadow:none!important;">Send</span>
  48.         </div>
  49.     </form>
  50. </div>
  52. <p class="input--error" style="visibility:hidden;">Error Uploading File</p>
  53. <script>
  54.     //var links = '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">' + '<link rel="stylesheet" href="css/chat.css">';
  55.     //$('head').append(links);
  57.     //Disable send and upload buttons until user is clicked
  58.     $('#message').prop('disabled', true);
  59.     $('#upload').prop('disabled', true);
  60.     $('#send-button').css('pointer-events', 'none');
  61.     var userLink = '';
  62.     document.title = 'Chat';
  64.     //Check messges and notifications every 1000 ms
  65.     setInterval(function () {
  66.         getMessages();
  67.     }, 1000); //<----- THE PROBLEM 
  68.     setInterval(function () {
  69.         checkNotifications();
  70.     }, 1000);
  72.     $(function() {
  73.         //Function that defines what happens when a file is chosen from file chooser
  74.         $('input:file').change(function () {
  75.             var file_data = $('#upload').prop('files')[0];
  76.             var form_data = new FormData();
  77.             form_data.append('upload', file_data);
  78.             $.ajax({
  79.                 url: 'includes/chat/upload.php?userLink='+userLink,
  80.                 type: 'post',
  81.                 data: form_data,
  82.                 contentType: false,
  83.                 cache: false,
  84.                 processData: false,
  85.                 success:function(data) {
  86.                     if(data === 'Error') {
  87.                         $('.input--error').css('visibility','visible');
  88.                         $('.input--error').delay(3000).hide(0);
  89.                     } else {
  90.                         $('#chat-area').append(data);
  91.                         var chatarea = $('#chat-area');
  92.                         var height = chatarea[0].scrollHeight;
  93.                         chatarea.scrollTop(height);
  94.                     }
  95.                 },
  96.                 error:function(data) {
  97.                     console.log(data);
  98.                 }
  99.             })
  100.         });
  101.     });
  103.     //Get messages to refresh chat window
  104.     function getMessages() {
  105.         if (userLink.length > 0) {
  106.             $.ajax({
  107.                 url: 'includes/chat/get_messages.php?userLink=' + userLink,
  108.                 type: 'post',
  109.                 dataType: 'html',
  110.                 success: function (data) {
  111.                     $('#chat-area').html(data);
  112.                 }
  113.             })
  114.         }
  115.     }
  117.     //If user's link is clicked, notification goes away and font changes to show which conversation you're on
  118.     $(document).on('click', '.link', function (event) {
  119.         event.preventDefault();
  121.         //Scroll to the bottom when a user's link is clicked to read messages
  122.         setTimeout(function() {
  123.             var chatarea = $('#chat-area');
  124.             var height = chatarea[0].scrollHeight;
  125.             chatarea.scrollTop(height);
  126.         }, 500);
  128.         $('#message').prop('disabled', false);
  129.         $('#upload').prop('disabled', false);
  130.         $('#send-button').css('pointer-events', 'auto');
  131.         userLink = $(this).attr('href');
  132.         var name = userLink.substring(0, userLink.indexOf('.'));
  133.         $('#message').attr('placeholder', 'Send message to ' + name);
  134.         $('#message').addClass('message-placeholder');
  135.         $('.message-placeholder').css('fontSize', 16);
  136.         $('#chat_title_h2').text(name);
  137.         $(this).parent().find('span').css('visibility', 'hidden');
  138.         $(this).css({
  139.             'font-weight': 'bold',
  140.             fontSize: 18
  141.         });
  142.         $('.link').each(function () {
  143.             if ($(this).attr('href') !== userLink) {
  144.                 $(this).css({
  145.                     'font-weight': 'normal',
  146.                     fontSize: 14
  147.                 })
  148.             }
  149.         });
  150.         //Ajax call to get messages. Populate chat window with returned data
  151.         $.ajax({
  152.             type: 'post',
  153.             url: 'includes/chat/show_conversation.php',
  154.             data: {
  155.                 link: $(this).attr('href'),
  156.             },
  157.             dataType: 'html',
  158.             success: function (data) {
  159.                 $('#chat-area').html(data);
  160.             }
  161.         })
  162.     });
  163.     //Button is not a 'button', but a span. Can't have a .submit() function here.
  164.     $('#send-button').on('click', function () {
  165.         var text = $('#message').val(); //Get what is in the textarea
  166.         var maxLength = $('#message').attr('maxlength');
  167.         console.log(text);
  168.         var length = text.length;
  169.         if (length <= maxLength + 1) { //Make sure it's not over the max length
  170.             sendChat();
  171.             $('#message').val('');
  172.         } else {
  173.             $('#message').val(text.substring(0, maxLength));
  174.         }
  175.     });
  177.     //Ajax call to send the textarea data to the server. If overflow-y is present, auto-scroll to bottom
  178.     function sendChat() {
  179.         var text = $('#message').val();
  180.         //Check to see if someone sent a link and format accordingly
  181.         if (validURL(text)) {
  182.             text = '<a target="_blank" href=' + text + '>' + text + '</a>';
  183.         }
  184.         $.ajax({
  185.             url: 'includes/chat/send_message.php',
  186.             type: 'post',
  187.             data: {message: text, link: userLink},
  188.             dataType: 'html',
  189.             success: function (data) {
  190.                 getMessages();
  191.                 $('#chat-area').append(data);
  193.                 var chatarea = $('#chat-area');
  194.                 var height = chatarea[0].scrollHeight;
  195.                 chatarea.scrollTop(height);
  196.             }
  197.         });
  198.     }
  199.     //Check for new messages. Changes CSS of notification span to visible if new message is present.
  200.     function checkNotifications() {
  201.         $.ajax({
  202.             url: 'includes/chat/check_notifications.php',
  203.             type: 'post',
  204.             dataType: 'json',
  205.             success: function (data) {
  206.                 $.each(data, function (i, item) {
  207.                     console.log(item);
  208.                     $('.link').each(function () {
  209.                         if ($(this).parent().find('span').data('name') === item) {
  210.                             $(this).parent().find('span').css('visibility', 'visible');
  211.                         }
  212.                     })
  213.                 })
  214.             }
  215.         })
  216.     }
  218.     //Check if the message is a url so <a> tags can be added to the text
  219.     function validURL(str) {
  220.         var pattern = new RegExp('^((news|(ht|f)tp(s?)):\\/\\/)' + // protocol
  221.             '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
  222.             '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
  223.             '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
  224.             '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
  225.             '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locater
  226.         if (!pattern.test(str)) {
  227.             console.log('Not a valid URL');
  228.             return false;
  229.         } else {
  230.             console.log('Valid URL');
  231.             return true;
  232.         }
  233.     }
  234. </script>
  235. </body>
  236. </html>

检查\u notifications.php

  1. <?php
  3. include '../DB.php';
  5. try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }
  7. session_start();
  9. //This script checks for unread messages and shows notifications accordingly.
  10. if(isset($_SESSION['logged_in'])) {
  11.     $username = $_SESSION['logged_in'];
  12.     $data = array();
  13.     foreach($results = $db->getRows('SELECT user1, user2read FROM pm WHERE user2=?',[$username]) as $result) {
  14.         $user2read = $result['user2read'];
  15.         $user1 = $result['user1'];
  16.         if($user2read === 'yes') {
  17.             continue;
  18.         }
  19.         $data[] = $result['user1'];
  20.     }
  21.     echo json_encode($data);
  23. }

获取\u messages.php

  1. <?php
  2. include '../DB.php';
  4. try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }
  6. session_start();
  7. if(isset($_SESSION['logged_in'])) {
  8.     $sender = $_SESSION['logged_in'];
  9.     $recipient = $_GET['userLink'];
  11.     foreach($results = $db->getRows('SELECT user1, user2, timestamp, message, user1read, user2read FROM pm WHERE (user1=? AND user2=?) OR (user1=? AND user2=?) ORDER BY id', [$sender, $recipient, $recipient, $sender]) as $result) {
  12.         $user1 = $result['user1'];
  13.         $user2 = $result['user2'];
  14.         $short_name_1 = substr($user1, 0, strpos($user1, '.'));
  15.         $message = $result['message'];
  16.         $time = $result['timestamp'];
  17.         $user1read = $result['user1read'];
  18.         $user2read = $result['user2read'];
  20.         echo '<p><strong>' . $short_name_1 . '</strong></p><p style="white-space:pre-wrap;padding: 2px 0;">' . $message . '</p><p style="padding: 2px 0; border-bottom: 1px solid #ccc;">' . $time . '</p>';
  21.     }
  23. }

显示\u conversation.php

  1. <?php
  3. include '../DB.php';
  5. try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }
  7. //This script shows the conversation when a user's link is clicked
  8. session_start();
  9. if($_SERVER['REQUEST_METHOD'] === 'POST') {
  10.     if(isset($_SESSION['logged_in'])) {
  11.         $username = $_SESSION['logged_in'];
  12.         $recipient = $_POST['link'];
  14.         foreach($results = $db->getRows('SELECT user1, user2, timestamp, message FROM pm WHERE (user1=? AND user2=?) OR (user1=? AND user2=?) ORDER BY id', [$username, $recipient, $recipient, $username]) as $result) {
  15.             $user1 = $result['user1'];
  16.             $user2 = $result['user2'];
  17.             $short_name_1 = substr($user1, 0, strpos($user1, '.'));
  18.             $message = $result['message'];
  19.             $time = $result['timestamp'];
  20.             echo '<p><strong>'.$short_name_1.'</strong></p><p style="white-space:pre-wrap;padding: 2px 0;">'.$message .'</p><p style="padding: 2px 0; border-bottom: 1px solid #ccc;">'.$time.'</p>';
  22.         }
  23.         $read_status_result = $db->updateRow('UPDATE pm SET user2read=? WHERE user2=?',['yes',$username]);
  24.     }
  25. }

发送消息.php

  1. <?php
  2. include '../DB.php';
  3. try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }
  5. session_start();
  7. if($_SERVER['REQUEST_METHOD'] === 'POST') {
  8.     if (isset($_SESSION['logged_in'])) {
  9.         $user = $_SESSION['logged_in'];
  10.         $message = $_POST['message'];
  11.         $recipient = $_POST['link'];
  12.         $timestamp = date('Y-m-d H:i:s');
  14.         $short_name_1 = substr($user, 0, strpos($user, '.'));
  15.         $short_name_2 = substr($recipient, 0, strpos($recipient, '.'));
  17.         $result = $db->insertRow('INSERT INTO pm (user1, user2, message, timestamp, user1read, user2read) VALUES (?,?,?,?,?,?)', [$user, $recipient, $message, $timestamp, 'yes', 'yes']);
  18.         echo '<p><strong>'.$short_name_1.'</strong></p><p style="white-space:pre-wrap;padding: 2px 0;">'.$message .'</p><p style="padding: 2px 0; border-bottom: 1px solid #ccc;">'.$timestamp.'</p>';
  19.         $set_read_status_result = $db->updateRow('UPDATE pm SET user1read=?, user2read=? WHERE user1=? AND user2=?',['yes', 'no', $user, $recipient]);
  20.     }
  21. }

还有另一个文件upload.php，但它并不相关（以防您看到查询字符串中的链接并想知道它去了哪里）。
最后，以下是我的pm和users表的模式：
pm架构

  1. mysql> describe pm;
  2. +-----------+-------------+------+-----+-------------------+-----------------------------+
  3. | Field     | Type        | Null | Key | Default           | Extra                       |
  4. +-----------+-------------+------+-----+-------------------+-----------------------------+
  5. | id        | int(11)     | NO   | PRI | NULL              | auto_increment              |
  6. | user1     | varchar(30) | NO   |     | NULL              |                             |
  7. | user2     | varchar(30) | NO   |     | NULL              |                             |
  8. | message   | text        | YES  |     | NULL              |                             |
  9. | timestamp | timestamp   | NO   |     | CURRENT_TIMESTAMP | on update CURRENT_TIMESTAMP |
  10. | user1read | varchar(3)  | YES  |     | NULL              |                             |
  11. | user2read | varchar(3)  | YES  |     | NULL              |                             |
  12. +-----------+-------------+------+-----+-------------------+-----------------------------+
  13. 7 rows in set (0.01 sec)

用户

  1. mysql> describe users;
  2. +----------+--------------+------+-----+---------+----------------+
  3. | Field    | Type         | Null | Key | Default | Extra          |
  4. +----------+--------------+------+-----+---------+----------------+
  5. | id       | int(6)       | NO   | PRI | NULL    | auto_increment |
  6. | username | varchar(255) | NO   |     | NULL    |                |
  7. | password | varchar(255) | NO   |     | NULL    |                |
  8. +----------+--------------+------+-----+---------+----------------+
  9. 3 rows in set (0.00 sec)

基本上，不必每秒钟检查一次消息，只要在发送消息时填充它就好了。这对这个项目没有坏处。这是一个更方便的因素，但我相信一些用户会想要这个功能。
如果有什么太模糊，或我没有评论的东西不够好，让我知道，我会编辑。

mysqlphpjqueryajaxchat

2条答案

按热度按时间
b5lpy0ml

b5lpy0ml1#

好吧，我不得不做一些代码杂耍，但我做到了我现在可以复制文本，如果需要的话，我只是禁用了选项上传一个gif，因为动画是可怕的设置间隔是每秒。在我找到一个更持久的解决方案之前，这是一个暂时的解决办法。
我为getmessages（）setinterval分配了一个变量，并编写了mouseup和mousedown函数：

  1. //Check messges and notifications every 1000 ms
  2. var get_messages = setInterval(function () { //<-- Made this a variable
  3.     getMessages();
  4. }, 1000);
  5. setInterval(function () {
  6.     checkNotifications();
  7. }, 1000);
  9. $(function () {
  10.     //Get the current mouse state to allow copying of text
  11.     $('#chat-area').on('mousedown mouseup', function mouseState(e) {
  12.         switch (e.type) {
  13.             case 'mousedown':
  14.                 clearInterval(get_messages); //<-- Stop getting messages temporarily
  15.                 clearInterval(get_messages_again); //<-- Had to do it again with another variable
  16.                 console.log('Mouse down');
  17.                 break;
  18.             case 'mouseup':
  19.                 console.log('Mouse up');
  20.                 setTimeout(function () { //<-- Give a few seconds to right click and Copy text, then go back to getting messages.
  21.                     get_messages_again = setInterval(function () {
  22.                         getMessages();
  23.                     }, 1000);
  24.                 },3000);
  25.                 break;
  26.         }
  27.     });

如果用户已经在与所选名称的对话中，那么通知也会消失。我只是在checknotifications（）函数中附加了一个if/else，如下所示：

  1. //Check for new messages. Changes CSS of notification span to visible if new message is present.
  2. function checkNotifications() {
  3.     $.ajax({
  4.         url: 'includes/chat/check_notifications.php',
  5.         type: 'post',
  6.         dataType: 'json',
  7.         success: function (data) {
  8.             $.each(data, function (i, item) {
  9.                 console.log(item);
  10.                 $('.link').each(function () {
  11.                     //Get the current font-weight. 
  12.                     //If it's above the norm, that means the user
  13.                     //is currently viewing messages and a notification
  14.                     //isn't needed.
  15.                     if($(this).css('font-weight') > 400) {
  16.                         $(this).parent().find('span').css('visibility', 'hidden');
  17.                     } else {
  18.                         //This code was already here. 
  19.                         //Just made it part of the else statement
  20.                         if ($(this).parent().find('span').data('name') === item) {
  21.                             $(this).parent().find('span').css('visibility', 'visible');
  22.                         }
  23.                     }
  24.                 })
  25.             })
  26.         }
  27.     })
  28. }
展开查看全部
赞(0）分享  回复(0）举报  2021-06-21
omhiaaxx

omhiaaxx2#

重新加载动画（selection/gif动画）的一个解决方案是只加载新的入口，而保留旧的入口。所以不会重写。只是附加。

赞(0）分享  回复(0）举报  2021-06-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com