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

؟ تذكير سريع: إذا وجدت هذا مفيدًا، فيرجى إبداء الإعجاب به! دعمكم يساعدني في إنشاء المزيد من المحتوى.

الأدوات التي استخدمتها:

• HTMX
• ملحق HTMLX Websockets
• Hono للواجهة الخلفية
• مآخذ الويب - من جانب العميل

الفكرة بسيطة. يتم تضمين مكون المحادثة الخاص بي في div مع hx-ext="ws"، والذي يتصل بالواجهة الخلفية الخاصة بي عند العرض.

export const Conversation = (props: { messages: Message[] }) => (
  

      

        {props.messages.reverse().map((message) => (
          

            
        ))}
      
      
);

الشيء المهم التالي هو InputMessageForm. ما عليك سوى إضافة ws-send إلى النموذج، وسيرسل رسالة حيث المفتاح هو معرف منطقة النص (messageInput) مع قيمته.

export const InputMessageForm = () => (
  

Websockets - الخادم

إليك مجموعة التعليمات البرمجية الكاملة لخادم Hono. بعض سجلات وحدة التحكم لفتح وإغلاق الاتصال. onMessage هو المكان الذي يحدث فيه السحر.

get(
    '/chatroom-ws',
    upgradeWebSocket((c) => {
      return {
        onOpen: () => {
          console.log('WS Connection open');
        },
        onClose: () => {
          console.log('WS Connection closed');
        },
        onMessage: async (event, ws) => {
          const { userMessage } = JSON.parse(event.data.toString());
          console.log('Got user message', userMessage);
          const inputArea = await c.html(
            

              
,
          );
          ws.send(await inputArea.text());
          const htmlUser = await c.html(
            

              
,
          );
          ws.send(await htmlUser.text());
          const response = await talk(userMessage);
          const htmlAgent = await c.html(
            

              
,
          );
          ws.send(await htmlAgent.text());
        },
      };
    }),
);

إذن التدفق هو:

1. تلقي الاستعلام
2. أرسلها فارغة فقط لجعلها نظيفة. لم يتم تحديد hx-swap-oob لذا فهو صحيح افتراضيًا. وهذا يعني أنه سيجد العنصر ذو المعرف=query-submit-form ويستبدله.
3. أرسل المكون مرة أخرى مع رسالة المستخدم. هنا تم تحديد hx-swap-oob على ما قبل النهاية مما يعني ببساطة أنه ستتم إضافته إلى الرسائل الموجودة.
4. نقاش → هنا يأتي المنطق الخاص بك. أنا أتحدث إلى مساعد الذكاء الاصطناعي لذا أقوم ببعض استدعاءات واجهة برمجة التطبيقات الخارجية.
5. أرسل المكون مرة أخرى مع الإجابة المساعدة. نفس الخطوة 3 ولكن المكون مختلف.

المشاكل التي وجدتها

كان إرسال الرد مرة أخرى يمثل مشكلة بعض الشيء نظرًا لأن المستندات هي حسنًا ... أعتقد أنه ليس من السهل فهمها. حتى أن هناك مشكلة تم إنشاؤها لإصلاح هذا: تحسين الوثائق الخاصة بامتداد websocket. لقد ساعدني ذلك كثيرًا!

لذا فإن الشيء الأكثر أهمية هو:

تحتاج إلى إرسال سلسلة مرة أخرى، والتي يتم تحليلها إلى html التي لها نفس معرف الشيء الذي تريد تبديله!

لذا فإن المشكلة رقم. 1

لقد أرسلت عن طريق الخطأ شيئًا كهذا:

JSON.stringify('
test 123
')
// '"
test 123
"'

هذا خطأ. لاحظ المعرف وأحرف الهروب! لا تقم بتقييد السلسلة هنا.

المشكلة رقم. 2

قد تعتقد أنه يمكنك إرجاع شيء ما وسيتم تبديله في المكان الذي تريده. ليس بالضبط. القسم الأول div هو مجرد معلومات لـ HTMX حول ما يجب فعله. على الأقل أفهم الأمر بهذه الطريقة؟

سأعيد HTML مثل هذا:

يتم إلحاق فقط داخل 

النتيجة النهائية

https://assets.super.so/c0fc84d8-fb32-4194-8758-4be657666aab/videos/c814dcd2-b9e9-4bb2-b8db-2ed9cd7819b7/lucy-chat-example.mov

؟ هل هذه التدوينة تساعدك؟ من فضلك أرسل بريدا عشوائيا على زر الإعجاب! دعمكم رائع. شكرًا!

هل تريد معرفة المزيد؟

ترقبوا المزيد من الأفكار والبرامج التعليمية! قم بزيارة مدونتي ?