محرك أسعار الذهب اللحظي

بث تِك بتِك مثل مواقع تجّار السبائك، ومعايرة تجعل الرقم مطابقاً لسعر السوق المعتمد بفارق أقل من قرشين على الجرام. بلا مفتاح API وبلا اشتراك.

تحويل سعر الأونصة العالمي إلى سعر جرام محلي يبدو حسبة بسيطة: اضرب في سعر الصرف، اقسم على ٣١٫١٠٣، اضرب في نقاء العيار. لكن الرقم الناتج لا يطابق ما تعرضه مواقع تجّار السبائك المعتمدة، والفرق ليس عشوائياً — إنه فرق تاجر ثابت النسبة يختلف من عيار لعيار.

هذا المحرك يعالج المسألتين معاً: يثبّت المستوى على السعر الفوري الحقيقي، ويطبّق معامل معايرة مشتقّاً من مرجع السوق. النتيجة أدناه مقارنة فعلية بالأرقام.

١ · البيانات الحيّة الآن

٢ · المعايرة على السوق

ادخل سعر الجرام المعروض في المرجع الذي تعتمده — أي موقع تاجر سبائك — وسيشتق المحرك معامل المعايرة ويطبّقه على كل العيارات ويضعه في الكود.

٣ · اضبط التسعير

٤ · نتيجة التسعير

٥ · الشريط — نسختان

النسخة الأولى سعر السوق المعاير بلا هامش ربح.

النسخة الثانية سعر البيع = السعر المعاير + الهامش الذي ضبطته.

٦ · كيف تبني شريطاً متحركاً يحدّث بلا اهتزاز

الشريط المتحرك والتحديث المستمر يتعارضان افتراضياً. أي شريط يُبنى بالطريقة الشائعة — innerHTML مع @keyframes — سيقفز للبداية مع كل تحديث سعر، ويهتزّ أفقياً كلما تغيّر عدد خانات الرقم. ثلاث قواعد تحلّ المسألة كلها:

القاعدة الأولى — افصل الهيكل عن القيم

ابنِ عناصر الشريط مرة واحدة عند الإقلاع، واحتفظ بمرجع لكل خانة رقمية. عند وصول سعر جديد حدّث textContent للخانة فقط. لا تلمس innerHTML للحاوية مطلقاً بعد البناء الأول — لأن استبدال العقد يهدم أي حركة جارية عليها.

القاعدة الثانية — حرّك بـ rAF لا بـ CSS

حركة @keyframes لا يمكن استئنافها من موضعها بعد أي تغيير في الشجرة. البديل حلقة requestAnimationFrame تكتب transform مباشرة: تحتفظ بالموضع في متغيّر خارج الـDOM فلا يمسّه شيء، وتتوقف تلقائياً حين يُخفي المستخدم التبويب.

// كرّر المحتوى نسختين متطابقتين داخل المسار
// half = عرض النسخة الواحدة
let x = 0, last = 0;

function frame(t){
  const dt = Math.min(0.1, (t - last) / 1000);   // سقف يمنع القفزة بعد رجوع التبويب
  last = t;

  x += DIR * SPEED * dt;                         // DIR: -1 يسار · +1 يمين
  x = ((x % half) + half) % half - half;         // اللفّ الدائري — x يبقى في [-half, 0)

  track.style.transform = `translate3d(${x}px,0,0)`;
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

سطر اللفّ هو بيت القصيد: بدل أن نصفّر x عند النهاية — وهي القفزة المرئية — نُبقيه ضمن مدى واحد. ولأن النسخة الثانية مطابقة للأولى، فما يدخل من طرف مطابق تماماً لما خرج من الطرف الآخر، والعين لا ترى نقطة الدوران.

القاعدة الثالثة — ثبّت عرض الخانات الرقمية

هذا ما يُغفَل عادةً: انتقال السعر من 539.22 إلى 1039.22 يزيد عرض العنصر فتتزحزح كل العناصر بعده وتتغيّر نقطة اللفّ. الحل سطران في الـCSS:

.value{
  font-variant-numeric: tabular-nums;  /* كل رقم بعرض واحد */
  display: inline-block;
  min-width: 7ch;                      /* خانة محجوزة مسبقاً */
  text-align: center;
}

• حلقة واحدة لكل الأشرطة — لا rAF منفصلة لكل شريط، فذلك يضاعف عمل المتصفح بلا فائدة.
• translate3d لا left — الأولى تُنفَّذ على كرت الشاشة بلا إعادة تخطيط، والثانية تُعيد حساب الصفحة في كل إطار.
• إيقاف عند مرور المؤشر — يحتاج الزائر لحظة ليقرأ رقماً قبل أن يمرّ.
• احترام prefers-reduced-motion — بعض المستخدمين تسبّب لهم الحركة دواراً.
• أعد قياس العرض عند تغيّر المقاس فقط — مع الحفاظ على الموضع النسبي حتى لا يقفز الشريط عند تدوير الجوال.

٧ · الكود الجاهز بإعداداتك

…

٨ · كيف بُنيت أداة تجّار السبائك

فحصتُ صفحة التسعير المباشر لدى ديوان الذهب على مستوى الشبكة، وهذه بنيتها الفعلية:

الخلاصة: الجزء الظاهر معظمه ودجتات مجانية جاهزة — ما يميّزهم فعلاً هو شريط العيارات، وهو تطبيق .NET يشترك في تغذية سعرية مدفوعة ويبثّها للمتصفح لحظياً. هذا ما نعوّضه هنا بلا خادم ولا اشتراك.

٩ · رفع عدد التحديثات — نعم، وبثلاث طبقات

سؤالك عن رفع التحديثات في محلّه: المصدر الفوري لسعر الذهب مخزّن مؤقتاً ٣٠ ثانية، وهذا سقف لا يمكن كسره منه. الحل ليس بزيادة الطلبات، بل بفصل المستوى عن الحركة:

1. المرساة — سعر XAU الفوري وسعر الصرف والفضة، كل ٦٠ ثانية. هذه تحدد المستوى الصحيح.
2. البث — WebSocket على الذهب المرمّز PAXG في Binance: تِك بتِك، مجاني، بلا مفتاح، ويعمل ٢٤/٧ حتى في عطلة نهاية الأسبوع حين يُغلق سوق الذهب.
3. الدمج — السعر المعروض = المرساة × (سعر PAXG الآن ÷ سعره وقت المرساة). مستوى دقيق من سوق الذهب، وحركة لحظية من سوق مفتوح دائماً.

الذهب المرمّز يتبع السعر الفوري بفارق يقل عن ٠٫١٪، ولأننا نستخدمه كـنسبة حركة لا كمستوى، فحتى هذا الفارق يسقط من الحساب. وإن تعذّر الـWebSocket ينزل المحرك تلقائياً إلى استطلاع كل ٥ ثوانٍ، ثم إلى المصدر الاحتياطي، ثم إلى آخر سعر محفوظ.

١٠ · متى لا تصلح هذه الطريقة

• للسعر التعاقدي الملزم في الفواتير والتسويات — المرجع الرسمي هو تثبيت LBMA وليس أي سعر استرشادي.
• إن كان متجرك يسعّر يدوياً بسعر مثبّت يختلف عن السوق — سيناقض الشريطُ صفحاتِ المنتجات.
• المعايرة تُشتق مرة وتحتاج مراجعة — فرق التاجر يتغيّر عبر الشهور، راجعه كل فترة.
• في عطلة نهاية الأسبوع يتحرك الشريط على الذهب المرمّز بينما سوق الذهب مغلق، وقد يفتح الاثنين على مستوى مختلف.

١١ · قبل ما تسأل

ليش كانت الأسعار مختلفة قبل الإصلاح؟

خطآن تراكما: ضرب سعر الجرام في ٠٫٩٩٩ وهو أصلاً سعر ذهب نقي — خصمٌ مزدوج، وغياب معامل فرق التاجر. الفارق كان ‎−2.46 ريال على جرام عيار ٢٤. بعد الإصلاح صار ‎+0.01 ريال.

هل الـ WebSocket يستهلك من حصتي؟

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

وش يصير لو المصدر وقع؟

أربع طبقات: WebSocket ← استطلاع كل ٥ ثوانٍ ← مصدر احتياطي مستقل ← آخر سعر محفوظ في المتصفح. الشريط لا يظهر فارغاً.

كل كم أراجع المعايرة؟

مرة كل شهر تكفي. افتح المرجع، اقرأ سعر عيار ٢١، أدخله في قسم ٢، وقارن المعامل الناتج بالحالي — إن تحرّك أكثر من ٠٫١٪ حدّث الكود.

يشتغل على سلة وووردبريس؟

نعم، كتلة واحدة مستقلة بلا أي مكتبة خارجية. تعمل في أي منصة تقبل HTML مخصص.