التفاضلية التحديثات AJAX لجدول HTML؟

Question

ولدي اللعبة التي تقوم على طاولة 25x20 HTML (لوحة اللعبة). كل 3 ثوان يمكن للمستخدم "نقل"، والذي يرسل طلب AJAX إلى الملقم، في الوقت الذي خادم rerenders جدول HTML كامل وإرساله إلى المستخدم.

وكان هذا من السهل الكتابة، ولكنه يضيع الكثير من عرض النطاق الترددي. هل هناك أي المكتبات، العميل (ويفضل مسج) أو من جانب الخادم، أن الفارق مساعدة أرسل بدلا من التحديثات الكاملة لجداول كبيرة؟ عادة فقط 5-10 البلاط تتغير على تحديث معين، لذلك أنا أشعر أنني قد يخفض استخدام عرض النطاق الترددي بأمر من حجم عن طريق إرسال فقط تلك البلاط بدلا من كل 500 كل 3 ثوان.

وأنا أيضا مستعد لسماع "يا غبي، لماذا أنت باستخدام جداول HTML" من نوع تعليقات إذا كنت يمكن أن تشير إلى بديل أفضل. على سبيل المثال هل هناك أي تقنيات التلاعب CSS / DOM أنني يجب أن يكون النظر بدلا من استخدام جدول HTML؟ هل يجب استخدام الجدول ولكن إعطاء إحداثيات كل الدفتيريا لمعرف (مثل "12x08") ومن ثم استخدام مسج لتحل محل الخلايا عن طريق معرف؟

وA التوضيح: البلاط والنص، وليس الصور

.

Answer 1

ويمكنك نموذج وحة اللعبة ك مجموعة جافا سكريبت متعددة الأبعاد:

[[x0, x1, x2, x3 ... xn],
.....
.....]

وكل دخول صفيف تمثل على التوالي. كل خلية تحمل القيمة العددية للعبة قطعة / مربع.

وهذا النموذج يمكن أن يكون "العقد" تقوم بإرسالها إلى الخادم عن طريق اياكس كما JSON. خادم بحساب نفس مجموعة وإرساله إلى واجهة المستخدم. يمكنك جعل ذلك مجموعة في جدول، عناصر div أو ما تريد. Prototype.js ومسج جعل خلق دتمل السوبر سهلة.

وهذا شكل مجموعة سيكون أصغر بكثير من استجابة HTML كلها محملة العلامات. كما أنه يتيح لك الحرية في تقديم لوحة في أي بالطريقة التي تريدها.

ويمكنك كذلك ضغط بهذا الشكل وفقط أرسل دلتا. على سبيل المثال: حفظ إحداثيات البلاط تغييرها من قبل المستخدم وإرسال تلك إلى الملقم:

[(x1, y2),.....(xn, yn)]

أو يمكنك أن تفعل ذلك على العكس من ذلك: أرسل مجموعة نموذج كامل إلى الخادم، ولها خادم حساب دلتا

تحقق من Sponty، ومشاهدة حركة المرور اياكس كل بضع دقائق أو نحو ذلك، ونحن نفعل شيء مشابه جدا: HTTP: //www.thesponty.com/ يرسل العميل نموذج كامل لخادم، والخادم يرسل بيانات الاختلاف.

Answer 2

إذا أنت تعرف الدولة بين بالتحديث على جانب الملقم (انظر التعليق على المسألة)، لك إرسال البيانات باستخدام JSON مثل ذلك (لست متأكدا حول بناء الجملة الصحيح):

[
    { x: 3, y: 5, class: "asdf", content: "1234" },
    { x: 6, y: 5, class: "asdf", content: "8156" },
    { x: 2, y: 2, class: "qwer", content: "1337" }
]

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

Answer 3

ودون التفكير في دلتا:

ويمكنك استخدام JSON بسهولة جدا أن تفعل هذا النوع من الشيء. يمكنك طرح شكل مضغوط الخاصة بك أيضا.

وأعتقد ضغط البيانات باستخدام غزيب من شأنه أن يساعد كثيرا. معظم المتصفحات يعتمد عليه في الوقت الحاضر، وسوف يقلل كثيرا من حجم ردودكم.