50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت چت روم با php و jquery

در این آموزش از ساخت چت روم با php , قصد داریم به شما نحوه ساخت یک برنامه چت ساده با php را نشان بدیم . در آموزش قبلی ساخت چت روم با php توسط websocket را دیدم . در اینجا , می خواهیم فقط از jquery و php برای ساخت چت روم استفاده کنیم . تمام چت ها در یک فایل متنی (text) ذخیره می شوند بنابراین نیازی به دیتابیس نداریم .

مواردی که در ساخت چت روم با php و jquery استفاده کردیم

  • PHP – بخش سمت سرور (server-side) را مدیریت می کند

ذخیره پیام های جدید در فایل متنی

خواندن متن پیام جدید از فایل متنی

دریافت وضعیت فایل متنی

امنیت پایه

  • Jquery/Javascript – بخش سمت کاربر (Client-side) را مدیریت می کند . در اینجا از ajax استفاده می کنیم . به این معنا پیام های همه کاربران بدون آنکه صفحه مجددا بارگذاری شود در صفحه چت روم نمایش داده می شود .

در یک زمان مشخص به سرور درخواست اینکه آیای پیام جدید وجود دارد , ارسال می کند

پیام های جدید را به صفحه چت روم اضافه میکند

چت را به آخرین پیام ارسالی اسکرول می کند

از کاربر نام را درخواست می کند در صورت وارد نکردن یک نام رندوم را اختصاص میدهد .

مقدار ورودی متن input را محدود به تعداد کاراکتر می کند.

امنیت پایه

  • فایل متنی TEXT – ذخیره چت ها

در آموزش ساخت چت روم با php و jquery تمام تکنولوژی های جالب و کاربردی را پوشش دادیم .

ساخت چت روم با php و jquery

ساختار فایل HTML

آی دی page-wrap برای وسط چین کردن المان های چت روم استفاده شده است . دو تگ div تو در تو برای بخش پیام های کاربران در نظر گرفته شده است .

بخش مهم دیگر که تگ textarea با آی دی sendie برای ارسال پیام کاربر است و از طریق جاواسکریپت مقادیر آن را دریافت می کنیم

بخش کد javascript

در اینجا کمی از کد جاواسکریپت بصورت شی گرایی استفاده می کنیم . تابع Chat را با تعدادی از توابع مربوط به پروژه ساخت چت روم ما تعریف کردیم.

UpdateChat درخواست اینکه آیا خط جدید به فایل متنی text ما اضافه شده است یا نه را ارسال می کند . اگر اضافه شده بود , یک مقدار داده json را برگشت می دهد و انی تابع آن را به عنوان یک خط جدید به صفحه چت روم اضافه می کند

sendChat زمان اجرا می شود که متنی در textarea وارد شده و کلید اینتر زده شده باشد . این تابع داده های وارد شده را به سرور برای پردازش های بعدی ارسال می کند .

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

این توابع بصورت زیر هستند :

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

همه ۳ توابع بالا از قابلیت ajax در jquery استفاده میکنند تا درخواست هایی را به فایل php  که process.php نام دارد ارسال و نتیجه مورد نظر را دریافت کنند.

بخش کد php

قسمتی از داده های ارسالی توسط ajax مقداری به نام function است . این پارامتر به فایل php اجازه می دهد که نوع درخواست را تشخیص دهد . پس اولین کاری که انجام می دهیم قرار دادن یک شرط switch برای هر یک از احتمالاتی که تعریف کردیم است . همچنین می توانیم یک متغییر آرایه ای را برای ذخیره مقادیری که قرار است بصورت jSON اینکد شده و به بخش javascript برگشت داده شود , بسازیم.

زمانی که از getState استفاده کنیم , تعداد خط های فایل برگشت داده می شود . اگر از update استفاده کنیم , کل فایل متنی خوانده و خط های جدید برگشت داده می شوند .اگر هم از send استفاده کنیم , متن پیام توسط تابع preg_match پردازش و در فایل متنی به عنوان یک خط جدید نوشته می شود.

در اینجا حتما نیاز داریم تا کتابخانه jquery را در صفحه html خود همراه با فایل chat.js که ساختیم لود کنیم . همچنین چند تابع دیگر برای دریافت نام کاربر را هنگام ورود استفاده  کنیم .

بررسی برای پیام های جدید

در اینجا نیاز داریم که تابع update را هر مثلا ۱ ثانیه فراخوانی کنیم تا متن پیام های جدید را برای ما خوانده و به صفحه append کند . بنابراین تابع setIterval را برای فراخوانی تابع update در قالب مشخصه onload استفاده کردیم

نکته : فایل های تحت php را نمی توانید بصورت عادی دانلود در لوکال هاست خود اجرا کنید چرا که نیاز به راه اندازی یک لوکال هاست شامل پکیج php و وب سرور مانند apache دارید . برای همین می توانید فیلم آموزش ساخت لوکال هاست را از اینجا مشاهده بفرمایید . همچنین بررسی کنید پرمیشن فایل chat.txt در هاست قابلیت نوشتن (w+) را داشته باشد .

امیدوارم از آموزش ساخت چت روم با php و jquery لذت برده باشید . دیدید ترکیب javascript و php می تواند چه جالب و کاربردی باشد حتی بدون نیاز به استفاده از سوکت نویسی در php و یا استفاده از websocket توانستیم یک سیستم چت ساده را پیاده سازی کنیم . حتما برای تمرین روی این پروژه کار کنید و سعی کنید توسعه بدید . در قسمت های بعدی ما این چت را کمی توسعه خواهیم داد تا بخش های جالبی را به آن اضافه کنید . مطمینا تکنیک های پیاده سازی شده در این سورس به شما نحوه اجرای برخی از امکانات را می دهد .

 

برای دریافت سورس کد ساخت چت روم با php و jquery از باکس دانلود استفاده کنید.

هر گونه مشکلی در پیاده سازی کدها داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۰)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. محمدرضا فرجی ۴ آبان ۱۳۹۹

    سلام،چطوری رو هاست نصب کنمش

    پاسخ
    1. حسن شفیعی ۴ آبان ۱۳۹۹

      سلام. فایل ها رو از باکس دانلود دریافت و داخل هاست آپلود و اکسترکت کنید

      پاسخ
  2. امید ۶ شهریور ۱۳۹۹

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

    پاسخ
    1. حسن شفیعی ۶ شهریور ۱۳۹۹

      سلام. شاید مشکل از محیط اجرا یا ورژن php شما باشه. که داخل مرورگر f12 بزنید و کنسول رو چک کنید

      پاسخ
  3. mohmmd ۱۷ مرداد ۱۳۹۹

    خوب بود

    پاسخ
    1. حسن شفیعی ۱۷ مرداد ۱۳۹۹

      خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
  4. hosein ۲۴ تیر ۱۳۹۹

    سلام وقت بخیر من چطور می تونم کاری کنم که کاربر پیام بفرست و ربات بصورت هوشمند اون پیام تحلیل کنه و بعد مرتبط با سوال جواب بده؟

    پاسخ
    1. حسن شفیعی ۲۴ تیر ۱۳۹۹

      سلام. ممنون.
      از هوش مصنوعی باید استفاده کنید.
      https://www.aparat.com/v/z29T4
      https://sokanacademy.com/blog/7380/%DA%86%D8%AA%E2%80%8C%D8%A8%D8%A7%D8%AA-%D8%A7%D9%BE%D9%86%E2%80%8C%D8%B3%D9%88%D8%B1%D8%B3-%D9%85%D8%A8%D8%AA%D9%86%DB%8C-%D8%A8%D8%B1-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C-%D9%86%D9%88%D8%B4%D8%AA%D9%87-%D8%B4%D8%AF%D9%87-%D8%A8%D8%A7-%D9%BE%DB%8C-%D8%A7%DA%86-%D9%BE%DB%8C-%D9%88-%D9%85%D8%A7%DB%8C-%D8%A7%D8%B3-%DA%A9%DB%8C%D9%88-%D8%A7%D8%B3

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

      پاسخ
  5. امیر ۹ اردیبهشت ۱۳۹۹

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

    پاسخ
    1. حسن شفیعی ۹ اردیبهشت ۱۳۹۹

      سلام ممنون. در فایل process.php می توانید اتصال به دیتابیس رو انجام بدید و به جای ذخیره سازی در فایل از دیتابیس mysql با روش pdo پیاده سازی کنید.
      آموزش pdo در php
      موفق باشید.

      پاسخ
دوره های آموزشی

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link