Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article) Show Trong hướng dẫn này, chúng ta sẽ tạo ra một ứng dụng chat đơn giản trên nền web với PHP và jQuery. Loại tiện ích này sẽ hoàn hảo cho một hệ thống hỗ trợ trực tiếp đối với trang web của bạn. Giới thiệuỨng dụng chat mà chúng ta sẽ xây dựng hôm nay là khá đơn giản. Nó sẽ bao gồm một hệ thống đăng nhập và đăng xuất, các tính năng theo phong cách AJAX, và cũng sẽ hỗ trợ đa người dùng. Bước 1: Markup HTMLChúng ta sẽ bắt đầu hướng dẫn này bằng cách tạo ra tập tin đầu tiên của chúng ta gọi index.php. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Chat - Customer Module</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <div id="wrapper"> <div id="menu"> <p class="welcome">Welcome, <b></b></p> <p class="logout"><a id="exit" href="#">Exit Chat</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> </body> </html>
Bước 2: Phong cách CSSBây giờ chúng ta sẽ thêm một số css để làm cho ứng dụng chat trông tốt hơn so với phong cách mặc định của trình duyệt. Đoạn code dưới đây sẽ được thêm vào tập tin style.css của chúng ta. /* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; } Không có gì đặc biệt về css ở trên ngoại trừ thực tế rằng một số id hoặc lớp mà chúng ta đã thiết lập một phong cách cho chúng, sẽ được thêm sau chốc lát nữa. Như bạn có thể thấy ở trên, chúng ta đã hoàn tất việc xây dựng giao diện người dùng của ứng dụng chat. Bước 3: Sử dụng PHP để tạo một Form Đăng nhập.Bây giờ chúng ta sẽ cài đặt một form đơn giản sẽ yêu cầu người dùng nhập tên của họ trước khi tiếp tục. <? session_start(); function loginForm(){ echo' <div id="loginform"> <form action="index.php" method="post"> <p>Please enter your name to continue:</p> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <input type="submit" name="enter" id="enter" value="Enter" /> </form> </div> '; } if(isset($_POST['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo '<span class="error">Please type in a name</span>'; } } ?> Hàm loginForm() mà chúng ta tạo ra được tạo thành từ một form đăng nhập đơn giản yêu cầu người dùng nhập tên của họ. Sau đó chúng ta sử dụng một câu lệnh if và else để xác nhận rằng người đó nhập vào một tên. Nếu người đó nhập vào một cái tên, chúng ta thiết lập tên là $ _SESSION[ 'name']. Vì chúng ta đang sử dụng một session dựa trên cookie để lưu trữ tên, nên chúng ta phải gọi session_start() trước khi bất cứ điều gì được xuất ra trên trình duyệt. Một điều mà bạn có thể cần chú ý kỹ, là chúng ta đã sử dụng hàm htmlspecialchars(), trong đó chuyển đổi ký tự đặc biệt cho các đối tượng HTML, để bảo vệ biến name khỏi trở thành nạn nhân của phương pháp tấn công Cross-site scripting (XSS). Sau đó, chúng ta cũng sẽ thêm hàm này vào biến text mà sẽ được đăng vào chatlog. Hiển thị Form Đăng nhậpĐể hiển thị form đăng nhập trong trường hợp người dùng chưa đăng nhập và do đó chưa tạo một session, chúng ta sử dụng câu lệnh if và else khác xung quanh div #wrapper và các thẻ script trong code ban đầu của chúng ta. Đối với trường hợp ngược lại, việc này sẽ ẩn form đăng nhập, và hiển thị hộp thoại nếu người dùng đã đăng nhập và đã tạo ra một session. <?php if(!isset($_SESSION['name'])){ loginForm(); } else{ ?> <div id="wrapper"> <div id="menu"> <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p> <p class="logout"><a id="exit" href="#">Exit Chat</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> <?php } ?> Menu Chào mừng và Đăng xuấtChúng ta vẫn chưa hoàn tất việc tạo hệ thống đăng nhập cho ứng dụng chat này. Chúng ta vẫn cần phải cho phép người dùng đăng xuất, và kết thúc session chat. Nếu bạn còn nhớ, markup HTML ban đầu của chúng ta bao gồm một menu đơn giản. Hãy quay trở lại và thêm một số code PHP sẽ cung cấp thêm chức năng cho menu. Trước hết, hãy thêm tên người dùng vào thông điệp chào mừng. Chúng ta làm điều này bằng cách xuất ra tên của người dùng ở trong session. <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p> Để cho phép người dùng đăng xuất và kết thúc session, chúng ta sẽ sử dụng một jQuery ngắn gọn. <script type="text/javascript"> // jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Are you sure you want to end the session?"); if(exit==true){window.location = 'index.php?logout=true';} }); }); </script> Code jquery ở trên đơn giản là hiển thị một cảnh báo xác nhận nếu người dùng nhấp vào liên kết #exit. Nếu người dùng xác nhận việc đăng xuất, từ đó kết thúc session, thì chúng ta chuyển hướng đến index.php?logout=true. Việc đơn giản này tạo ra một biến gọi là logout với giá trị true. Chúng ta cần phải catch biến này với PHP: if(isset($_GET['logout'])){ //Simple exit message $fp = fopen("log.html", 'a'); fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>"); fclose($fp); session_destroy(); header("Location: index.php"); //Redirect the user } Bây giờ chúng ta xem một biến "logout" có tồn tại hay không bằng cách sử dụng hàm isset(). Nếu biến đã được truyền vào một địa chỉ url, chẳng hạn như liên kết nêu trên, chúng ta tiến hành kết thúc session của tên người dùng đó. Trước khi hủy session tên của người dùng với hàm session_destroy(), chúng ta cần viết một thông điệp thoát đơn giản vào chat log. Nó sẽ nói rằng người dùng đã rời session chat. Chúng ta làm điều này bằng cách sử dụng hàm fopen(), fwrite(), và fclose() để thao tác trên tập tin log.html, như chúng ta sẽ thấy sau đây, sẽ được tạo ra như là chat log của chúng ta. Xin lưu ý rằng chúng ta đã thêm một lớp 'msgln' vào div. Chúng ta đã xác định phong cách css cho div này. Sau khi làm điều này, chúng ta huỷ session, và chuyển hướng người dùng đến cùng một trang nơi mà form đăng nhập sẽ xuất hiện. Bước 4: Xử lý InputSau khi một người dùng submit form, chúng ta cần lấy input của người đó và ghi nó vào chat log của chúng ta. Để làm điều này, chúng ta phải sử dụng jQuery và PHP để làm việc đồng bộ trên client và server. jQueryHầu như tất cả mọi thứ mà chúng ta sẽ làm với jQuery để xử lý dữ liệu, sẽ xoay quanh yêu cầu POST jQuery. //If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); return false; });
Xin lưu ý rằng code ở trên sẽ nằm trong thẻ script của chúng ta, nơi chúng ta đặt code logout bằng jQuery. PHP - post.phpTại thời điểm này dữ liệu POST đang được gửi đến tập tin post.php mỗi khi người dùng submit form, và gửi một thông báo mới. Mục tiêu của chúng ta bây giờ là lấy dữ liệu này, và ghhi nó vào chat log của chúng ta. <? session_start(); if(isset($_SESSION['name'])){ $text = $_POST['text']; $fp = fopen("log.html", 'a'); fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>"); fclose($fp); } ?>
Bước 5: Hiển thị Nội dung Chat Log (log.html)Tất cả những gì người dùng đã submit được xử lý và post bằng jQuery; nó được ghi vào chat log với PHP. Điều duy nhất còn lại để làm là hiển thị chat log được cập nhật đến người dùng. Để tiết kiệm thời gian, chúng ta sẽ tải trước chat log vào div #chatbox nếu có sẵn nội dung. <div id="chatbox"><?php if(file_exists("log.html") && filesize("log.html") > 0){ $handle = fopen("log.html", "r"); $contents = fread($handle, filesize("log.html")); fclose($handle); echo $contents; } ?></div> Chúng ta sử dụng một công việc tương tự như chúng ta đã sử dụng tập tin post.php, ngoại trừ lần này chúng ta chỉ đọc và xuất ra nội dung của tập tin. Yêu cầu jQuery.ajaxYêu cầu ajax là cốt lõi của tất cả mọi thứ mà chúng ta đang làm. Yêu cầu này không chỉ cho phép chúng ta gửi và nhận dữ liệu thông qua form mà không làm mới trang web, mà còn cho phép chúng ta xử lý dữ liệu được yêu cầu. /* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }0 Chúng ta đặt yêu cầu ajax bên trong một hàm Bạn sẽ thấy lý do trong một lát nữa. Như bạn thấy ở trên, chúng ta sẽ chỉ sử dụng ba đối tượng yêu cầu ajax của jQuery.
Như bạn thấy, chúng ta sau đó di chuyển dữ liệu mà chúng ta yêu cầu (html) vào div #chatbox. Tự động cuộnNhư bạn có thể nhìn thấy trong các ứng dụng chat khác, nội dung tự động cuộn xuống nếu container chat log (#chatbox) bị tràn. Chúng ta sẽ cài đặt một tính năng đơn giản và tương tự, mà sẽ so sánh chiều cao cuộn của container trước và sau khi chúng ta thực hiện yêu cầu ajax. Nếu chiều cao cuộn lớn sau khi yêu cầu, chúng ta sẽ sử dụng hiệu ứng động của jQuery để cộn div #chatbox. /* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }1
Liên tục Cập nhật Chat LogGiờ đây, nảy sinh thêm một câu hỏi, làm thế nào chúng ta liên tục cập nhật dữ liệu mới được gửi qua lại giữa những người dùng? Hoặc diễn đạt lại câu hỏi, làm thế nào chúng ta giữ cho việc gửi yêu cầu cập nhật dữ liệu một cách liên tục? /* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }2 Câu trả lời cho câu hỏi của chúng ta nằm trong hàm setInterval. Hàm này sẽ chạy hàm loadLog() của chúng ta mỗi 2,5 giây, và hàm loadLog sẽ yêu cầu tập tin được cập nhật và tự động cuộn thẻ div. Hoàn tấtChúng ta đã hoàn thành nó! Tôi hy vọng rằng bạn đã học được cách một hệ thống chat cơ bản hoạt động, và nếu bạn có bất kỳ đề xuất về bất cứ điều gì, tôi rất vui mừng được thấy chúng. Hệ thống chat này là một hệ thống đơn giản mà bạn có được với một ứng dụng chat. Bạn có thể nâng cao cái này và xây dựng một ứng dụng nhiều phòng chat, thêm một back-end quản lý, thêm các biểu tượng cảm xúc, vv. Không có giới hạn cho bạn. Dưới đây là một số liên kết mà bạn có thể muốn kiểm tra xem bạn có đang nghĩ đến việc mở rộng ứng dụng chat này hay không:
|