7. مثال [nuxt-04]: الحفاظ على جلسة عمل العميل/الخادم

يتناول المشروع [nuxt-04] مشكلة الحفاظ على جلسة عمل العميل/الخادم. نستأنف المشروع [nuxt-03] مع التعديلات التالية:

• ستحتوي الصفحة [index] على زر يسمح بزيادة عداد المخزن [Vuex]؛
• تبقى الصفحة [page1] دون تغيير؛
• نرغب في أنه عند طلب صفحة يدويًا من الخادم، يقوم الخادم بإرجاع الصفحة المطلوبة مع مخزن [Vuex] الذي سيكون لقيمته العداد، آخر قيمة كان عليها من جانب العميل؛

تم إنشاء المشروع [nuxt-04] في البداية عن طريق نسخ المشروع [nuxt-03]:

تتغير الصفحة [index] فقط:

<!-- الصفحة [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- التنقل -->
    <Navigation slot="left" />
    <!-- رسالة-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- زر -->
      <b-button @click="incrementCounter" class="ml-3" variant="primary">Incrémenter</b-button>
    </template>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
export default {
  name: 'Home',
  // المكونات المستخدمة
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // دورة الحياة
  beforeCreate() {
    // العميل والخادم
    console.log('[home beforeCreate]')
  },
  created() {
    // العميل والخادم
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // العميل فقط
    console.log('[home beforeMount]')
  },
  mounted() {
    // العميل فقط
    console.log('[home mounted]')
  },
  // إدارة الأحداث
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // زيادة العداد بمقدار 1
      this.$store.commit('increment', 1)
      // تغيير القيمة المعروضة
      this.value = this.$store.state.counter
    }
  }
}
</script>

• السطر 10: تمت إضافة زر لزيادة عداد المتجر [Vuex]؛
• السطر 54: الطريقة التي تدير [clic] على الزر [Incrémenter]؛
• السطر 57: يتم زيادة عداد المتجر بمقدار 1؛
• السطر 59: يتم تعيين قيمة العداد إلى الخاصية [value] بحيث يتم عرضها في السطر 8؛

يتم تنفيذ المشروع [nuxt-04] باستخدام الملف [nuxt.config.js] التالي:

// دليل شفرة المصدر
  srcDir: 'nuxt-04',
  // الموجه
  router: {
    // جذر URL للتطبيق
    base: '/nuxt-04/'
  },
  // الخادم
  server: {
    // منفذ الخدمة، 3000 افتراضيًا
    port: 81,
    // عناوين الشبكة المستمعة، افتراضيًا localhost: 127.0.0.1
    // 0.0.0.0 = جميع عناوين الشبكة الخاصة بالجهاز
    host: 'localhost'
}

عند التنفيذ، تظهر الصفحة الأولى التالية:

عند استخدام الزر [3] عدة مرات، تظهر الصفحة الجديدة التالية:

إذا استخدمنا الرابط [3]، نحصل على الصفحة التالية:

• في [2]، تعرض الصفحة [page1] [1] قيمة العداد بشكل صحيح؛

الآن، لنقم بتحديث الصفحة باستخدام [3]. الصفحة الجديدة هي التالية:

• في [2]، فقدنا القيمة الحالية للعداد. لقد عدنا إلى قيمته الأولية؛

هذه النتيجة مفهومة تمامًا إذا نظرنا إلى السجلات:

• في [1]، أعاد الخادم تنفيذ الدالة [nuxtServerInit]. وهذه الدالة هي كما يلي:

/* eslint-disable no-console */
export const state = () => ({
   // العداد
  counter: 0
})

export const mutations = {
   // زيادة العداد بقيمة واحدة [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // من الذي ينفذ هذا الكود؟
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // ننتظر انتهاء وعد
    await new Promise(function(resolve, reject) {
       // عادة ما يكون لدينا هنا دالة غير متزامنة
       // نحاكيها بانتظار لمدة ثانية
      setTimeout(() => {
         // نجاح
        resolve()
      }, 1000)
    })
     // يتم تعديل المخزن
    store.commit('increment', 53)
     // سجل
    console.log('nuxtServerInit commit terminé')
  }
}

السطر 28 يعين القيمة 53 للعداد.

دعونا نفحص الطلب HTTP الذي أرسله المتصفح عند تحديث الصفحة [page1]:

نلاحظ أنه بالإضافة إلى الصفحتين [page1] و [1]، يطلب العميل عددًا من البرامج النصية من الخادم. تجدر الإشارة إلى البرامج النصية [pages_index, pages_page1] التي ترتبط بالصفحات [index, page]. يتم توفير هذه البرامج النصية مع كل طلب موجه إلى الخادم بغض النظر عن الصفحة المطلوبة؛

في [1]، يتم طلب الصفحة [page1] من الخادم بالطلب التالي HTTP:

GET http://localhost:81/nuxt-04/page1
Host: localhost:81
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

نلاحظ أن هذا الطلب لا ينقل أي معلومات إلى الخادم. وبالتالي، لا يملك الخادم أي وسيلة لمعرفة حالة المتجر [Vuex] من جانب العميل. كان من الضروري أن يرسل العميل هذه المعلومات إليه.

في المشروع التالي [nuxt-05]، نستخدم ملف تعريف ارتباط (cookie) حتى يتمكن العميل من إرسال المعلومات إلى الخادم عند الطلب.