fbpx
برمجةتدريبتعليمي

بناء تطبيق الدردشة الأول الخاص بك باستخدام  Flask في 7 دقائق فقط

بناء تطبيق الدردشة من أكثر الأمور التي نرغب بها، وخاصةً أننا نواجه العديد من تطبيقات الدردشة كل يوم.

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

حيث أنها تتضمن اتصال ثنائي بين المستخدمين وتسجيل كل طلب يقدمه الخادم.

لهذا السبب خصصنا لكم هذه المقالة والتي سنتعلم من خلالها بناء تطبيق الدردشة باستخدام Flask، وهو إطار ويب Python في 7 دقائق فقط.

نعم، لقد سمعته بشكل صحيح. يستغرق فقط 7 دقائق من وقتك، ولكن ماذا بعد!

يمكنك بناء تطبيق الدردشة وتطويره، والاستمتاع به.

المتطلبات الأساسية لهذه العملية هي بعض المفاهيم المرتبطة بـ:

  • Flask
  • SocketIO
  • jquery

هذه المتطلبات الثلاثة تشكل الأساس في بناء تطبيق الدردشة هذا.

دعونا نتعمق بها ونعرف الإجابات عن جميع الأسئلة الأساسية مثل كيفية استخدام المكتبات المذكورة أعلاه، وما دور كل منهم وكيف يساهمون في بناء تطبيق الدردشة هذا.

بناء تطبيق الدردشة باستخدام flask-SocketIO

لماذا نحتاج Flask في بناء تطبيق الدردشة؟

Flask هو أحد الأطر القوية المعروفة ببساطتها ومرونتها والعديد من الإضافات التي يمكن تضمينها لاحقاً إذا أراد المستخدم القيام بذلك.

تطبيق الدردشة هو تطبيق ويب، حيث يأتي إطار الويب في الصورة، لذلك دعونا نعمل مع Flask هنا.

تثبيت Flask:

الأمر بسيط للغاية بالفعل.

ما عليك سوى الانتقال إلى الجهاز في حالة وجود نظام التشغيل Mac OS أو Linux وموجه الأوامر إذا كان Windows.

انتقل إلى الدليل المطلوب حيث تكتب شفرة المصدر واكتب:

$ pip install flask

دعنا ننشئ ملفاً باسم main.py واستخرج كلاس Flask من نموذج flask، يشرح المقتطف أدناه كيفية القيام بذلك.

from flask import Flask

ما هو SocketIO وكيفية تثبيته؟

دعونا نحصل على فهم أساسي لماذا نحن بحاجة لـ SocketIO.

SocketIO ينشئ مساراً يمكن من خلاله أن يتفاعل جهاز كمبيوتر واحد مع الآخر.

بعبارة أخرى، يمكن اعتبارها بوابة لا تسمح بالاتصال إلا إذا كانت البوابات مفتوحة، أي فقط إذا كان المقبس مفتوحاً.

بما أن المحادثة تدور حول الاتصال، فإن المقابس ضرورية.

SocketIO هي مكتبة جافا سكريبت مستعرضة للمتصفح التي تلخص تطبيق العميل من بروتوكول النقل الفعلي.

باستخدام SocketIO، يمكنك أن تكون متأكداً جداً من أن أي متصفح بالخادم سيكون قادراً على الاتصال بتطبيقك.

كيف نحصل على إنشاء مقبس في Flask؟

هناك ملحق يعرف باسم “flask-socketio” يمكنّنا من القيام بذلك.

حيث أن Flask-SocketIO يعطي تطبيقات Flask إمكانية الوصول إلى الاتصالات ثنائية الاتجاه بين العملاء والخادم.

يمكن أن يستخدم تطبيق العميل أياً من مكتبات العميل الرسمية لـ SocketIO في جافا سكريبت أو ++C أو Java وSwift أو أي عميل متوافق لإنشاء اتصال دائم بالخادم.

في حالتنا هذه، سنستخدم مكتبة javascript وهي Socket.JS.

حيث يُمكّننا PIP من تثبيت هذا الامتداد “flask-socketio”، وللقيام بذلك، قم بتشغيل الأمر:

$ pip install flask-socketio

لتضمين كلاس SocketIO من نموذج flask_socketio، كل ما يتعين علينا القيام به هو:

from flask_socketio import SocketIO

الآن، قم بإنشاء متغير يسمى app من خلال تضمين Flask حول __name__.

لتمكين التشفير، نعلن عن SECRET_KEY.

يتم تطبيق SocketIO على “app” ويتم تخزينه لاحقاً في متغير socketio والذي يمكننا من استخدام socketio بدلاً من app في تشغيل التطبيق.

يشمل socketio بدء تشغيل خادم الويب، مثل app.

تأخذ ميثود ()run الوسيطات الاختيارية للمضيف والمنفذ، ولكن افتراضياً سوف تستمع على localhost: 5000 مثل خادم الويب لتطوير Flask.

كم أن debug=True يمكّن من فرز الأخطاء بكل سهولة.

يجب زيادة هذا مع بضعة أسطر أخرى من الشفرة للحصول على الجوهر الأساسي لتطبيق الدردشة و main.py ومن هنا تبدو:

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
socketio = SocketIO(app)

if __name__ == '__main__':
    socketio.run(app, debug=True)

الخطوات الأولى، كتابة Flask view.

ما هوFlask view؟ دعنا نفكر في هذا،

@app.route('/')
def sessions():
    return render_template('session.html')

لذلك، عندما يزور المستخدم الصفحة الرئيسية (المشار إليها بواسطة مصمم المسار “/”)، فإنه يؤدي إلى عرض جلسات الـ view المعلن عنها أدناه.

فهي الدالة التي يتم الاتصال بها عند فتح عنوان URL المذكور.

main.py كما تبدو:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
socketio = SocketIO(app)

@app.route('/')
def sessions():
    return render_template('session.html')

def messageReceived(methods=['GET', 'POST']):
    print('message was received!!!')

@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, callback=messageReceived)

if __name__ == '__main__':
    socketio.run(app, debug=True)

هنا، يساعد render_template في عرض صفحة HTML التي تسمى القوالب.

قوالب Flask تساعد في إضافة HTML إلى التطبيق لدينا.

يجب تضمين هذه في مجلد القوالب، حيث يكون التسلسل الهرمي كما يلي، بفرض أن المجلد أو الدليل الذي نقوم بإنشاء هذا التطبيق بداخله هو Chat_room.

Chat_room folder
/main.py
templates
       |-/session.html

في الوقت الحالي، دعونا نذكر رسالة “Hello” في session.html:

<html>
<head>
    <title>Session</title>
</head>
<body>
    <p>Hello</p>
</body>
</html>

قم بتشغيل التطبيق باستخدام الأمر:

$ python main.py

هذا يعطي الخرج بالشكل التالي:

بناء تطبيق الدردشة 1مكالمات Flask-Socket ومعالجة الرسائل:

حان الوقت الآن لفهم كيفية تلقي الخادم للرسائل التي يرسلها العميل وكيفية اعترافه برسائل العميل.

لتلقي رسائل WebSocket من العميل، يعرّف التطبيق معالجات الأحداث باستخدام مصمم socketio.on.

كما يمكنه إرسال رسائل رد إلى العميل المتصل باستخدام الدالات ()send و ()emit.

@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: '+ str(json))
    socketio.emit('my response', json, callback=messageReceived)

عند تشغيل ” “my event، يتلقى الملف الشخصي “handle_my_custom_event” أولاً كائنات json.

ثم يطبعه بشكل نهائي ويرسله لاحقاً إلى حدث ” my response “.

” callback ” هو نوع من تقنية تصحيح الأخطاء التي تساعدنا في التعرف على ما إذا كان يتم استلام الرسالة من قبل الخادم ومن الآن فصاعداً، تستدعي الدالة “messageReceived”.

الكود المصدري main.py سيكون:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
socketio = SocketIO(app)

@app.route('/')
def sessions():
    return render_template('session.html')

def messageReceived(methods=['GET', 'POST']):
    print('message was received!!!')

@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, callback=messageReceived)

if __name__ == '__main__':
    socketio.run(app, debug=True)

دمج SocketJS في قوالب Flask:

حان الوقت لملء session.html بكود المقبس (socket).

  • أولاً: يجب تضمين نصوص jquery و js في ملف HTML.

للقيام بذلك، نحتاج إلى استيراد هذه البرامج النصية قبل كتابة JS Functions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
  • ثانياً، نحتاج إلى مطالبة المستخدمين (المشاركين في الدردشة) بإدخال الرسالة التي يجب تسليمها والتي نحتاج إلى إنشاء نموذج لها في HTML.

يجب أن يكون هذا متصلاً بـ socket.js باستخدام عنصر “form” وكلاسات حقلي الإدخال كذلك.

يوضح مقتطف الكود أدناه إنشاء نموذج:

<form action="" method="POST">
      <input type="text" class="username" placeholder="User Name"/>
      <input type="text" class="message" placeholder="Messages"/>
      <input type="submit"/>
</form>
  • نحتاج بعد ذلك إلى استخدام ()io.connect لإنشاء الاتصالات وإنشاء جلسات.

سيتم إنشاء الجلسة من خلال ربط المستخدمين بنفس عنوان URL وهو http://127.0.0.1:5000.

var socket = io.connect('http://' + document.domain + ':' + location.port);

هنا، يمثل document.domain عنوان IP للكمبيوتر الذي تعمل عليه، بينما يمثل location.port المنفذ، والواحد الافتراضي هو 5000 وإذا تم تمريره كوسيط في الدالة run، فسيكون ذلك.

socket.on( 'connect', function() {
  socket.emit( 'my event', {
    data: 'User Connected'
  })
  var form = $( 'form' ).on( 'submit', function( e ) {
    e.preventDefault()
    let user_name = $( 'input.username' ).val()
    let user_input = $( 'input.message' ).val()
    socket.emit( 'my event', {
      user_name : user_name,
      message : user_input
    })
    $( 'input.message' ).val( '' ).focus()
  })
})

الوسيط الأول لـ ()on هو اسم الحدث.

أسماء الأحداث ” connect” و ” disconnect” و ” message” و “json”، وهي أحداث خاصة تم إنشاؤها بواسطة SocketIO. تعتبر أي أسماء أحداث أخرى أحداث مخصصة.

أحداث ” connect” و “disconnect” لا تحتاج إلى شرح.

يقدم حدث ” message” حمولة من نوع السلسلة، بينما تقدم أحداث “json” والأحداث المخصصة حمولة JSON، في نموذج Python dictionary.

لإرسال الأحداث، يمكن لخادم Flask استخدام التوابع ()send و ()emit  التي توفرها Flask-SocketIO.

ترسل الدالة ()send رسالة قياسية من السلسلة أو نوع JSON إلى العميل.

بينما ترسل الدالة ()emit رسالة تحت اسم حدث مخصص (هنا “my event “) مع البيانات.

عند إرسال النموذج، أي بعد استدعاء أسلوب POST، يتم تمرير الحدث “e” كوسيط.

حيث يتم استدعاء ()methodDefault  مما يمنع من إرسال النموذج ثم يأخذ القيم من حقول الإدخال واسم المستخدم والرسالة.

ثم يتم تمريرها عبر الدالة “emit” إلى الحدث المخصص “my event ” الذي حددناه سابقاً في “main.py”.

يتم بعد ذلك مسح حقل الرسالة لتمكين المستخدم نفسه من إدخال المزيد من الرسائل.

socket.on( 'my response', function( msg ) {
  console.log( msg )
  if( typeof msg.user_name !== 'undefined' ) {
    $( 'h3' ).remove()
    $( 'div.message_holder' ).append('<div><b style="color:             #000">'+msg.user_name+'</b>'+msg.message+'</div>' )
  }
})

بمجرد إرسال الرسالة عبر أحد الأحداث، نحتاج إلى عرض الرسالة المستلمة على صفحة HTML.

عند الرد، بمجرد استلام الرسالة، نمرر الرسالة إلى كلاس “message_holder”

(إلى جانب النص الموجود في علامة h3 تمت الإزالة ،(“No message yet”) )، حيث يتم إلحاق رسائلنا بالرسائل السابقة.

يبدو الملف session.html بأكمله كما يلي:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Flask_Chat_App</title>
  </head>
  <body>

    <h3 style='color: #ccc;font-size: 30px;'>No message yet..</h3>
    <div class="message_holder"></div>

    <form action="" method="POST">
      <input type="text" class="username" placeholder="User Name"/>
      <input type="text" class="message" placeholder="Messages"/>
      <input type="submit"/>
    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
    <script type="text/javascript">
      var socket = io.connect('http://' + document.domain + ':' + location.port);
      socket.on( 'connect', function() {
        socket.emit( 'my event', {
          data: 'User Connected'
        } )
        var form = $( 'form' ).on( 'submit', function( e ) {
          e.preventDefault()
          let user_name = $( 'input.username' ).val()
          let user_input = $( 'input.message' ).val()
          socket.emit( 'my event', {
            user_name : user_name,
            message : user_input
          } )
          $( 'input.message' ).val( '' ).focus()
        } )
      } )
      socket.on( 'my response', function( msg ) {
        console.log( msg )
        if( typeof msg.user_name !== 'undefined' ) {
          $( 'h3' ).remove()
          $( 'div.message_holder' ).append( '<div><b style="color: #000">'+msg.user_name+'</b> '+msg.message+'</div>' )
        }
      })
    </script>

  </body>
  </html>

ماذا بعد بناء تطبيق الدردشة هذا؟

بعد بناء تطبيق الدردشة، يمكنك الآن تشغيله من خلال فتح متصفح الويب لديك وانقر على عنوان URL: http://127.0.0.1:5000/.

في نفس الوقت، افتح علامة تبويب أخرى واضغط على نفس عنوان URL مرة أخرى.

ستظهر بعض لقطات الشاشة الناتجة:

بناء تطبيق الدردشة 2

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

على سبيل المثال، افتح علامة تبويب أخرى واكتب رسائلك.

بهذا، تتقن وبنجاح بناء تطبيق الدردشة باستخدام Flask.

تهانينا على تعلم كيفية بناء تطبيق الدردشة الأول، حيث يمكنكم العثور على شفرة المصدر الخاصة بالمقالة هنا.

هذا المقال من تأليف Samhita Alla و Vihar Kurama، المرجع من هنا.

 

نبذة عن الخطة الشاملة

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

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

الموقع الرسمي للخطة والتسجيل من هنا:

http://khottah.com/

التسجيل عبر رابط الخطة مع خصم 50% من هنا:

http://khottah.com/?coupon_code=50off

لمعرفة منهاج الخطة من هنا:

https://www.anbilarabi.com/curriculum

طرق الدفع والاشتراك والتحويل من هنا:

https://www.anbilarabi.com/payments

يمكنكم تحميل البروشور الخاص بالخطة من هنا:

https://d1y0l0iz92xzfv.cloudfront.net/khottah-brochure.pdf

شرح صوتي عن الخطة في 5 دقائق:

https://soundcloud.com/anbilarabi/5a-1

الدليل الشامل حول الخطة بالفيديو تعرف على الخطة من الداخل:

https://youtu.be/Oqi8Dp1KgH4

أخيراً نود مشاركتكم  بعض ما قاله البعض عنا وعن الخطة الشاملة وتقييمات الطلاب عبر هذا الرابط:

https://www.anbilarabi.com/people

شكراً جزيلاً لكم ولا تترددوا بالتواصل معنا عن طريق الواتس آب للرقم 00970599042502

كما يمكنكم مراسلتنا عبر هذا الإيميل:

http://ahmadnaser.com

 

 

 

 

 

 

تفضيل

مقالات ذات صلة

زر الذهاب إلى الأعلى
الدعم الفني
تحتاج مساعدة تواصل معي واتساب
إغلاق
إغلاق