Question

我想要两个人之间的通信，比如facebook，用户A的消息到用户B而不刷新。并且应该在两个人之间显示消息。但是在我的代码消息中，仅在刷新后显示。请帮助任何人。

聊天窗口

<div class="row msg_container base_sent">
    <div class="col-md-1">
        <?php if (empty($roww->customer_image[0]) || empty($roww->supplier_image)) { ?>
            <img src="<?php echo base_url(); ?>images/default.jpg" class="img-circle" width="30px" height="30px"/>
        <?php } else { ?>
            <img src="<?php echo 'data:image;base64,' . $roww->supplier_image; ?>" class="img-circle" width="30px" height="30px"/>
        <?php } ?>
    </div>
    <div class="col-md-11 col-xs-11">
        <div class="messages msg_sent">

            <p>
                <!--In this p tag i want to set a set timeout function how to call in ajax success without page reload-->
                <a href="#" data-toggle="tooltip"  data-placement="right" title="12am"><?php echo $row->message; ?> </a>
            </p>
        </div>
    </div>
</div>

脚本

<script>
            $(document).ready(function () {

                $('#data_form').on('submit', function (e) {

                    var form_data = $(this).serialize();

                    $.ajax({
                        type: "POST",
                        url: '<?php echo base_url(); ?>index.php/Profile_cntrl/buyer_communication',
                        data: form_data,
                        success: function (data)
                        {
                            scrollDown();
                            var message = $("#messagee").val();


                            $('#chat_log').append('<div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div>');

                            $('#messagee').val('');


                        },
                        error: function ()
                        {
                            alert('failed');
                        }
                    });

                    e.preventDefault();
                });
                scrollDown();
                function scrollDown() {
                    $('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 200);
                }
            });
        </script>

Answer 1

实现这一目标有很多选择，但您可以尝试更轻松的选择。

在消息div上使用timed synchronous refresh。

它会在不刷新整个页面的情况下加载新消息，但会自动加载特定的div。

您只需要创建一个包含该div（消息容器）内部内容的页面，然后及时加载该容器。

 $(document).ready(function() {
   var refresh = function () {
     $(".msg_container").load("messages.php");  // link of page to return list of messages
   }

setInterval(refresh, 9000);
  refresh();
});

您还可以通过将未读邮件作为json获取并在邮件列表末尾添加内容来有效地进行操作。

如何实现像Facebook这样的聊天，用户A在没有页面刷新的情况下向用户B发送消息？

1 个答案: