jquery - 两个人通信无需刷新页面消息应该互相显示

Question

两个人之间的通信，无需刷新页面消息应该可以互相显示，但是下面的代码刷新后只显示对方消息，请帮助我

查看页面

<div id="chat_log"> 

                                    <?php foreach ($customer_to_supplier as $row) { ?> 
                                        <?php
                                        if ($row->From == 'customer') {
                                            ?>
                                            <div class="row msg_container base_sent active">
                                                <div class="col-md-1">

                                                    <?php if (empty($roww->buyer[0]) || empty($roww->buyer)) { ?>
                                                        <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->buyer; ?>" class="img-circle" width="30px" height="30px"/>

                                                    <?php } ?>

                                                </div>
                                                <div class="col-md-11 col-xs-11">
                                                    <div class="messages msg_sent">

                                                        <?php $timestamp1 = strtotime($row->msg_sent_time); ?>
                                                        <?php $mesgtimming = date(' D-h:i A', $timestamp1); ?>
                                                        <p>
                                                            <a href="#" data-toggle="tooltip" data-placement="right" title="<?php echo $mesgtimming; ?>"><?php echo $row->message; ?> </a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php } else { ?>
                                            <div class="row msg_container base_receive">

                                                <div class="col-md-12 col-xs-12">
                                                    <div class="messages msg_receive">

                                                        <?php $timestamp1 = strtotime($row->msg_sent_time); ?>
                                                        <?php $mesgtimming = date(' D-h:i A', $timestamp1); ?>
                                                        <p>
                                                            <a href="#" data-toggle="tooltip"  data-placement="left" title="<?php echo $mesgtimming; ?>"><?php echo $row->message; ?> </a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php
                                        }
                                    }
                                    ?>

                                </div>

 <form class="form-horizontal msg_fixed_bottom send_message_form" id="data_form"  method="POST" role="form" action="#"> 
                                <div class="panel-footer" id="myForm" >
                                    <div class="input-group submit_group">

                                        <input type ="hidden" name="suppid" id="suppid" value="<?php echo $row->supplier_id; ?>" class="form-control" />
                                        <input type ="hidden" name="proid" id="proid" value="<?php echo $row->product_id; ?>" class="form-control" />
                                        <input type ="hidden" name="custid" id="custid" value="<?php echo $row->Customer_id; ?>" class="form-control" />

                                        <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />


                                        <span class="input-group-btn">
                                            <button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
                                        </span>
                                    </div>
                                </div>
                            </form>

Controller

$id = $_GET['id'];
        $data['customer_to_supplier'] = $this->Profile_model->customer_to_supply($id);
        $this->load->view('messageview', $data);

型号

public function customer_to_supply($id) {

    $this->db->select('*');
    $this->db->from('communication');
    $this->db->join('supplier_otherdetails', 'supplier_otherdetails.supplierid_fk = communication.supplier_id');
    //$this->db->join('customer_otherdetails','communication.Customer_id=customer_otherdetails.customerid_fk');
    $this->db->join('customer_registration', 'communication.Customer_id=customer_registration.id');

    $array = array('communication.product_id' => $id, 'communication.supplier_id' => $this->session->id);
    $this->db->where($array);
    $this->db->order_by("msg_sent_time");
    $query = $this->db->get();
    $results = [];
    if ($query->num_rows() > 0) {

        $results = $query->result();
    }
    return $results;
}

脚本

 $(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/supplier_communication',
                        data: form_data,
                        success: function (data)
                        {
                            scrollDown();
                            var message = $("#messagee").val();

//                           $('#chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_sent"><p>' + message + '</p></div></div></div>');
                            $('#chat_log').append('<div class="row msg_container base_sent active"><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></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

在你的模型中customer_to_supply()使用以下代码更改功能

public function customer_to_supply($id, $time = null, $type = null) {
    $this->db->select('*');
    $this->db->from('communication');
    $this->db->join('supplier_otherdetails', 'supplier_otherdetails.supplierid_fk = communication.supplier_id');
    $this->db->join('customer_registration', 'communication.Customer_id=customer_registration.id');

    $array = array('communication.product_id' => $id, 'communication.supplier_id' => $this->session->id);
    $this->db->where($array);

    if($time != '')
        $this->db->where('unix_timestamp(msg_sent_time) >', $time, false );

    if($type != '')
        $this->db->where('From', $type );

    $this->db->order_by("msg_sent_time");
    $query = $this->db->get();
    $results = [];
    if ($query->num_rows() > 0) {

        $results = $query->result();
    }
    return $results;
}

并在您的脚本中添加以下代码

var last_time = $("#last-time").val();
getMessages = function() {
    var self = this;
    console.log(last_time);
    var url = '<?php echo base_url(); ?>index.php/Profile_cntrl/get_message/customer/<?=$_GET['id']?>/'+last_time;
    $.getJSON(url, function(data){
        console.debug(data);
        if(data.status) {
            last_time = data.next_time;
            $("#last-time").val(data.next_time);
            $('#chat_log').append(data.message);
            scrollDown(); 
        }

        setTimeout(function(){
            getMessages();
        }, 5000);
    });
}
getMessages();

在您的查看页面中。您必须进行一些更改，如下所示

1. 添加$msg_sent_time = '';在 foreach 之前
2. 添加$msg_sent_time = $row->msg_sent_time; foreach 打开后
3. 在 foreach 函数关闭后添加以下 html 代码

<input id="last-time" value="<?=strtotime($msg_sent_time);?>">