Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Ajax và Realtime

Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Ajax và Realtime là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Ajax và Realtime sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và PHP nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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 !


Hy vọng với bài viết về Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Ajax và Realtime đã giải đáp giúp bạn phần nào về kiến thức lập trình PHP. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!