تعلم برمجة غرفة شات جماعية بلغة JavaScript

غرف الشات أو غرف الدردشة من الأمور المطلوبة عند الكثير حيث يتم فيها محادثات آمنة وخاصة ، والبعض يفضل غرفة شات لأن بها دردشة جماعية ، ولا تحتاج غرف الدردشة إلى تسجيل الدخول أو إنشاء حساب جديد لبدأ المحادثة .

ويمكنك إضافة غرفة شات لموقعك أو صفحة ويب ، أو جعلها تعاليق لأحد مقاطع الفيديوهات أو داخل اللايفات ، ويمكنك أنت بنفسك برمجة صندوق دردشة في المكان الذي تريد على الويب سواء في المدونات او المواقع الشخصية .

برمجة وانشاء صفحة ويب بلغة HTML وCSS وJAVASCRIPT و jQuery

وPHP .

لماذا استخدمت كل هذه اللغات البرمجية في إنشاء غرفة شات للدردشة ، لأن كل لغة برمجة ولها دورها في السكريبت وأهم شيء في هذا الكود البرمجي هو التعرف على لغة jQuery ، وهذه اللغة تحتاج إلى التعرف على JavaScript .

خطوات البدأ في كتابة كود صفحة دردشة :

سنقوم أولا بإنشاء ملف index.php وهو لعرض أدوات مثل صندوق المحادثة وزر الإرسال من خلال لغة html ، وثم استخدام داخل هذا الملف لغة جافاسكريبت وأوامر jQuery لإرسال المحاثات التي تجري وحفظها وجلبها بدون أن يتم تحديث صفحة الويب على المتصفح ، ولغة css خاصة فقط بتنسيق وتزيين الأدوات الموجودة في html ويتم استدعاء أوامر css من ملف style.css .

index.php

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Chat Room Tooroq.com</title>
        <meta name="description" content="Tuts+ Chat Application" />
        <link rel="stylesheet" href="style.css" />
    </head>

    <body style="background-color: rgb(218, 238, 255);" >

        <div id="wrapper">
            <div id="menu">
                <p class="welcome">Hi, <a href="https://www.tooroq.com" target="_blank" >Tooroq.com</a> <b></b></p>
                <p class="logout"><a id="exit" href="https://www.tooroq.com"> خروج </a></p>
            </div>

            <div id="chatbox"> </div>

            <input name="user" type="text" id="user" placeholder="Name" />

            <form name="message" action="">
              
                <input name="usermsg" type="text" id="usermsg" />
                <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
            </form> 

        </div>


<input type="hidden" id="check" />

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
            // jQuery Document 
            $(document).ready(function () {});
 </script>

<script> 

var rnd = Math.floor(Math.random() * 9) + 1 ;

document.getElementById("check").innerHTML = 1 ;

$(document).ready(function(){

    $('#submitmsg').click(function(error){

      addElement() ;
      error.preventDefault();
     // var msg = $('#msg').val();
     var user = document.getElementById('user').value ;
     var msg = document.getElementById('usermsg').value ;
      $.ajax({
          url:"senddata.php",
          type:"POST", data:{m:msg , rnd:rnd , u:user}
      });

    });
  
});


 function getdata(){
     var co = document.getElementById("check").textContent ;
     $.ajax({
          url:"getdata.php",
          type:"POST",
          data:{c:co} ,
          success:function(text){
              if(text.length == co ){
             
              }else{
                 document.getElementById("chatbox").innerHTML = text;
                 document.getElementById("check").innerHTML = text.length ;
                 addElement() ;
            
           }
          }
      });
 } setInterval(function(){
   getdata() ;
 },1000);




 function addElement() {
   const element = document.createElement('p');
   const list = document.getElementById("chatbox");
   list.appendChild(element);
   element.scrollIntoView();
}


</script>

    </body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
  }
  
  body {
    margin: 20px auto;
    font-family: "Lato";
    font-weight: 300;
  }
  
  form {
    padding: 15px 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  
  form label {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  input {
    font-family: "Lato";
  }
  
  a {
    color: #0000ff;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  #wrapper,
  #loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #eee;
    width: 600px;
    max-width: 100%;
    border: 2px solid #212121;
    border-radius: 4px;
  }
  

  #chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #fff;
    height: 430px;
    width: 530px;
    border: 1px solid #a7a7a7;
    overflow: auto;
    border-radius: 4px;
    border-bottom: 4px solid #a7a7a7;
  }
  
  #usermsg {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ff9800;
  }

  #user {
    flex: 1;
    border-radius: 4px;
    padding: 6px;
    margin-left: 25px;
    border: 1px solid #cccac6;
  }
  
  #name {
    border-radius: 4px;
    border: 1px solid #ff9800;
    padding: 2px 8px;
  }
  
  #submitmsg,
  #enter{
    background: #ff9800;
    border: 2px solid #e65100;
    color: white;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 4px;
  }
  
  .error {
    color: #ff0000;
  }
  
  #menu {
    padding: 15px 25px;
    display: flex;
  }
  
  #menu p.welcome {
    flex: 1;
  }
  
  a#exit {
    color: white;
    background: #c62828;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
  }
  
  .msgln {
    margin: 0 0 5px 0;
  }
  
  .msgln span.left-info {
    color: orangered;
  }
  
  .msgln span.chat-time {
    color: #666;
    font-size: 60%;
    vertical-align: super;
  }
  
  .msgln b.user-name, .msgln b.user-name-left {
    font-weight: bold;
    color: white;
    padding: 2px 4px;
    font-size: 90%;
    border-radius: 4px;
    margin: 0 5px 0 0;
  }
  

الدالة getdata() يتم جلب بها المحادثات كل ثانية من ملف getdata.php واستخدمنا دالة تجلب النص الموجود داخل ملف chatlog.txt وهو ملف يتم إنشاؤه من خلال لغة php عبر ملف senddata.php وذلك بعد الضغط على زر ارسال ليتم حفظ الرسالة مع اسم المستخدم.

الأمر $(document).ready(function() يتم استدعاؤه عند الضغط على زر إرسال ويتم إنشاء المدخلات الموجودة في Element عبر POST إلى ملف senddata.php وقد قمنا بإرسال user و msg .

senddata.php

<?php

$msg = $_POST["m"] ;
$rnd = $_POST["rnd"] ;
$user = $_POST["u"] ;

$date = date("Y-m-d  H:i a") ;

$colors = array("#0ACF00", "#546e7a", "#033AE8", "#E803E1", "#E84803", "#BFC806" , "#D12709", "#09D1CE", "#7C09D1" , "#D9CB41") ;

$m = " <div class='msgln'><span class='chat-time'> $date  </span> 
       <b class='user-name' style='background: $colors[$rnd] ;'> $user </b> $msg </div>" ;
             

$filepath = "chatlog.txt" ;
// هذا الامر لاضافة محتوى جديد على محتوى قديم
 file_put_contents($filepath , $m , FILE_APPEND ) ;

 // هذا المر لحفظ ملف جديد 
// file_put_contents($filepath , $m  ) ;

?>

ملف senddata يقوم بتسجيل اسم مستخدم والرسالة التي ارسلها ويقوم بحفظها بنمط html على ملف يتم إنشاؤه باسم chatlog.txt .

getdata.php

<?php

header('Content-type: text/plain; charset=utf-8');

$filepath = "chatlog.txt" ;
$content = file_get_contents($filepath);

$c = $_POST["c"] ;

 echo $content  ;

?>

لتجربة الكود على الحاسوب ستحتاج إلى تثبيت برنامج WampServer الذي سيقو بإنشاء سيرفر ويب لحاسوبك ، وإن كنت تتوفر على استضافة مواقع فجرب عليها .

معاينـــــة
تحميــل الكــود

طرق تقنية

القائمة الرئيسية

الصفحات

تعلم برمجة غرفة شات جماعية بلغة JavaScript

أخر المواضيع من قسم : جافا و جافا سكربت

تعليقات

إرسال تعليق