Create-A-Simple-Php-Chatroom

چگونه یک چت‌روم ساده به زبان php بسازیم؟

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

پیش نمایش این چت روم رو میتونید از اینجا مشاهده کنید

برای این چت روم نمی خوایم از دیتابیس MySQL بهره بگیریم و تاریخچۀ چت روم توی یک فایل Html نوشته و فراخوانی خواهد شد.

همین قضیه باعث میشه سرعت ارسال پیام و بارگذاری سایت بالا بره و البته ارسال پیام هم با استفاده از تکنولوژی آژاکس خواهد بود (ارسال و نمایش پیام بدون نیاز به بازنشانی کردن صفحه).

خوب بریم سراغ آموزش:

 گام اول: قالب کلی

آموزش رو با ساخت اولین فایل که index.php هست شروع می کنیم. محتوای این فایل میشه:

۱- ما قالب کلی وبسایت رو ایجاد کردیم. البته کاملاً ایستا هستش و هیچ کد پی اچ پی در اون استفاده نشده. بعداً قسمت هایی از کدهای بالا رو پاک می کنیم و به جاش کد پی اچ پی میزنیم.
۲- دایو #wrapper که توی تگ body قرار گرفته ساختار اصلی چت روم رو مشخص میکنه.
۳- اگر دقت کنید می بینید که کد های جی کوئری رو آخر صفحه قرار دادیم. اینکار برای لود سریعتر صفحه بسیار موثر هست.

گام دوم: استایل دهی

خوب تا اینجای کار رو اگر درست انجام داده باشید می بینید چت روم به شکل خیلی بدی نمایش داده میشه. دلیلش این هست که فایل استایل رو نساختیم.
شما باید فایلی با نام style.css ایجاد کنید و کنار فایل index.php قرارش بدید. کدهای زیر رو توی فایل style.css اضافه کنید:

چیز خاصی برای توضیح این قسمت وجود نداره. استایل بالا ظاهر کل چت روم رو شکل میده.

گام سوم: ساخت قسمت ورود

از اینجا به بعد مجبوریم از کد های php استفاده کنیم 🙁 همونطور که گفتم قرار هست سیستم خیلی ساده باشه، پس بخش عضویت نداریم و قسمت ورود هم فقط برای اینه که کاربر اسمشو وارد کنه و با همون اسم پیغامهاشو توی چت روم بفرسته…
شما می تونید همه کدها رو (حتی استایل) توی همون index.php بذارید ولی به نظر من بهتر هست جدا جدا باشن. پس کدهای ورود به چت روم رو توی فایل login.php قرار میدیم:

۱- توی تابع loginForm یه فرم ایجاد کردیم که هرکجا نشست باطل شد و یا کاربر دکمۀ خروج از چت روم رو زد این فرم فراخوانی و برای کاربر به نمایش گذاشته بشه.
۲- برای فراخوانی تابع از کد زیر استفاده می کنیم:

۳- اگر فرم ورودمون توی فایل جداگانه ای باشه (در اینجا login.php) حتماً باید توی فایل اصلی که index.php هست واردش کنیم. با این کد:

۴- چیزی که توی کدهای بالا توجه‌مون رو به خودش جلب میکنه استفاده از تابع htmlspecialchars هست که کارش تبدیل کارکترهای خاص مثل کارکتر کپی رایت، قلب، دلار و… به کد های اچ تی ام ال هست.

گام چهارم: نمایش فرم ورود

توی مرحله قبل فرم ورود رو به صورت تابع ایجاد کردیم. الان باید هروقت نشست باطل بود فراخوانیش کنیم. توی بالاترین قسمت فایل index.php کد زیر اضافه میشه:

آخر همین فایل هم برای اینکه شرط رو ببندیم از کد زیر استفاده میکنیم:

این کار باعث میشه که اگر کاربر وارد شده باشه کدهای صفحه ایندکس که درون دایو #wrapper قرار گرفتن نمایش داده بشه وگرنه تابعی که توی مرحله قبل تعریف کردیم یا همون فرم ورود فراخوانی میشه و کاربر باید وارد بشه.

گام پنجم: پیغام خوش آمد گویی

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

و این کد رو جایگزینش کنید:

حالا برای اینکه با کلیک روی گزینه “خروج از چت روم” کاربر بتونه خارج بشه کد جی کوئری زیر رو به پائین فایل index.php و در ادامه کدهای جیکوئری قبلی اضافه می کنیم:

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

گام ششم: پیغام خروج

توی اسکریپت های چت روم تقریباً رسم هست وقتی کاربری خارج میشه پیغامی توی چت روم به نمایش گذاشته میشه تا بقیه کاربرها از خروجش با خبر بشن. توی همون فایل index.php کد زیر رو هر جایی که صلاح دونستید اضافه کنید:

۱- توی این قسمت اگر logout مقداری داشته باشه شرط اجرا میشه.
۲- فایل log.html قرار هست تاریخچه چت روم رو تو خودش نگه داره. پس این فایل باز میشه، درونش پیام سیستم نوشته میشه و در آخر هم میبندیمش.
۳- بعد از نمایش پیغام خروج، نشست باطل میشه و کاربر به فایل index.php تغییر مسیر میده تا فرم ورود براش به نمایش گذاشته بشه.

گام هفتم: ارسال پیغام کاربر

وقتی کاربر پیغام خودش رو توی جعبه متنی مینویسه و دکمه “بفرس!” رو میزنه باید اون پیغام توی فایل log.html ثبت بشه. ما چون می خوایم چت روم به صورت آژاکس باشه و پیغام بدون بازنشانی صفحه ارسال بشه پس باید دوباره از جی کوئری استفاده کنیم. در ادامه کدهای جی کوئری که توی index.php بود، مینویسیم:

۱- باکلیک روی #submitmsg محتویات #usermsg به فایل post.php ارسال میشه.
۲- در نهایت هم محتویات #usermsg برای آماده سازی ارسال بعدی خالی خواهد شد.

گام هشتم: ساخت فایل post.php

باید فایل post.php رو برای نوشتن پیغام های کاربر توی فایل log.html آماده کنیم. پس کنار فایل های دیگه فایلی با نام post.php میسازیم که محتویاتش میشه:

اگر توضیحات قسمت های قبلی رو بخونید متوجه میشید این کد ها چیکار میکنن.

گام نهم: نمایش محتویات log.html در صفحه چت روم

هر پیغامی که کاربر ثبت کرده توی log.html قرار می گیره پس باید محتویات این فایل رو توی چت روم به نمایش بذاریم تا پیغام ها نمایش داده بشه.
دایوی که با آی دی chatbox هست رو پیدا و پاکش کنید و بجاش این کدها رو قرار بدید:

گام دهم: به روزرسانی پیغام ها

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

برای مشخص کردن زمان بین دو بازنشانی صفحه از کد زیر استفاده میکنیم:

اینجا برای سیستم تعریف کردیم که هر صفر میلی ثانیه صفحه رو به روزرسانی کنه. پس هر ارسال بلافاصله به نمایش گذاشته میشه. این مقدار ممکنه به سرور فشار بیاره.
(به روزرسانی: این کار روی لوکال هاست مشکلی نداشت ولی وقتی فایل ها رو توی هاست آپلود کردم و وارد چت روم شدم مرورگر کرش کرد).
بهتر هست مقدار رو روی ۲۵۰۰ تنظیمش کنید تا هر ۲ و نیم ثانیه صفحه بروز بشه…

در آخر هم برای اینکه با هر ارسال اسکرول بار پایین بیاد و کاربر مجبور نباشه هربار اینو بکشه بیاره پایین کد زیر رو در ادامش قرار میدیم:

دوستان شما می تونید اسکریپت رو از همین پایین دانلود کنید. اگر گیج شدید مقصر منم. یه خورده قروقاطی شد. ببخشید…
کدها رو ببینید و تا جایی که می شه خودتون پیادش کنید. با کپی، پِیست خوبه ولی اگر کد بزنید به نفعتونه. این رو اول به خودم میگم چون منم خیلی حوصله اینکارو ندارم. 🙁


Design-With-Love

خدا کنه یکی از اونایی که این آموزش رو خوندن یه اسکریپت خفن چت روم باهاش بسازه. الان خیلی ابتدایی و ساده هستش ولی خدایی با یه خورده ذوق و خلاقیت و کار میشه ازش یه چیز توپ ساخت. پیشنهاد من برای ارتقاءش: سیستم عضویت، نمایش کاربرای برخط، ارسال پیغام خصوصی، ظاهر بهتر، پروفایل کاربر، قسمت مدیریت، نمایش جنسیت، گروه های کاربری (معاون، ناظر، مدیر، کاربری عادی، میهمان و…)، دسته بندی اتاق ها، امکان ساخت اتاق برای کاربرای رده بالا و…
می تونید پیش نمایش رو اینجا ببینید!
موفق باشید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
دانلود اسکریپت ساده چت روم
8.5 KiB
730 Downloads
اطلاعات بیشتر
  1. سلام دوست عزیز
    من خیلی به این چت روم نیاز دارم ولی متأسفانه لینک دانلودش خرابه . میشه لطف کنید و روی ایمیلم بفرستید .

    • سلام لینک دانلود تصحیح شد. ممنون از اینکه اطلاع دادید. در ضمن فایل رو براتون ایمیل کردم. موفق باشید.

  2. اقا دمت گرم خداشاهده تکی داداش تک تک تک تک تک تک هر چی بهت بگم باز کمه فقط میتونم بگم.
    یه دنیااااااااااااااااااا مر۳۰

  3. با سلام
    ممنون از قرار دادن این مطلب خیلی به درد بخور بود ؛ فقط این چند چیز که میگم رو اضافه کنید یا به ایمیلم ارسال کنید
    کد های اضافه برای چت روم:
    ۱-کاربران آنلاین
    ۲-ارسال شکلک
    ۳-عضویت برای کاربران
    اگه اینا رو قرار بدین چت روم من کامل می شه
    با تشکر ا

    • سلام دوست عزیز ساخت این مواردی که گفتید خیلی وقت میبره , میتونید خودتون بسازید اگه مشکلی داشتید مطرح کنید تا کمکتون کنم در غیر این صورت از اینجا میتونید (کلیک کنید) درخواست طراحی بدید در قبال دریافت مبلغی براتون طراحی کنم. موفق باشید.

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

    من یه چت روم با دیتابیس فایلی ساختم phpp.ir/chat
    نهایت استفاده رو از دیتابیس فایلی بردم و کاملا باگ گیری شدس
    ولی بازم نتیجه ای که میخواستمو نگرفتم…
    بازم ممنون از آموزشتون

    • سلام دوست عزیز این سیستم چت باگ نداره فقط به مرور زمان ممکنه مشکل لود داشته باشه چون حجم فایل متنی بالا میره و با پاک کردنش میشه مشکل رو حل کرد.
      با دیتابیس هم میشه یه چت روم بهتر از این رو ساخت اما اینجا هدف ما اموزش است نه مسائل فنی.
      ممنون از اینکه نظر دادید.موفق باشید.

  5. سهیل

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

    • برنامه کاملا تست شده و سالمه. اگه با خطا مواجه میشید یا ارور دریافت میکنید اون رو ذکر کنید تا بررسی کنم. در غیر این صورت برنامه سالمه و مشکل از نحوه استفاده شما خواهد بود. تست کنید جی کوئری به صفحه افزوده شده یا نه؟

      • سلام دوست گرامی برنامه مشکلی نداره و تست شدس اگه خطایی دریافت میکنید ذکر کنید تا بررسی کنم. من خطایی در برنامه مشاهده نمیکنم.

    • استیکرها همه از خانواده عکس و تصاویر هستند. برای اینکه بتونید استیکر بزارید باید درون چت روم خودتون از کدهایی استفاده کنید که هر کدوم از این کدها در هنگام ارسال شدن به صورت اتوماتیک به تصویر مربوطه تبدیل شوند برای مثال اگه شما : – ) رو ارسال کنید به استیکر لبخند تبدیل بشه. کار راحتیه , کافیه از تابع strpos و str_replace استفاده کنید.

  6. سینا

    میخواستم بدونم من این کد رو کجا باید بزارم ؟؟
    از xzn استفاده میکنم برای هاست
    ممنون

    • با سلام. کد رو دانلود کنید و درون هاست خود قرار بدید بعدش فقط کافیه که ادرس فایل index.php را با توجه به دامنه ی خودتون درون مرورگر وارد کنید.

  7. اصغر خلفی -اینترنت وشبکه های گسترده

    با سلام .من تازه دانشگاه html یاد گرفتم که برای طراحی قالبه .مرجعی وجود نداره که آموزش بده کد های چت روم رو که به طور کامل یاد بگیریم از اون ؟ خیلی علاقه دارم توزمینه چت کدنویسی کنم . ممنون میشم جواب بدید

    • سلام به شما دوست عزیز. خیلی خوبه که تصمیم گرفتید بالاخره از یه جایی شروع به برنامه نویسی کنید. مرجع های متفاوتی وجود داره اما منابع اصلی به صورت زیر هستند:
      w3schools.com
      it-ebooks.info
      از این دو منبع میتونید استفاده کنید که اولی دستورات برنامه نویسی تحت وب را شرح میده و دومی کتاب های IT رو در بر میگیره.
      همچنین میتونید به طرح چه نیز سر بزنید و هرگونه سوالی دارید بپرسید تا من پاسخ بدم.
      یه بخش اموزش ویدئویی دارم میسازم که با ادرس tarhch.ir/video موجود است اما هنوز کامل نشده. تا یکی دو هفته دیگه به طور جدی شروع به کار خواهد کرد و الان در مرحله تست و خطایابی قرار داره.

    • یه فایل با پسوند html هست کافیه اون رو پاک کنید. توی این چت رومی که من ساختم شما نمیتونید یه پیام خاصی رو پاک کنید!!! مگر اینکه تغییراتی توش ایجاد بشه. اما میتونید با پاک کردن یه فایل html که به همراه چت روم ساخته میشه همه پیام ها رو پاک کنید

  8. سلام.
    خسته نباشین…
    چت روم باید با برنامه نویسی شبکه (سوکت) نوشته شه.
    چت روم اصولی، اون جوریه…
    ممنون.

    • چت رومی که تحت صفحه وب باشه نیاز به سوکت نداره! اما اگه بخوایم حالت نرم افزار مثل تلگرام یا واتس اپ سیستم چت بسازیم باید از سوکت هم استفاده کرد. اموزش راجب سوکت هم خواهم گذاشت. ممنون از نظر خوب شما.

  9. مجید

    با سلام
    خیلی ممنون از برنامه
    من روی لوکال آوردمش بالا همه چیز اوکی هست ، فقط مشکل اینجاست که بعد از ورود وقتی تایپ میکنیم و بفرس! رو میزنیم متن نمیاد داخل باکس ولی پیام سیستم ها هست
    مشکل کجاست ؟

    • سلام دوست عزیز برنامه تست شده هست و مشکلی نداره! اگه با خطایی مواجه شدید گزارش بدید تا برطرف بشه در غیر این صورت هیچ مشکی در برنامه وجود نداره. شما باید برنامه رو در محیط لوکال سرور یا سرور اصلی تست کنید چون فایل های php نیاز به اجرا شدن دارند.

  10. این چت روم خوبی هست ولی
    با این کد کاربر مصرف نت خیلی زیاده خواهد داشت تقریبا ۲۰ کیلو بایت در دقیقه حتی اگه چت نکنه!
    اگه چت روم حرفه ای میخاید با مصرف نت تقریبا کمتر از ۰٫۵ کیلوبایت در دقیقه
    من برنامه شو با C# نوشتم – با ظاهری مشابه تلگرام + فقط کد افراد آنلاین رو نمایش میده
    ۲ تا برنامه داره سرور که باید روی vps نصب کنید و یه برنامه برای یوزر هاتون
    این شمارم : ۹۳۷۹۷۷۷۴۷۰
    فی الواقع این نرم افزار مسنجره و نه چت روم

    • سلام دوست عزیز. این فقط یک مثال است و جنبه ی تجاری نداره! برای کار های تجاری باید به همه چیز از جمله حجم داده ها و رمزگذاری داده ها قبل از ارسال توجه کرد.

  11. حسین

    سلام ادمین
    ممنونم بابت چت رومتون…

    فقط قربان ازتون خواهشی دارم… استادمون گفته یه سایتی درست کنید بیارید و اینکه کد به کد بلد باشید وگرنه بهتون ۰ میدم….

    میتونم ازتون خواهش کنم توضیح کد این چت روم رو بزارید؟ البته آسونه یادگرفتنش؟

    ممنون میشم از طریق ایمیل با بنده در ارتباط باشید

  12. حسین

    مشکلی که من دارم اینه که در wamp نصب کردم و وارد مرورگر میشم و نام کاربری میدم وارد محیط گفت و گو میشم.ولی پیغامی میفرستم و گزینه بفرس! رو میزنم پیغامم در صفحه نمیاد…

    این مشکلو الان خوندم کامنتارو اکثرا داشتن… من تا صبح نیازش دارم ممنون میشم اگه کمکم کنید

    • دوست گرامی لینک دانلود رو با سورس فایل جدید عوض کردم. سورس کدها همه تست شده هستند. دوباره دانلود کنید و تست کنید اگه مشکلتون حل نشد اطلاع بدید تا براتون درست کنم.

      • کدها زیاده نمیشه خط به خط توضیح داد، توضیحات کلی درون پست درج شده، موفق باشید

  13. حسین

    مهندس با تغییر فایل log قبلی درست شد نوشته های قبلا که تو دمو بوده…

    فقط اگه درمورد کدها توضیح بدید ممنون میشم قربان

  14. سلام
    من یه اسکریپت دانلود کردم و روی هاست رایگان نصب کردم
    اما یه مشکل دارم اونم اینکه ای پی کاربران یکسان یعنی هر چند تا کاربری که انلاین بشن همه و همه یک ای پی میگیرند مثلا ۹۵٫۲۱۲٫۱۱۲٫۵۴
    چنتا اسکریپت دیگه هم دان کردم همین مشکل رو دارم
    لطفا کمکم کنید تا مشکل رو برطرف کنم

    • سلام هاست رایگان کلا از اسمش معلومه! یک سری امکانات محدود داره که بدرد نصب هرجور اسکریپتی نمیخوره! شما باید هاست بخرید قیمتشم خیلی بالا نیست! با ۲۰ یا ۳۰ تومن سالانه میتونید هاست بخرید.

می‌خواهید دیدگاهتان را بیان کنید؟