7. Beispiel [nuxt-04]: Aufrechterhaltung einer Client-Server-Sitzung

Das Projekt [nuxt-04] befasst sich mit dem Problem der Aufrechterhaltung einer Client-Server-Sitzung. Wir greifen das Projekt [nuxt-03] mit den folgenden Änderungen wieder auf:

• Die Seite [index] verfügt über eine Schaltfläche, mit der der Zähler des Stores [Vuex] erhöht werden kann;
• Die Seite [page1] bleibt unverändert;
• Es soll so sein, dass der Server, wenn eine Seite manuell vom Server angefordert wird, die angeforderte Seite zusammen mit einem Store [Vuex] zurücksendet, dessen Zählerwert dem letzten Wert entspricht, den dieser auf der Client-Seite hatte;

Das Projekt [nuxt-04] wird zunächst durch Kopieren des Projekts [nuxt-03] erstellt:

Nur die Seite [index] ändert sich:

<!-- Seite [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- Navigation -->
    <Navigation slot="left" />
    <!-- Meldung-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- Schaltfläche -->
      <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',
  // verwendete Komponenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // Lebenszyklus
  beforeCreate() {
    // Client und Server
    console.log('[home beforeCreate]')
  },
  created() {
    // Client und Server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // nur Client
    console.log('[home beforeMount]')
  },
  mounted() {
    // nur Client
    console.log('[home mounted]')
  },
  // Ereignisverwaltung
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // Zähler um 1 erhöhen
      this.$store.commit('increment', 1)
      // Änderung des angezeigten Werts
      this.value = this.$store.state.counter
    }
  }
}
</script>

• Zeile 10: Es wurde eine Schaltfläche hinzugefügt, um den Zähler der Jalousie [Vuex] zu erhöhen;
• Zeile 54: Die Methode, die den [clic] über die Schaltfläche [Incrémenter] verwaltet;
• Zeile 57: Der Zähler der Jalousie wird um 1 erhöht;
• Zeile 59: Der Wert des Zählers wird der Eigenschaft [value] zugewiesen, damit er in Zeile 8 angezeigt wird;

Das Projekt [nuxt-04] wird mit der folgenden Datei [nuxt.config.js] ausgeführt:

// Quellcode-Verzeichnis
  srcDir: 'nuxt-04',
  // Router
  router: {
    // Stammverzeichnis der URL-Dateien der Anwendung
    base: '/nuxt-04/'
  },
  // Server
  server: {
    // Dienstport, standardmäßig 3000
    port: 81,
    // Abgehörte Netzwerkadressen, standardmäßig localhost: 127.0.0.1
    // 0.0.0.0 = alle Netzwerkadressen des Rechners
    host: 'localhost'
}

Bei der Ausführung wird zunächst folgende Seite angezeigt:

Durch mehrmaliges Klicken auf die Schaltfläche [3] erhält man die folgende neue Seite:

Wenn man den Link [3] verwendet, erhält man die folgende Seite:

• Bei [2] zeigt die Seite [page1] [1] den Zählerstand korrekt an;

Aktualisieren wir nun die Seite mit [3]. Die neue Seite sieht wie folgt aus:

• Bei [2] ist der aktuelle Zählerstand verloren gegangen. Er ist auf seinen Ausgangswert zurückgesetzt worden;

Dieses Ergebnis ist völlig nachvollziehbar, wenn man sich die Logs ansieht:

• In [1] hat der Server die Funktion [nuxtServerInit] erneut ausgeführt. Diese lautet jedoch wie folgt:

/* eslint-disable no-console */
export const state = () => ({
   // Zähler
  counter: 0
})

export const mutations = {
   // Erhöhung des Zählers um einen Wert [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // Wer führt diesen Code aus?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // Wir warten auf das Ende eines Promises
    await new Promise(function(resolve, reject) {
       // Normalerweise gibt es hier eine asynchrone Funktion
       // Wir simulieren sie mit einer Wartezeit von einer Sekunde
      setTimeout(() => {
         // Erfolg
        resolve()
      }, 1000)
    })
     // Der Speicher wird geändert
    store.commit('increment', 53)
     // Protokoll
    console.log('nuxtServerInit commit terminé')
  }
}

In Zeile 28 wird dem Zähler der Wert 53 zugewiesen.

Betrachten wir die Anfrage HTTP, die der Browser gestellt hat, als die Seite [page1] aktualisiert wurde:

Man sieht, dass der Client neben den Seiten [page1] und [1] eine Reihe von Skripten vom Server anfordert. Zu beachten sind die Skripte [pages_index, pages_page1], die zu den Seiten [index, page] gehören. Diese Skripte werden bei jeder Anfrage an den Server bereitgestellt, unabhängig davon, welche Seite angefordert wird;

In [1] wird die Seite [page1] mit der folgenden Anfrage HTTP vom Server angefordert:

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

Man sieht, dass diese Anfrage keine Informationen an den Server übermittelt. Dieser hat daher keine Möglichkeit, den Status des clientseitigen Stores [Vuex] zu ermitteln. Dazu hätte der Client ihm diese Information senden müssen.

Im folgenden Projekt [nuxt-05] verwenden wir ein Cookie, damit der Client Informationen an den Server senden kann, wenn dieser aufgerufen wird.