Ứng dụng Chat Ajax – Xử lý ajax và realtime

Chào tất cả các bạn đến với series hướng dẫn xây dựng ứng dụng Messenger đơn giản với PHP và Ajax. Ở bài trước ta đã xây dựng xong menu và giao diện trò chuyện. Hôm nay chúng ta sẽ bắt đầu viết chức năng gửi tin nhắn và thiết lập thời gian thực cho cuộc trò chuyện nhé !

test php

banquyen png

Bài viết này được đăng tại phpbbvietnam.com, không được copy dưới mọi hình thức.

1. Gửi tin nhắn

Chúng ta đã thiết kế thanh trò chuyện rồi giờ chỉ cần viết Ajax và PHP để xử lý dữ liệu nữa thôi 🙂

Viết Ajax

Các bạn mở file js/sendmsg.js lên và copy nội dung sau :

 

Bài viết này được đăng tại [phpbbvietnam.com]


// Hàm gửi tin nhắn
function sendMsg() {
    // Khai ba1oca1c biến trong form
    $body_msg = $('#formSendMsg input[type="text"]').val();

    // Gửi dữ liệu
    $.ajax({
        url: 'sendmsg.php', // đường dẫn file xử lý
        type: 'POST', // phương thức
        // dữ liệu
        data: {
            body_msg: $body_msg
                    // thực thi khi gửi dữ liệu thành công
        }, success: function () {
            $('#formSendMsg input[type="text"]').val(''); // làm trống thanh trò chuyện
        }
    });
}

// Bắt sự kiện gõ phím enter trong thanh trò chuyện
$('#formSendMsg input[type="text"]').keypress(function () {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        // Chạy hàm gửi tin nhắn
        sendMsg();
    }
});

// Bắt sự kiện click vào thanh trò chuyện
$('#formSendMsg input[type="text"]').click(function (e) {
    // Kéo hết thanh cuộn trình duyệt đến cuối
    window.scrollBy(0, $(document).height());
});

 

Trong đó mình đã giải thích rất kỹ nên mình sẽ không nói thêm nữa nhé !

Read More:   PHP Note Online - Thư viện xử lý database và session

Viết PHP để xử lý dữ liệu

Tiếp tục là đến phần nhận dữ liệu để xử lý, copy và paste nội dung sau vào file sendmsg.php.

 


<?php

// Kết nối database, lấy dữ liệu chung
include('includes/general.php');

// Khai báo các biến gán với dữ liệu nhận được
$body_msg = @mysqli_real_escape_string($cn, $_POST['body_msg']);
// Xử lý chuỗi $body_msg
$body_msg = htmlentities($body_msg);
$body_msg = trim($body_msg);

// Nếu $body_msg khác rỗng
if ($body_msg != '') {
    // Thực thi gửi tin nhắn
    $query_send_msg = mysqli_query($cn, "INSERT INTO messages VALUES (
				'',
				'$body_msg',
				'$user',
				'$date_current'
			)");
}
?>

 

OK, giờ bạn chạy thử rồi gửi thử tin nhắn xem nó có insert dữ liệu vào table messages không, nếu được là thành công rồi đấy 🙂

2. Thiết lập thời gian thực cho cuộc trò chuyện

Trước tiên thiếp lập thời gian thực cho cuộc trò chuyện, chúng ta phải dùng file msglog.php lấy dữ liệu từ table messages về, rồi dùng hàm setInterval() trong Javascript để thiết lập thời gian thực cho file này hiển thị trong div .main-chat.

Đầu tiên các bạn mở file msglog.php lên và dán đoạn code này vào :

 


<?php

// Kết nối database, lấy dữ liệu chung
include('includes/general.php');

// Lấy dữ liệu từ table messages theo thứ tự id_msg tăng dần
$query_get_msg = mysqli_query($cn, "SELECT * FROM messages ORDER BY id_msg ASC");
// Dùng vòng lập while để lấy dữ liệu
while ($row = mysqli_fetch_assoc($query_get_msg)) {
    // Thời gian gửi tin nhắn
    $date_sent = $row['date_sent'];
    $day_sent = substr($date_sent, 8, 2); // Ngày gửi
    $month_sent = substr($date_sent, 5, 2); // Thánh gửi
    $year_sent = substr($date_sent, 0, 4); // Năm gửi
    $hour_sent = substr($date_sent, 11, 2); // Giờ gửi
    $min_sent = substr($date_sent, 14, 2); // Phút gửi
    // Nếu người gửi là $user thì hiển thị khung tin nhắn màu xanh
    if ($row['user_from'] == $user) {
        echo '<div class="msg-user">
                        <p>' . $row['body'] . '</p>
                        <div class="info-msg-user">
                                Bạn - ' . $day_sent . "https://phpbbvietnam.com/" . $month_sent . "https://phpbbvietnam.com/" . $year_sent . ' lúc ' . $hour_sent . ':' . $min_sent . '
                        </div>
                </div>';
    }
    // Ngược lại người gửi không phải là $user thì hiển thị khung tin nhắn màu xám
    else {
        echo '  <div class="msg">
                        <p>' . $row['body'] . '</p>
                        <div class="info-msg">
                                ' . $row['user_from'] . ' - ' . $day_sent . "https://phpbbvietnam.com/" . $month_sent . "https://phpbbvietnam.com/" . $year_sent . ' lúc ' . $hour_sent . ':' . $min_sent . '
                        </div>
                </div>';
    }
}
?>

 

Read More:   Ứng dụng Chat Ajax - Xây dựng cấu trúc folder

Mình giải thích thêm về cách lấy thời gian gửi tin nhắn trong đoạn code trên. Khi mình insert múi giờ vào field có dạng datetime thì dữ liệu mình nhận được có dạng như trong hàm date() mà ta sử dụng ở file includes/general.php để lấy múi giờ chung. Vì thế chúng ta sẽ dùng lệnh substr() trong PHP để cắt chuỗi giờ này.

Ổn rồi, giờ chúng ta chỉ cần thiết lập thời gian thực trong cho file msglog.php trên div .main-chat. Mở file js/autoload.js lên rồi copy nội dung này vào :

 


$.ajaxSetup({cache:false});
// Thiết lập thời gian thực vòng lặp 1 giây
setInterval(function() {$('.main-chat').load('msglog.php');}, 1000);

 

Thế là xong, giờ các bạn chạy thử xem nó có hoạt động không nhé !

3. Lời kết 

Qua bài này chúng ta đã biết cách thiết lập thời gian thực với hàm setInterval() trong Javascript, lấy dữ liệu trong database và hiển thị chúng bằng vòng lặp while trong PHP. Bài hôm sau chúng ta sẽ bảo mật các file xử lý và kết thúc series này. Chúc các bạn thành công !

Danh sách file tải về

Bài viết này, The Learn PHP Tutorial Đã gửi đến bạn đọc kiến thức về “Ứng dụng Chat Ajax – Xử lý ajax và realtime❤️️”. Admin hy vọng qua phần nội dung trong bài”Ứng dụng Chat Ajax – Xử lý ajax và realtime” có thể giúp bạn đọc có thêm kiến thức về “Ứng dụng Chat Ajax – Xử lý ajax và realtime trong quá trình tự học PHP của mình .

Read More:   Hàm stripcslashes trong php

Bài viết “Ứng dụng Chat Ajax – Xử lý ajax và realtime” posted by on 2022-07-15 03:09:02. Cảm ơn bạn đọc đã xem bài viết tại Phpbbvietnam.com Và đừng quên chia sẻ bài viết này để nhiều người khác cũng có thể xem tài liệu học php miễn phí này nhé.

Back to top button