पिछले सप्ताह, मैंने त्वरित संदेश प्रदर्शित करने के लिए htmx में बदलाव के बारे में लिखा था। एचटीएमएक्स का उपयोग करने के एक सप्ताह बाद, मुझे और अधिक की आवश्यकता थी। मैं बेहतर कोड उपयोगिता के लिए सादे HTML स्ट्रिंग्स के बजाय JSX घटकों का उपयोग करके सर्वर से HTML स्ट्रीम करने का एक बेहतर तरीका चाहता था।

? त्वरित अनुस्मारक: यदि आपको यह उपयोगी लगता है, तो कृपया इसे अंगूठा दें! आपका समर्थन मुझे और अधिक सामग्री बनाने में मदद करता है।

मेरे द्वारा प्रयुक्त उपकरण:

• HTMX
• HTMX वेबसॉकेट एक्सटेंशन
• होनो बैकएंड के लिए
• वेबसॉकेट - क्लाइंट-साइड

विचार सरल है। मेरा वार्तालाप घटक hx-ext='ws' वाले div में लपेटा गया है, जो रेंडर होने पर मेरे बैकएंड से जुड़ जाता है।

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

      

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

            
        ))}
      
      
);

अगली महत्वपूर्ण चीज़ InputMessageForm है। बस फ़ॉर्म में ws-send जोड़ें, और यह एक संदेश भेजेगा जहां कुंजी उसके मूल्य के साथ टेक्स्ट क्षेत्र की आईडी (messageInput) है।

export const InputMessageForm = () => (
  

वेबसोकेट - सर्वर

यहां होनो सर्वर के लिए पूरा कोड ब्लॉक है। कुछ कंसोल कनेक्शन खोलने और बंद करने के लिए लॉग करते हैं। ऑनमैसेज वह जगह है जहां जादू होता है।

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 निर्दिष्ट नहीं है इसलिए यह डिफ़ॉल्ट रूप से सत्य है। इसका मतलब है कि यह तत्व को id=query-submit-form के साथ ढूंढेगा और उसे स्वैप करेगा।
3. उपयोगकर्ता संदेश के साथ घटक को वापस भेजें। यहां hx-swap-oob को beforeend के लिए निर्दिष्ट किया गया है जिसका सीधा सा मतलब है कि इसे मौजूदा संदेशों में जोड़ा जाएगा।
4. बातचीत → यहां आपका तर्क आता है। मैं एआई असिस्टेंट से बात कर रहा हूं इसलिए कुछ बाहरी एपीआई कॉल कर रहा हूं।
5. सहायक उत्तर के साथ घटक वापस भेजें। चरण 3 के समान लेकिन घटक भिन्न है।

समस्याएँ मुझे मिलीं

जवाब वापस भेजना थोड़ा समस्याग्रस्त था क्योंकि दस्तावेज़ हम्म हैं... मुझे लगता है कि समझना इतना आसान नहीं है। इसे ठीक करने के लिए एक समस्या भी बनाई गई है: वेबसॉकेट एक्सटेंशन के लिए दस्तावेज़ीकरण में सुधार करें। उससे मुझे बहुत सहायता मिली!

तो सबसे महत्वपूर्ण बात यह है:

आपको स्ट्रिंग को वापस भेजने की आवश्यकता है, जो 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

? क्या यह पोस्ट आपकी मदद करती है? कृपया लाइक बटन को स्पैम करें! आपका समर्थन अद्भुत है. धन्यवाद!

और अधिक जानने की इच्छा है?

अधिक जानकारी और ट्यूटोरियल के लिए बने रहें! मेरे ब्लॉग पर जाएँ?