لابد هایپر ترمینال ِ ویندوز یادتان هست، که با آن می‌شد به یک کامپیوتر دیگر از راه دور وصل شد و ارتباط برقرار کرد و اطلاعاتی را رد و بدل. به نوعی می‌شد به‌کمک آن چت هم کرد. یک کادر متن بزرگ که هم‌زمان با تایپ کردن ما، شخص مقابل هم نوشتن واژه‌ها توسط ما را می‌دید و برعکس.

من دقیقاً با همین قسمت آخر ماجرا کار دارم. این که یک صفحه‌ای داشته باشم و از طریق آن با یک یا چند نفر دیگر به‌صورت زنده گفت‌وگو کنم و ضمناً تایپ‌کردن من را ببینند و من هم تایپ‌کردن آن‌ها را. آماده‌اید؟

مواد لازم پی اچ پی هست و مای اس کیو ال و کتاب‌خانه‌ی جی کوئری.

ابتدا یک صفحه با نام index.php می‌سازم، کتاب‌خانه‌ی جی‌کوئری را واردش می‌کنم و یک فرم هم که حاوی یک کادرمتن هست در آن قرار می‌دهم:

<form action="" id="htForm">
     <textarea name="chatbox" class="chatbox" id="chatbox"></textarea>
</form>

دیتابیس

در ادامه یک دیتابیس باید بسازم برای ذخیره‌کردن متن گفت‌وگو. دستورات زیر را اس‌کیوال می‌کنم تا جدول و فیلد‌های موردنیازم ایجاد شوند:

CREATE TABLE IF NOT EXISTS `tbl_chat` (
`id` int(11) NOT NULL auto_increment,
`chat` LONGTEXT CHARACTER SET utf8  NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=1 ;

INSERT INTO `tbl_chat` (`chat`) VALUES ('type here...');

پی‌اچ‌پی

حالا یک فایل با نام config.php می‌سازم و با آن به دیتابیسی که ساختم، وصل می‌شوم:

<?php
// Mysql Config; enter your host name, database name, database username and password.
define('DB_HOST', 'localhost');
define('DB_NAME', 'database_name');
define('DB_USER', 'database_username');
define('DB_PASSWORD', 'database_password');

// Connecting to database...
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die('Database Error!');
@mysql_select_db(DB_NAME,$connection);
?>

یک فایل دیگر می‌سازم برای ارسال متن به دیتابیس. نام این فایل send.php هست:

<?php
@include('config.php');

$chat = $_POST['chatbox'];
$query = "UPDATE tbl_chat SET chat = '$chat' WHERE id = 1";
$do = @mysql_query($query);
?>

و فایلی دیگر با نام recive.php برای گرفتن متن از دیتابیس:

<?php
@include('config.php');

$query = "SELECT * FROM tbl_chat WHERE id = 1";
$do = @mysql_query($query);
$row = @mysql_fetch_array($do);
echo ($row[chat]);
?>

جی‌کوئری

حالا دیگر کارم با پی‌اچ‌پی تمام شده است؛ می‌روم سراغ جی‌کوئری.

با توابع load() و ajax() قبلاً کارهایی کرده‌ایم (این‌جا و این‌جا). این‌بار هم به این دو تابع پرکاربرد نیاز داریم و اصل کارمان را همین دو تابع انجام می‌دهند.

ابتدا باید متنی که در کادر متن نوشته می‌شود را با تابع ajax() بفرستم برای فایل send.php و این فایل هم متن را می‌گیرد و می‌فرستد به دیتابیس. و البته باید به‌خاطر داشته باشید که می‌خواهم هم‌زمان که در حال تایپ‌کردن هستم، شخص مقابل تایپ‌کردن ِ من را مشاهده کند. پس باید تابع ajax() را در یک رویدادی مثل keyup() قرار بدهم تا با هربار فشردن و رهاکردن یک دکمه‌ی کی‌برد، متن‌ها به دیتابیس ارسال شوند. به‌این‌صورت هر حرف جدیدی که تایپ می‌کنم، ذخیره می‌شود و به این ترتیب، تایپ کردن ِ من به‌صورت زنده مشاهده می‌شود.

$(document).ready(function() {
     $('#chatbox').keyup(function () {

     var chatbox = $('#chatbox');
     var data = 'chatbox=' + chatbox.val();

     $.ajax({
          url: 'send.php',
          type: 'POST',
          data: data,
          cache: false,
          success: function(){}
     });
     return false;
     });
});

تا به اینجای کار، فقط متن گفت‌وگو ذخیره می‌شود و هنوز چیزی از دیتابیس لود نشده است تا شخص مقابل مشاهده نماید. همان‌طور که پیش‌تر هم اشاره کردم، از تابع load() برای لود کردن متن از دیتابیس استفاده می‌کنم و خب باید متن گفت‌وگو درهمان کادرمتن لود شود، پس به این صورت عمل می‌کنم:

$(document).ready(function() {
	$('#chatbox').load('receive.php');
});

فایل recive.php را به تابع لود دادم و از این طریق متن گفت‌وگو لود شده و در کادرمتن #chatbox نمایش داده می‌شود.

اما مسئله این است که به این شکل فقط یک‌بار متن‌ها از دیتابیس لود می‌شوند و متن‌های جدید دیگر مشاهده نخواهند شد. راه حل ساده‌ست، من تابع لود را می‌سپارم به دست یک حلقه تا دائماً اجرا شود و متن‌های جدیدتر نیز لود و دیده شوند. بازه‌ی زمانی حلقه را روی ۱۰۰ میلی‌ثانیه می‌گذارم تا هر تغییر کوچکی که در متن‌های گفت‌وگو ایجاد شود خیلی سریع به شخص مقابل نمایش داده شود:

$(function(){
var timer = setInterval(receive_chat, 100);
});
function receive_chat() {
 $(document).ready(function() {
	$('#chatbox').load('receive.php');
 });
}

کار دیگر تمام است و می‌توانم نتیجه را در صفحه‌ی index.php ببینم.

مشکلی که وجود دارد این است که در چنین روش‌هایی با سرور ریکوئست بالایی روبه‌رو هستیم. این یعنی برای اجرا در پروژه‌های بزرگ، به سرورهای قوی نیاز داریم. تصور کنید که در هر ۱۰۰ میلی‌ثانیه یک ریکوئست فرستاده می‌شود و فایل recive.php اجرا می‌شود. جدا از این، با هربار فشردن یک دکمه از کی‌برد، باز یک ریکوئست ارسال می‌شود و فایل send.php اجرا می‌شود.

منابع:
jQuery ajax()
jQuery load()

به دلیل برخی محدودیت‌ها نمی‌توانم نسخه‌ی دمو از این نمونه قرار بدهم اما می‌توانید آن را همین پایین کامل دریافت کنید: