ایجاد تالار گفت و گو (چت روم) با استفاده از PHP و jQuery
تالار گفت و گو(چت روم) با PHP و jQuery

ایجاد تالار گفت و گو (چت روم) با استفاده از PHP و jQuery

امروز در این آموزش قصد داریم تا به شما نحوه ایجاد یک تالار گفت و گوی ساده رو آموزش بدهیم که میتوانید از آن در وبسایت خود برای تعامل بین کاربرانتان استفاده نمایید.البته با کمی تغییر در ساختار آن میتوانید از آن به عنوان نمایش دهنده نظرات کاربرانتان نیز استفاده نمایید.

برای مشاهده لینک وارد شود

شما برای اجرای این برنامه فقط کافی است که از طریق دکمه “دریافت فایل” آن را دانلود کرده و آن را در هاست خود بارگذاری کرده و از طریق وارد کردن آدرس به آن دسترسی پیدا کنید.خوب حالا به توضیح کدها می پردازیم

ابتدا کار را با کدهای HTML یا به عبارتی فایل index.html شروع می کنیم.این فایل که توسط HTML5 نوشته شده است ،حاوی کتابخانه های جاوااسکریپت،اسکریپت و استایل های ما میباشد.در زیر بخش مربوط به تالار گفت و گو را مشاهده می کنید.

index.html

<div class="shoutbox">
            
            <h1>(تالار گفت و گو(چت روم <img src='./assets/img/refresh.png'/></h1>
            
            <ul class="shoutbox-content"></ul>
            
            <div class="shoutbox-form">
                <h2>نوشتن پیام <span>×</span></h2>
                
                <form action="./publish.php" method="post">
                    <label for="shoutbox-name">(نام (مستعار </label> <input type="text" id="shoutbox-name" name="name"/>
                    <label class="shoutbox-comment-label" for="shoutbox-comment">پیام </label> <textarea id="shoutbox-      comment" name="comment" maxlength='240'></textarea>
                    <input type="submit" value="!بفرست"/>
                </form>
            </div>

ما با استفاده از جاوااسکریپت پیام های ارسال شده را در داخل عنصر <ul> قرار می دهیم.محل نوشتن پیام تا قبل از اینکه روی “نوشتن پیام” کلیک نکرده ایم به صورت مخفی قرار دارد و نمایش داده نمیشود.

ایجاد تالار گفت و گو (چت روم) با استفاده از PHP و jQuery
ایجاد تالار گفت و گو (چت روم) با استفاده از PHP و jQuery

حالا به سراغ کدهای جاوااسکریپت می رویم که باعث میشوند تا کدهای HTML ما کار بکنند.

assets/js/script.js

$(function(){

	//ذخیره سازی برخی از عناصر در متغیر برای پاکسازی کدبیس

    var refreshButton = $('h1 img'),
        shoutboxForm = $('.shoutbox-form'),
        form = shoutboxForm.find('form'),
        closeForm = shoutboxForm.find('h2 span'),
        nameElement = form.find('#shoutbox-name'),
        commentElement = form.find('#shoutbox-comment'),
        ul = $('ul.shoutbox-content');


    // Replace :) with emoji icons:
    emojione.ascii = true;

    // نمایش پیام ها
    load();
    
    // ذخیره پیام ها در دیتابیس در صورت تکمیل تمام فیلدها فرم 
    
    var canPostComment = true;

    form.submit(function(e){
        e.preventDefault();

        if(!canPostComment) return;
        
        var name = nameElement.val().trim();
        var comment = commentElement.val().trim();

        if(name.length && comment.length && comment.length < 240) {
        
            publish(name, comment);

			//جلوگیری از انتشار پیام ها

            canPostComment = false;

            // اجازه ارسال پیام جدید بعد از ۵ ثانیه

            setTimeout(function(){
                canPostComment = true;
            }, ۵۰۰۰);

        }

    });
    
    // تغییر وضعیت نمایش فرم
    
    shoutboxForm.on('click', 'h2', function(e){
        
        if(form.is(':visible')) {
            formClose();
        }
        else {
            formOpen();
        }
        
    });
    
    // با زدن دکمه پاسخ ،محل نوشتن  برای شما در پایین صفحه باز میشود.
    
    ul.on('click', '.shoutbox-comment-reply', function(e){
        
        var replyName = $(this).data('name');
        
        formOpen();
        commentElement.val('به '+replyName+' : '+' ').focus();

    });
    
	//با کلیک کردن دکمه بارگذاری مجدد تابع  لود به اجبار اجرا میشود
    
    var canReload = true;

    refreshButton.click(function(){

        if(!canReload) return false;
        
        load();
        canReload = false;

        // اجازه بارگذاری های اضافی بعد از ۲ ثانیه
        setTimeout(function(){
            canReload = true;
        }, ۲۰۰۰);
    });

    // بارگذاری اتوماتییک پیام ها  هر ۲۰ ثانیه
    setInterval(load,20000);


    function formOpen(){
        
        if(form.is(':visible')) return;

        form.slideDown();
        closeForm.fadeIn();
    }

    function formClose(){

        if(!form.is(':visible')) return;

        form.slideUp();
        closeForm.fadeOut();
    }

    // ذخیره کردن پیام ها در دیتابیس
    
    function publish(name,comment){
    
        $.post('publish.php', {name: name, comment: comment}, function(){
            nameElement.val("");
            commentElement.val("");
            load();
        });

    }
    
    // نمایش آخرین پیامهای ارسال شده
    
    function load(){
        $.getJSON('./load.php', function(data) {
            appendComments(data);
        });
    }
    
    // بارگذاری آرایه ای از پیام ها بصورت اچ تی ام ال
    
    function appendComments(data) {

        ul.empty();

        data.forEach(function(d){
            ul.append('<li>'+
                '<span class="shoutbox-username">' + d.name +':'+ '</span>'+
                '<p class="shoutbox-comment">' + emojione.toImage(d.text) + '</p>'+
                '<div class="shoutbox-comment-details"><span class="shoutbox-comment-reply" data-name="' + d.name + '">پاسخ</span>'+
                '<span class="shoutbox-comment-ago">' + d.timeAgo + '</span></div>'+
            '</li>');
        });

    }

});

emoji کتابخانه مشترک برای جاوااسکریپت و PHP است.در متد appendComments،ما از تابع  ()emojione.toImage برای تبدیل تمام شکلک ها به emoji استفاده کردیم.تمام تایع هایی را که پشتیبانی میکند میتوانید از اینجا مشاهده فرمایید، همچنین از خود وبسایت emoji.حالا به سراغ بخش اصلی آموزش یعنی کدهای PHP    می رویم.

ما دو کدPHP داریم، publish.php و load.php:اولی درخواست های ذخیره پیام ها را دریافت می کند و دومی آخرین ۲۰ پیام ارسال شده را نمایش می دهد.توجه کنید که این فایل ها توسط کاربان قابل مشاهده نیستند و فقط درخواست های AJAX را به اجرا در می آورند.

publish.php

<?php

require 'vendor/autoload.php';

//پیکربندی ذخیره اطلاعات و داده ها

$dir = __DIR__.'/data';

$config = new \JamesMoss\Flywheel\Config($dir, array(
    'formatter' => new \JamesMoss\Flywheel\Formatter\JSON,
));

$repo = new \JamesMoss\Flywheel\Repository('shouts', $config);
    
//ذخیره تاریخ پیام ها در پایگاه داده

if(isset($_POST["name"]) && isset($_POST["comment"])) {
    
    $name = htmlspecialchars($_POST["name"]);
    $name = str_replace(array("\n", "\r"), '', $name);

    $comment = htmlspecialchars($_POST["comment"]);
    $comment = str_replace(array("\n", "\r"), '', $comment);
    
    // ذخیره پیام جدید

    $shout = new \JamesMoss\Flywheel\Document(array(
        'text' => $comment,
        'name' => $name,
        'createdAt' => time()
    ));
    
    $repo->store($shout);
    
}

ما در اینجا به طور مستقیم از کتابخانه Flywheel(برای توضیحات بیشتر کلیک کنید) استفاده کردیم.در ابتدا پیکربندی را انجام دادیم تا شما هر نوع داده را بتوانید بصورت فایل JSON در پوشه data/shouts ذخیره نمایید.خواندن این فایل در داخل load.php انجام میپذیرد.

load.php

<?php

require 'vendor/autoload.php';

//اگر شما میخواهید پیام های قدیمی را پاک کنید مقدار آن را عوض کنید.
//$deleteOldComments = true;پیامهای بیشتر از ۱ ساعت پاک شوند
$deleteOldComments = false;پیام های بیشتر از ۱ ساعت پاک نشوند

//تنظیمات مربوط به ذخیره داده ها

$dir = __DIR__.'/data';

$config = new \JamesMoss\Flywheel\Config($dir, array(
    'formatter' => new \JamesMoss\Flywheel\Formatter\JSON,
));

$repo = new \JamesMoss\Flywheel\Repository('shouts', $config);

//trueپاک کردن پیام های ارسالی بیش از ۱ ساعت در صورت تغییر متغییر به 

if($deleteOldComments) {
    
    $oldShouts = $repo->query()
                ->where('createdAt', '<', strtotime('-1 hour'))
                ->execute();

    foreach($oldShouts as $old) {
        $repo->delete($old->id);
    }
    
}

//jsonارسال ۲۰ پیام آخری بصورت 

$shouts = $repo->query()
        ->orderBy('createdAt ASC')
        ->limit(20,0)
        ->execute();

$results = array();

$config = array(
    'language' => '\RelativeTime\Languages\English',
    'separator' => ', ',
    'suffix' => true,
    'truncate' => 1,
);

$relativeTime = new \RelativeTime\RelativeTime($config);
        
foreach($shouts as $shout) {
    $shout->timeAgo = $relativeTime->timeAgo($shout->createdAt);
    $results[] = $shout;
}

header('Content-type: application/json');
echo json_encode($results);

ما در بالا کدی را قرار دادیم تا پیام هایی را که بیشتر از ۱ ساعت است ارسال شده است پاک شوند.ما از این برای پاکسازی اطلاعات در پیش نمایش استفاده کردیم.شما میتوانید هر کدام را که خواستید فعال نمایید.بعد از انتخاب پیام،ما با استفاده از کتابخانه  RelativeTime(بیشتر بخوانید)زمان قابل خواندن توسط انسان را محاسبه می کنیم.

پایان

 

 

+2
-2


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۱۰ دیدگاه ها

  1. اگه امکان داره اموزش ایجاد تالار گفتگو با phpبذارین ممنون

  2. سلام مرسی از آموزش خوبتون. آیا باید در وبسیات خودمان پایگاه داده بسازیم یا خود برنامه پایگاه داده می سازد. لطفا کمی توضیح دهید

    • با سلام خدمت شما کاربر گرامی

      بله شما باید خودتان یک پایگاه داده برای تالار خود ایجاد کنید،ما در این آموزش یک پایگاه داده موقتی با تعداد محدودی داده ایجاد کرده ایم.

  3. سلام . ببخشید من تازه با این سایت آشنا شدم و خیلی علاقه مند شدم آموزش های این سایت رو به صورت عملی انجام بدهم. یک سوال دیگری داشتم اینکه من چگونه می توان فرم نوشتن پیام ها را در بالای صفحه ببریم یعنی اینکه هر پیامی که نشوته می شود در زیر فرم بیاید و جای فرم ثابت باشد. با تشکر

  4. سلام مرسی از توضیحاتتون. فقط یک مشکل دیگری دارم این است که چطوری می تونم تعداد پیام ها را زیاد تر کنم مثلا به جای ۲۰ تا پیام آخر ۱۰۰ تا پیام آخر نشان داده شود؟
    با تشکر

    • دوست گرامی ،کافی در بخش load.php محدودیت مورد نظر خود را اعمال نمایید.ما در آنجا تعداد پیام ها را برابر با ۲۰ در نظر گرفتیم،شما کافی آن را به ۱۰۰ تغییر بدهید.

  5. چه دیتابیسی با چه جدول هایی بسازیم
    در اینباره توضیح میدید
    ممنون

دیدگاه خود را برای sanjesh_88 بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


شش − 4 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>