# Asjd.js और HMMX के साथ एक स्वचालित अद्यतनर

<datetime class="hidden">2025-04-23T19:30</datetime>

<!--category-- Javascript, HTMX, Alpine.js, ASP.NET Core -->
# परिचय

तो क्या एक श्रृंखला बन रहा है में, एक कार्य परियोजना में...... मैं एक आंशिक के लिए स्वचालित- अप अद्यतन की क्षमता जोड़ना चाहता था एक दिए गए समय स्केल पर।

मैं यह Ajjs और HMMX का उपयोग कैसे किया है.

[TOC]

# आवश्यकताएँ

तो मैं यह होना चाहता था

1. रीकरेबल; तो यह सरल होना चाहिए और स्वयं को किसी भी तत्व को स्वचालित अद्यतन करने के लिए पर्याप्त कवर किया जाना चाहिए.
2. इसे मौजूदा यूआरएल पैरामीटर्स का आदर करना चाहिए
3. यह आपके सर्वर साइड को पता लगाने योग्य होना चाहिए (यूपीएस में. इस उदाहरण में जिसका उल्लेख किया गया है)
4. यदि इसे चालू किया जाता है तो इसे सक्षम किया जाना चाहिए *उस अंत- बिन्दु के लिए* केवल और यह निवेदन के बीच याद किया जाना चाहिए.
5. यह तत्काल अद्यतन करना चाहिए जब सक्षम किया जाता है (इसलिए उपयोक्ता जानता है कि यह कैसा दिखता है)
6. उपयोक्ता द्वारा बन्द किया जा सकता है
7. पृष्ठ में शामिल होने के लिए सरल होना चाहिए ।

इस बात को मन में रखते हुए मैंने एक छोटा - सा इनकार करनेवाले मॉड्यूल बनाना शुरू कर दिया ।

## ग़ौर किया जा रहा है

आप 'on और बंद' को स्वचालित कर सकते हैं और 'यादा' विशेषताओं को सिर्फ HMMMX के साथ काफी नहीं है.
उदाहरण के लिए; प्रयोग किया जा रहा है [एचएमएमएक्स ट्रिगर्स ](https://htmx.org/attributes/hx-trigger/) आप वास्तव में बहुत कुछ कर सकते हैं.

```html

<div id="campaignemail-request-list" hx-get="@Url.Action("List", "CampaignEmailRequest")" hx-trigger="every 30s" hx-swap="innerHTML">
    <partial name="_List" model="@Model"/>
</div>
```

इन्हें धन्यवाद [@Kididhikakakh](https://khalidabuhakmeh.com/) इस बात का इशारा करने के लिए।

यह कोड वास्तव में उपयोग में आता है `hx-trigger` स्वचालित अद्यतन सेट करने के लिए. HMMMX गुणों को कॉन्फ़िगर करने के लिए सिर्फ एक आगामी का प्रयोग करें.

यह कैसे जोड़ता है यह उपयोगकर्ता संपर्क ग्राहक पक्ष है, जो एक अनपेक्षितता है. js बहुत अधिक है.

# कोड

इस के लिए कोड वास्तव में सुंदर कड़ी है, यह दो मुख्य भागों में टूट गया है; एक जेएस मॉड्यूल, घटना हैंडलर्स और एचटीएमएल.

## मोड्यूल

मॉड्यूल एक सरल इनकारक मॉड्यूल है जो आक्वेंशन प्रयोग करता है.js ऑटो- अप अद्यतन की स्थिति का प्रबंधन करने के लिए। यह निवेदन के बीच स्वचालित अद्यतन की स्थिति को याद करने के लिए स्थानीय भंडारण का उपयोग करता है.

यह मुखात स्वीकार करता है:

- `endpointId` - अद्यतन किया जाने वाला तत्व का आईडी
- `actionUrl` - यूआरएल को तत्व अद्यतन करने के लिए बुलाया जाना है
- `initialInterval` - स्वचालित अद्यतन के लिए प्रारंभिक अंतराल (डिफ़ॉल्ट 30 सेकेंड है)

हम यह भी देख सकते हैं कि यह कुछ कुंजियों का उपयोग करता है; ये स्थानीय भंडारण के लिए इस्तेमाल किया जाता है ऑटो- अप अद्यतन की स्थिति याद रखने के लिए।
आप देख सकते हैं कि मैं इस्तेमाल करते हैं `actionurl` इस अंत बिन्दु विशिष्ट करने के लिए कुंजी के भाग के रूप में.

```javascript
export function autoUpdateController(endpointId, actionUrl, initialInterval = 30) {
const keyPrefix = `autoUpdate:${actionUrl}`;
const enabledKey = `${keyPrefix}:enabled`;

    return {
        autoUpdate: false,
        interval: initialInterval,

        toggleAutoUpdate() {
            const el = document.getElementById(endpointId);
            if (!el) return;

            const url = new URL(window.location.href);
            const query = url.searchParams.toString();
            const fullUrl = query ? `${actionUrl}?${query}` : actionUrl;

            const wasPreviouslyEnabled = localStorage.getItem(enabledKey) === 'true';

            if (this.autoUpdate) {
                el.setAttribute('hx-trigger', `every ${this.interval}s`);
                el.setAttribute('hx-swap', 'innerHTML');
                el.setAttribute('hx-get', fullUrl);
                el.setAttribute('hx-headers', JSON.stringify({ AutoPoll: 'auto' }));

                localStorage.setItem(enabledKey, 'true');

                htmx.process(el); // rebind with updated attributes
                
                if (!wasPreviouslyEnabled) {
                    htmx.ajax('GET', fullUrl, {
                        target: el,
                        swap: 'innerHTML',
                        headers: {AutoPoll: 'auto'}
                    });
                }
            } else {
                el.removeAttribute('hx-trigger');
                el.removeAttribute('hx-get');
                el.removeAttribute('hx-swap');
                el.removeAttribute('hx-headers');

                localStorage.removeItem(enabledKey);
                htmx.process(el);
            }
        },

        init() {
            this.autoUpdate = localStorage.getItem(enabledKey) === 'true';
            this.toggleAutoUpdate();
        }
    };
}
```

### `toggleAutoUpdate()` विधि

यह विधि HMMX के उपयोग से लक्ष्य एचटीएमएल तत्व के स्वचालित पोलिंग सक्षम या अक्षम करता है.

### व्यवहार

- इसके अवयव को इसके तत्व से चुनें `endpointId`.
- निवेदन यूआरएल बिल्ड करता है (.`fullUrl`दिए गए संयोजन के द्वारा `actionUrl` वर्तमान पृष्ठ के क्वैरी वाक्यांश के साथ.
- चेक करें यदि इससे पहले निकाला जा रहा है जो पढ़ने के द्वारा सक्षम किया गया था `localStorage` (जब ब्राउज़र सत्रों के बीच याद दिलाया जाता है)

#### कब `this.autoUpdate` है `true` ( एस., सर्वेिंग सक्षम है):

- तत्व पर HMAX गुण सेट करता है:
  - `hx-trigger` प्रत्येक को सर्वे करने के लिए `interval` सेकण्ड
  - `hx-swap="innerHTML"` तत्व की सामग्री को बदलने के लिए
  - `hx-get` पोलिंग यूआरएल पर इंगित करने के लिए
  - `hx-headers` पसंदीदा जोड़ने के लिए `"AutoPoll": "auto"` शीर्षिका
- सक्षम अवस्था को सहेजें `localStorage`
- कॉल `htmx.process(el)` HMSX को नए गुणों को पहचानने के लिए
- अगर यह पहले से बंद था, तुरंत HMAX निवेदन चालू करता है के द्वारा `htmx.ajax()` (होमएक्स घटना पर भरोसा नहीं)

#### कब `this.autoUpdate` है `false` ( एस. एस.), सर्वेक्षण अक्षम होता है:

- ऊपर दिया गया HMMX गुण मिटाता है
- से सहेजा गया विन्यास साफ करता है `localStorage`
- कॉल `htmx.process(el)` HMMMX बर्ताव को अद्यतन करने के लिए फिर से सेट करें

### जब पहली बार सक्षम हो तो स्वचलित पोल

हम भी यहाँ में एक शाखा है जब पहली बार सक्षम किया गया है ऑटो-पोज को पूरा करने के लिए।

```javascript
const wasPreviouslyEnabled = localStorage.getItem(enabledKey) === 'true';
      if (!wasPreviouslyEnabled) {
                    htmx.ajax('GET', fullUrl, {
                        target: el,
                        swap: 'innerHTML',
                        headers: {AutoPoll: 'auto'}
                    });
                }
```

यह एक HMAX निवेदन करता है `fullUrl` प्रतिक्रिया के साथ लक्ष्य तत्व को अद्यतन करें. यह उपयोक्ता को दिखाने के लिए उपयोगी है कि स्वचालित अद्यतन क्या होगा जब वे इसे सक्रिय करते हैं.

## शीर्ष

आप भी हम एक HMAX हेडर को निवेदन के साथ भेज देंगे. यह महत्वपूर्ण है क्योंकि यह हमें निवेदन सर्वर साइड का पता लगाने की अनुमति देता है.

```javascript
   el.setAttribute('hx-headers', JSON.stringify({ AutoPoll: 'auto' }));
headers: {AutoPoll: 'auto'}

```

मेरे सर्वर के पक्ष में मैं तब इस हेडर को प्रयोग करने के लिए सेट किया जा रहा है

```csharp
 if (Request.Headers.TryGetValue("AutoPoll", out _))
        {
            
            
            var utcDate = DateTime.UtcNow;
            var parisTz = TimeZoneInfo.FindSystemTimeZoneById("Europe/Paris");
            var parisTime = TimeZoneInfo.ConvertTimeFromUtc(utcDate, parisTz);

            var timeStr = parisTime.ToString("yyyy-MM-dd HH:mm:ss");
              Response.ShowToast($"Auto Update Last updated: {timeStr} (paris)",true); 
         
            return PartialView("_List", requests);
        }
```

आप मैं सिर्फ के साथ हेडर के लिए देख देखेंगे `Request.Headers.TryGetValue("AutoPoll", out _)` और अगर यह वहाँ मैं जानता हूँ कि यह एक ऑटो-पोज़ निवेदन है।

मैं तो मौजूदा yme पकड़ (यह एक फ्रांसीसी ग्राहक के लिए है, तो मैं पेरिस समय के लिए परिवर्तन) और समय के साथ एक जाम दिखाने के लिए।

### टन दिखाएँ ( _T)

वह `ShowToast` विधि एक साधारण विस्तार विधि है जो HMMMX को एक जाम संदेश दिखाने के लिए ट्रिगर करता है.

```csharp
    public static void ShowToast(this HttpResponse response, string message, bool success = true)
    {
        response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
        {
            showToast = new
            {
                toast = message,
                issuccess =success
            }
        }));

    }
```

यह तब मेरी HMMAX बॉट अवयव द्वारा पता चला है जो संदेश दिखाता है.

```javascript
document.body.addEventListener("showToast", (event) => {
    const { toast, issuccess } = event.detail || {};
    const type = issuccess === false ? 'error' : 'success';
    showToast(toast || 'Done!', 3000, type);
});

```

यह तब मेरे पैरेंट घटक मैं में कॉल करता है [यहाँ लिखा है ](https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx).

### इसे बंद कर दो

यह आपकी मुख्य सूची में, इस मॉड्यूल को हुक करने के लिए बहुत सरल है.

```javascript
import './auto-actions';

window.autoUpdateController = autoUpdateController; //note this isn't strictly necessary but it makes it easier to use in the HTML


//Where we actually hook it up to Alpine.js
document.addEventListener('alpine:init', () => {
    Alpine.data('autoUpdate', function () {
        const endpointId = this.$el.dataset.endpointId;
        const actionUrl = this.$el.dataset.actionUrl;
        const interval = parseInt(this.$el.dataset.interval || '30', 10); // default to 30s

        return autoUpdateController(endpointId, actionUrl, interval);
    });
});

```

फिर हम अपिक में विधि कहते हैं. नैट रावर कोड:

## एनईएस.नेट राजेर कोड

इसे छोटा बनाने के लिए...... संभव के रूप में वापस आने वाले कोड बहुत सरल है.

यहाँ पर आप देख सकते हैं कि Ajjs डेटा गुण जिन्हें स्वतः अद्यतन करने के लिए सेट किया जा सकता है.

- एक्स- डाटा: यह है जहाँ हमने आक्वेंशन को स्थापित किया है.js डेटा ऑब्जेक्ट.
- एक्स-in: यह है जहां हम ऑटो- अप नियंत्रण पर विधि कहते हैं.
- x-on: बदले में: यह वहीं है जहाँ हम टॉगल अद्यतन विधि को स्वचालित अद्यतन नियंत्रण पर बुला रहे हैं.
- डाटा- मानक- आईडी: यह तत्व का आईडी है जिसे अद्यतन किया जाना है.
- डाटा- निर्देश- कर्ल: यह यूआरएल तत्व को अद्यतन करने के लिए बुलाया जा रहा है.
- आँकड़ा सेटिंग: यह अंतराल है जिसे स्वचालित अद्यतन के लिए प्रयोग किया जाना है (डिफ़ॉल्ट 30 सेकेंड है).

आप हम लक्ष्य को उपयोग के लिए निवेदन के लिए सेट देखेंगे `campaignemail-request-list` तत्व. यह तत्व है जो नई अंतर्वस्तु के साथ अद्यतन किया जाएगा.
यही कारण है कि फिर पृष्ठ में कुछ विस्तार शामिल है।

अब जब चेक किया जाता है तो यह सभी 30 सेकेंड की सूची को स्वचालित अद्यतन करेगा.

```html
            <div class=" px-4 py-2 bg-base-100 border border-base-300 rounded-box"
                x-data="autoUpdate()" 
                x-init="init"
                x-on:change="toggleAutoUpdate"
                data-endpoint-id="campaignemail-request-list"
                data-action-url="@Url.Action("List", "CampaignEmailRequest")"
                data-interval="30"
                >
                <label class="flex items-center gap-2">
                    <input type="checkbox" x-model="autoUpdate" class="toggle toggle-sm" />
                    <span class="label-text">
                        Auto update every <span x-text="$data.interval"></span>s
                    </span>
                </label>
            </div>

        <!-- Voucher List -->
        <div id="campaignemail-request-container">
            <div
                id="campaignemail-request-list">
                <partial name="_List" model="@Model"/>
            </div>
        </div>
```

# ऑन्टियम

और यह बहुत सरल है. एल.एल.एल.एस.) एक सरल स्वचालित स्वचालित अद्यतन घटक बनाने के लिए हम आसानी से उपयोग कर सकते हैं