Bài 06: Ứng dụng Chat Ajax - Xử lý ajax và realtime

DOWNLOAD

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é !

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 :

// 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é !

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 . '/' . $month_sent . '/' . $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 . '/' . $month_sent . '/' . $year_sent . ' lúc ' . $hour_sent . ':' . $min_sent . '
                        </div>
                </div>';
    }
}
?>

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 !

Tài liệu chỉ mang tính chất tham khảo, mình không cam kết các nội dung trên website, vì vậy không được sử dụng để in ấn hay kinh doanh.
Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website vi phạm nội dung bản quyền mà mình đã đưa ra.

Nguồn: freetuts.net

Profile photo of adminLeChiHuy

LeChiHuy

Sinh năm 2001, thích lập trình, ham học hỏi. Bắt đầu tham gia vào Freetuts giữa năm 2016, mong được sự ủng hộ của các bạn !

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.