php - 如何使用 PHP、jQuery/Ajax 在一对一聊天中获取对方用户的“打字...”信息

Question

我们使用 PHP 和 jQuery/AJAX 开发了聊天应用程序，我们可以在其中发送消息和媒体文件。它工作正常。唯一的问题是我们希望提供在其他/相反用户输入消息时显示“正在输入...”文本的功能。

我们可以使用我们当前的编程结构获取其他用户的“打字”信息吗？如果是，那么执行此操作的基本方案是什么？如果不是，那么我们是否需要更改编程语言以及哪些是最好的编程语言来实现这一点。

如果可用，请提供任何参考链接...谢谢。

下面是我们现在使用的基本聊天应用程序概念。

显示一对一聊天的 PHP 页面。

<?php
$int_cnt = 0;
$str_desc = "";
$str_desc = $str_pipe_seperated_chat_description;

if($str_desc != "")
{
    $str_diff_desc = array();
    $str_diff_desc = explode("||", $str_desc);

    foreach($str_diff_desc AS $str_msg)
    { 
        $str_msg_diff = array();
        $str_msg_diff = explode("|", $str_msg);
?>
<div class="row padding-10">
    <div class="col-md-2 col-xs-2 col-sm-2"></div>
    <div class="col-md-10 col-xs-10 col-sm-10" align="right">Message From Chat User 1</div>
</div>
<div class="row padding-10">

    <div class="col-md-10 col-xs-10 col-sm-10" align="right">Reply From Chat User 2</div>
    <div class="col-md-2 col-xs-2 col-sm-2"></div>    
</div>
<?php 
    }
} ?>

发送聊天消息的表格，包括附件。

<div class="row padding-10" >
    <div class="col-md-12">
        <form id="frm_chat" name="frm_chat" enctype="multipart/form-data">
            <div class="form-group"> 
                <textarea id="ta_desc" name="ta_desc" rows="2" cols="100" class="form-control" id="message" placeholder="Leave a message" tabindex="2"></textarea>
            </div>
            <div class="form-group">
                 <input type="file" id="file_large_image" name="file_large_image[]" multiple />
            </div>
            <div id="progress" class="progress" style="display:none;">
                <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
            </div>
            <div id="success"></div>
            <button type="submit" class="btn btn-block btn-warning" tabindex=""><i class="fa fa-paper-plane"></i>&nbsp;<b>Send Message</b></button>
        </form>
    </div>
</div>

.js 文件发送聊天消息，包括附件。

<script>
    // JavaScript Document
$(document).ready(function() {
    $('#frm_chat').on('submit', function(event) {
        event.preventDefault();

        var formData = new FormData();
        formData.append("ta_desc",$("textarea#ta_desc").val());
        var files = $("input[id=file_large_image]")[0].files;

        $.each($("input[id=file_large_image]"), function(i, obj) {
            $.each(obj.files,function(j, file){
                $('#progress').css('display', '');
                formData.append('file_large_image['+j+']', file);                                
            })
        }); 

        $.ajax({                
                type: 'POST',
                url: './webchat_p.php',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) 
                {
                    var $responseText=JSON.parse(data);

                    if($responseText.status == 'SUC') { /* Success message */ }
                    else if($responseText.status == 'ERR') { /* Error message */ }
                }                
           });
        });
    });
</script>

标签： phpjquerymysql