7. [nuxt-04] örneği: istemci/sunucu oturumunun sürdürülmesi

[nuxt-04] projesi, istemci/sunucu oturumunun sürdürülmesi sorununu ele almaktadır. [nuxt-03] projesini aşağıdaki değişikliklerle devam ettiriyoruz:

• [index] sayfasında, [Vuex] sayıcısını artırmaya yarayan bir düğme bulunur;
• [page1] sayfası değişmeden kalacaktır;
• sunucuya bir sayfa manuel olarak istendiğinde, sunucunun istenen sayfayı, sayacın değeri olarak istemci tarafında son olarak bulunan değeri içeren bir [Vuex] deposu ile birlikte döndürmesini istiyoruz;

[nuxt-04] projesi, başlangıçta [nuxt-03] projesinin kopyalanmasıyla oluşturulur:

Yalnızca [index] sayfası değişir:

<!-- [index] sayfası -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinti -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- düğme -->
      <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',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // yaşam döngüsü
  beforeCreate() {
    // istemci ve sunucu
    console.log('[home beforeCreate]')
  },
  created() {
    // istemci ve sunucu
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // sadece istemci
    console.log('[home beforeMount]')
  },
  mounted() {
    // sadece istemci
    console.log('[home mounted]')
  },
  // olay yönetimi
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // sayaç değerini 1 artırma
      this.$store.commit('increment', 1)
      // görüntülenen değerin değiştirilmesi
      this.value = this.$store.state.counter
    }
  }
}
</script>

• 10. satır: [Vuex] mağazasının sayacını artırmak için bir düğme eklenmiştir;
• 54. satır: [Incrémenter] düğmesi üzerindeki [clic]'i yöneten yöntem;
• satır 57: mağaza sayacı 1 artırıldı;
• 59. satır: Sayaç değeri, 8. satır tarafından görüntülenebilmesi için [value] özelliğine atanır;

[nuxt-04] projesini aşağıdaki [nuxt.config.js] dosyasıyla çalıştırıyoruz:

// kaynak kod dizini
  srcDir: 'nuxt-04',
  // yönlendirici
  router: {
    // uygulamanın URL kök dizini
    base: '/nuxt-04/'
  },
  // sunucu
  server: {
    // hizmet bağlantı noktası, varsayılan olarak 3000
    port: 81,
    // dinlenen ağ adresleri, varsayılan olarak localhost: 127.0.0.1
    // 0.0.0.0 = makinedeki tüm ağ adresleri
    host: 'localhost'
}

Çalıştırıldığında görüntülenen ilk sayfa şöyledir:

[3] düğmesine birkaç kez basıldığında, aşağıdaki yeni sayfa görüntülenir:

[3] bağlantısı kullanıldığında, aşağıdaki sayfa görüntülenir:

• [2]'te, [page1] ve [1] sayfaları sayaç değerini doğru şekilde gösteriyor;

Şimdi, [3] ile sayfayı yenileyelim. Yeni sayfa şu şekildedir:

• [2] sayfasında, sayacın güncel değeri kayboldu. Başlangıç değerine geri döndük;

Günlük dosyalarına bakıldığında bu sonuç gayet anlaşılır:

• [1]'te, sunucu [nuxtServerInit] işlevini yeniden çalıştırdı. Oysa bu işlev şöyledir:

/* eslint-disable no-console */
export const state = () => ({
   // sayaç
  counter: 0
})

export const mutations = {
   // sayaç değerini bir artırma [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // bu kodu kim çalıştırıyor?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // bir sözün tamamlanmasını bekliyoruz
    await new Promise(function(resolve, reject) {
       // burada normalde asenkron bir işlev bulunur
       // bir saniye bekleyerek simüle ediyoruz
      setTimeout(() => {
         // başarılı
        resolve()
      }, 1000)
    })
     // depolama alanı değiştiriliyor
    store.commit('increment', 53)
     // günlük
    console.log('nuxtServerInit commit terminé')
  }
}

1. satırda sayaca 53 değeri atanır.

[page1] sayfasını yenilediğimizde tarayıcı tarafından yapılan HTTP isteğini inceleyelim:

Görüldüğü gibi, [page1] ve [1] sayfalarının yanı sıra, istemci sunucudan bir dizi komut dosyası talep ediyor. [pages_index, pages_page1] komut dosyalarının, [index, page] sayfalarıyla ilişkili olduğu dikkat çekmektedir. Bu komut dosyaları, istenen sayfa ne olursa olsun sunucuya yapılan her istekte sağlanır;

[1]'te, [page1] sayfası, aşağıdaki HTTP isteği ile sunucudan talep edilir:

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

Bu isteğin sunucuya hiçbir bilgi iletmediği görülüyor. Dolayısıyla sunucunun, istemci tarafındaki [Vuex] deposunun durumunu öğrenmesinin hiçbir yolu yoktur. Bunun için istemcinin bu bilgiyi sunucuya göndermesi gerekirdi.

Bir sonraki proje olan [nuxt-05]’te, sunucuya istek geldiğinde istemcinin sunucuya bilgi gönderebilmesi için bir çerez kullanıyoruz.