php - 由于重复 Ajax 调用，无法正确复制文本

Question

我有一个简单的聊天 Web 应用程序，一切正常。然而，存在两个问题:1) 当我尝试复制文本时，重复的 Ajax 调用会导致选择所有文本，并且如果 GIF 长于间隔，则它们会循环运行。2) 新消息的通知有效，但为了看到新消息，您必须单击发件人，即使您当前正在与他们交谈。

这就是当我尝试复制一条消息时发生的情况:

我无法弄清楚如何在不单击用户链接的情况下显示新消息。

这是主页，chat.php:

<?php

//error_reporting(E_ERROR);
//ini_set('display_errors', 1);

include 'includes/header.php';
include 'includes/DB.php';

try {
    $db = new DB();
} catch (Exception $e) {
}

$username = $_SESSION['logged_in'];
$short_name = substr($username, 0, strpos($username, '.'));
?>
<div id="page-wrap">
    <h2 id="chat_title_h2">IT Chat</h2>
    <p id="name-area">Hello, <?= $short_name ?></p>
    <div id="chat-wrap">
        <div id="user-list">
            <p style="color:white;font: bold 12px 'Lucida Grande', Sans-Serif;margin-top:10px; margin-left:10px;">
                Conversations</p>
            <?php
            //Populate the user list
            foreach ($users_result = $db->getRows('SELECT * FROM users ORDER BY username', ['']) as $user) {
                $username = $user['username'];
                $short_list_name = substr($username, 0, strpos($username, '.'));
                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>';
            }
            ?>
        </div>
        <div id="chat-area"></div>
    </div>
</div>

<div id="wrapper">
    <form name="message-form" id="message-form" method="post" enctype="multipart/form-data">
        <div class="input-group">
            <span class="input-group-addon" style="background-color:darkorange;color:white;font-size:18px;border:none;border-radius:0;">
            <label for="upload" style="margin-top:5px;font-size:20px;">
                <span class="fa fa-paperclip"></span>
                <input type="file" id="upload" name="upload" style="display:none;">
            </label>
            </span>
            <textarea id="message" class="form-control" rows="3" maxlength="50000" style="resize:none;margin:0;height:50px;"></textarea>
            <span class="input-group-addon btn btn-primary" id="send-button" style="background-color:darkorange!important;box-shadow:none!important;">Send</span>
        </div>
    </form>
</div>

<p class="input--error" style="visibility:hidden;">Error Uploading File</p>
<script>
    //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">';
    //$('head').append(links);

    //Disable send and upload buttons until user is clicked
    $('#message').prop('disabled', true);
    $('#upload').prop('disabled', true);
    $('#send-button').css('pointer-events', 'none');
    var userLink = '';
    document.title = 'Chat';

    //Check messges and notifications every 1000 ms
    setInterval(function () {
        getMessages();
    }, 1000); //<----- THE PROBLEM 
    setInterval(function () {
        checkNotifications();
    }, 1000);

    $(function() {
        //Function that defines what happens when a file is chosen from file chooser
        $('input:file').change(function () {
            var file_data = $('#upload').prop('files')[0];
            var form_data = new FormData();
            form_data.append('upload', file_data);
            $.ajax({
                url: 'includes/chat/upload.php?userLink='+userLink,
                type: 'post',
                data: form_data,
                contentType: false,
                cache: false,
                processData: false,
                success:function(data) {
                    if(data === 'Error') {
                        $('.input--error').css('visibility','visible');
                        $('.input--error').delay(3000).hide(0);
                    } else {
                        $('#chat-area').append(data);
                        var chatarea = $('#chat-area');
                        var height = chatarea[0].scrollHeight;
                        chatarea.scrollTop(height);
                    }
                },
                error:function(data) {
                    console.log(data);
                }
            })
        });
    });

    //Get messages to refresh chat window
    function getMessages() {
        if (userLink.length > 0) {
            $.ajax({
                url: 'includes/chat/get_messages.php?userLink=' + userLink,
                type: 'post',
                dataType: 'html',
                success: function (data) {
                    $('#chat-area').html(data);
                }
            })
        }
    }

    //If user's link is clicked, notification goes away and font changes to show which conversation you're on
    $(document).on('click', '.link', function (event) {
        event.preventDefault();

        //Scroll to the bottom when a user's link is clicked to read messages
        setTimeout(function() {
            var chatarea = $('#chat-area');
            var height = chatarea[0].scrollHeight;
            chatarea.scrollTop(height);
        }, 500);

        $('#message').prop('disabled', false);
        $('#upload').prop('disabled', false);
        $('#send-button').css('pointer-events', 'auto');
        userLink = $(this).attr('href');
        var name = userLink.substring(0, userLink.indexOf('.'));
        $('#message').attr('placeholder', 'Send message to ' + name);
        $('#message').addClass('message-placeholder');
        $('.message-placeholder').css('fontSize', 16);
        $('#chat_title_h2').text(name);
        $(this).parent().find('span').css('visibility', 'hidden');
        $(this).css({
            'font-weight': 'bold',
            fontSize: 18
        });
        $('.link').each(function () {
            if ($(this).attr('href') !== userLink) {
                $(this).css({
                    'font-weight': 'normal',
                    fontSize: 14
                })
            }
        });
        //Ajax call to get messages. Populate chat window with returned data
        $.ajax({
            type: 'post',
            url: 'includes/chat/show_conversation.php',
            data: {
                link: $(this).attr('href'),
            },
            dataType: 'html',
            success: function (data) {
                $('#chat-area').html(data);
            }
        })
    });
    //Button is not a 'button', but a span. Can't have a .submit() function here.
    $('#send-button').on('click', function () {
        var text = $('#message').val(); //Get what is in the textarea
        var maxLength = $('#message').attr('maxlength');
        console.log(text);
        var length = text.length;
        if (length <= maxLength + 1) { //Make sure it's not over the max length
            sendChat();
            $('#message').val('');
        } else {
            $('#message').val(text.substring(0, maxLength));
        }
    });

    //Ajax call to send the textarea data to the server. If overflow-y is present, auto-scroll to bottom
    function sendChat() {
        var text = $('#message').val();
        //Check to see if someone sent a link and format accordingly
        if (validURL(text)) {
            text = '<a target="_blank" href=' + text + '>' + text + '</a>';
        }
        $.ajax({
            url: 'includes/chat/send_message.php',
            type: 'post',
            data: {message: text, link: userLink},
            dataType: 'html',
            success: function (data) {
                getMessages();
                $('#chat-area').append(data);

                var chatarea = $('#chat-area');
                var height = chatarea[0].scrollHeight;
                chatarea.scrollTop(height);
            }
        });
    }
    //Check for new messages. Changes CSS of notification span to visible if new message is present.
    function checkNotifications() {
        $.ajax({
            url: 'includes/chat/check_notifications.php',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                $.each(data, function (i, item) {
                    console.log(item);
                    $('.link').each(function () {
                        if ($(this).parent().find('span').data('name') === item) {
                            $(this).parent().find('span').css('visibility', 'visible');
                        }
                    })
                })
            }
        })
    }

    //Check if the message is a url so <a> tags can be added to the text
    function validURL(str) {
        var pattern = new RegExp('^((news|(ht|f)tp(s?)):\\/\\/)' + // protocol
            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
            '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
            '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
            '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locater
        if (!pattern.test(str)) {
            console.log('Not a valid URL');
            return false;
        } else {
            console.log('Valid URL');
            return true;
        }
    }
</script>
</body>
</html>

check_notifications.php

<?php

include '../DB.php';

try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }

session_start();

//This script checks for unread messages and shows notifications accordingly.
if(isset($_SESSION['logged_in'])) {
    $username = $_SESSION['logged_in'];
    $data = array();
    foreach($results = $db->getRows('SELECT user1, user2read FROM pm WHERE user2=?',[$username]) as $result) {
        $user2read = $result['user2read'];
        $user1 = $result['user1'];
        if($user2read === 'yes') {
            continue;
        }
        $data[] = $result['user1'];
    }
    echo json_encode($data);

}

get_messages.php

<?php
include '../DB.php';

try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }

session_start();
if(isset($_SESSION['logged_in'])) {
    $sender = $_SESSION['logged_in'];
    $recipient = $_GET['userLink'];

    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) {
        $user1 = $result['user1'];
        $user2 = $result['user2'];
        $short_name_1 = substr($user1, 0, strpos($user1, '.'));
        $message = $result['message'];
        $time = $result['timestamp'];
        $user1read = $result['user1read'];
        $user2read = $result['user2read'];

        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>';
    }

}

show_conversation.php

<?php

include '../DB.php';

try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }

//This script shows the conversation when a user's link is clicked
session_start();
if($_SERVER['REQUEST_METHOD'] === 'POST') {
    if(isset($_SESSION['logged_in'])) {
        $username = $_SESSION['logged_in'];
        $recipient = $_POST['link'];

        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) {
            $user1 = $result['user1'];
            $user2 = $result['user2'];
            $short_name_1 = substr($user1, 0, strpos($user1, '.'));
            $message = $result['message'];
            $time = $result['timestamp'];
            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>';

        }
        $read_status_result = $db->updateRow('UPDATE pm SET user2read=? WHERE user2=?',['yes',$username]);
    }
}

send_message.php

<?php
include '../DB.php';
try { $db = new DB(); } catch (Exception $e) { $e->getMessage(); }

session_start();

if($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_SESSION['logged_in'])) {
        $user = $_SESSION['logged_in'];
        $message = $_POST['message'];
        $recipient = $_POST['link'];
        $timestamp = date('Y-m-d H:i:s');

        $short_name_1 = substr($user, 0, strpos($user, '.'));
        $short_name_2 = substr($recipient, 0, strpos($recipient, '.'));

        $result = $db->insertRow('INSERT INTO pm (user1, user2, message, timestamp, user1read, user2read) VALUES (?,?,?,?,?,?)', [$user, $recipient, $message, $timestamp, 'yes', 'yes']);
        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>';
        $set_read_status_result = $db->updateRow('UPDATE pm SET user1read=?, user2read=? WHERE user1=? AND user2=?',['yes', 'no', $user, $recipient]);
    }
}

还有另一个文件 upload.php，但它不相关(如果您在查询字符串中看到该链接并想知道它去了哪里)。

最后，这是我的 pm 和 users 表的架构:

下午模式

mysql> describe pm;
+-----------+-------------+------+-----+-------------------+-----------------------------+
| Field     | Type        | Null | Key | Default           | Extra                       |
+-----------+-------------+------+-----+-------------------+-----------------------------+
| id        | int(11)     | NO   | PRI | NULL              | auto_increment              |
| user1     | varchar(30) | NO   |     | NULL              |                             |
| user2     | varchar(30) | NO   |     | NULL              |                             |
| message   | text        | YES  |     | NULL              |                             |
| timestamp | timestamp   | NO   |     | CURRENT_TIMESTAMP | on update CURRENT_TIMESTAMP |
| user1read | varchar(3)  | YES  |     | NULL              |                             |
| user2read | varchar(3)  | YES  |     | NULL              |                             |
+-----------+-------------+------+-----+-------------------+-----------------------------+
7 rows in set (0.01 sec)

用户

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

基本上，如果不必每秒检查消息并在发送消息时填充它，那就太好了。这对这个项目没有坏处。这更多的是一个便利因素，但我确信一些用户会想要这个功能。

如果有任何内容太模糊，或者我对某些内容的评论不够好，请告诉我，我会进行编辑。

Answer 1

重新加载动画(选择/gif动画)的解决方案是仅加载新条目并保留旧条目。所以不会进行重写。只是追加。