Ứng dụng Chat Ajax - Xử lý ajax và realtime - Ứng dụng Note và Chat với PHP
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 ...
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 !