ỨNG DỤNG NOTE
ỨNG DỤNG CHAT
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Ứ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 freetuts.net, 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 [free tuts .net]

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

Danh sách file tải về

Tên file tải về Pass giải nén
Ajax chat PHP phần 6 freetuts.net hoặc gameportable.net

Cùng chuyên mục:

Hàm key_exists() trong PHP

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP

Top