NuxtJS」カテゴリーアーカイブ

crop faceless developer working on software code on laptop

Nuxt3をさわってみる

Nuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。

インストール

nuxiという新しいCLIを使う。

nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。

ディレクトリ構造

initした直後は以下の感じ。Nuxt2までのようなlayoutsやpagesのようなディレクトリがなく、プロジェクト作成直後はとてもすっきりしている。

ドキュメントを見ると、今までのようなlayoutsやpagesといったディレクトリは、Nuxt3でも有効であることが分かる。これらは、アプリの特性に合わせて作成すればよいのだと思う。なお、ディレクトリについては、pluginsディレクトリ下のプラグインファイルが自動で読み込まれるなど新しい点もあるので注意したい。

参考リンク

アプリ起動

この状態でrun devするとWelcomeビューが表示される。 

httpsオプションで自己署名証明書を使ってhttpsモードで起動ができる。Nuxt2では、nuxt.configのserverオプションで指定していたと思うけれど、この辺りとても簡単になっている。

Welcomeビューを変更するには、app.vueを編集するか、pages/index.vueのような新たなビューを作る。

srcDirの変更

公式ドキュメントにあるようなclientの下にアプリリソースを配置する構成にしてみる。ディレクトリを作成し、nuxt.configのsrcDirにclientリソースを格納するディレクトリを指定、そして今ままでのようなlayoutsやpagesにビューを作成する。

上記の変更を加え、改めてrun devしてみると以下のように作成したビューが表示されることを確認できる。

 

参考リンク

BoskampiによるPixabayからの画像

NuxtJS+socketioで認証フィルタをはさむ(passport)

NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。

今回試すこと

axiosを使ってサーバAPIでログインし、その後socket.ioでwebsocketに接続する。やりたいことは、サーバAPIで開始したセッションをsocket.ioで引き継ぎ利用することである。

これには、socket.ioのミドルウェアを使って開始済みのセッションを読み込めば、socket.ioのリクエストでセッションを扱える。気をつける点は、socket.ioのミドルウェア関数インターフェースがexpressのそれと異なっているので、正しく情報を引き継げるようミドルウェアをつないでやることである。具体的には、socket.ioのドキュメントにもあるとおり以下のようにすればよい。

socket.ioのロード

今回は、NuxtJSのmoduleのlistenフックを使ってsocket.ioサーバをnuxtのhttpサーバ に統合する。serverMiddlewareで、/apiにexpressのappをマウントする。また、Nuxtのlistenフックを使ってsocket.ioサーバを統合するための設定をmodulesに定義する。

サーバ側

今回は動作検証のため、セッションはメモリストアを使っている。socket.ioとセッションストアを共有するため、共通の定義を使うようにしている。

server/index.js

server/session.js

server/io.js

クライアント側

クライアント側は、ログインしてセッション確認するだけのためのインターフェースにする。以下のような感じ。

ログインしていない状態の時。

ログインしてsocket.ioにつながった時。

Viewテンプレートはveutifyを使う。

pages/index.vue

NuxtJSは、Universalモードで動かしているのでSSRを行なう。sessionは、asyncDataフックを使ってコンポーネントのdataに統合する。

検証用プログラムは以下

https://github.com/moritetu/nuxt-with-socket.io-passport

参考リンク

BoskampiによるPixabayからの画像

vuex-persistedstateによるstateデータの永続化

NuxtJSのSSRモードで、vuex-persistedstateによるデータ永続化を適用してしまいSSRのfetchライフサイクルでstoreに設定したデータが上書きされてしまった。これは、私がvuex-persistedstateの使用方法を誤っただけである。SSRモードで動かす場合は、クライアントサイドで永続化したいpathにのみ適用すべし(自分への戒め)。

stateが上書きされてしまったケース

具体的には以下のような使い方をしてしまっていた。

  1. vuex-persistedstateをpluginとしてロード
  2. クライアントサイドでstoreにデータ書き込み(この段階でlocalStorageにデータが書かれている)
  3. SSRでサーバサイドでfetch処理でstateにデータを書き込む

期待する動きは、3で初回ページアクセスしてサーバサイドでcommitしたstateがクライアントサイドで復元される、である。

しかし、3番目のステップでSSRで設定したstateデータがクライアントサイドで復元されると期待するものの、vuex-persistedstateプラグインの永続化処理により、以前にlocalStorageに書き込んだ値で上書きされてしまう、という訳である

プラグインロードのタイミング

NuxtJSでは以下のようにpluginとして組み込める。クライアント再度でpluginがロードされるタイミングは、ライフサイクルでは以下となる。

  • Receives the HTML
  • Loading assets (e.g. JavaScript)
  • client-side Nuxt plugin ★ここ
    • in order as defined in nuxt.config.js
  • Vue Hydration
  • Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
  • asyncData (blocking)
  • beforeCreate (Vue lifecycle method)
  • created (Vue lifecycle method)
  • The new fetch (top to bottom, siblings = parallel) (non-blocking)
  • beforeMount (Vue lifecycle method)
  • mounted (Vue lifecycle method)

引用:https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

Stateのrestoreのタイミング

サーバーサイドでcommitされたstateの情報は、ページアクセスのレスポンスデータの中でシリアライズされて送信される。そして、アプリケーション初期化のタイミングでstateに復元される。

store.replaceStateの復元段階では、まだプラグインの初期化はされていない。プラグインの初期化が呼ばれるのは、コメント // Plugin executionの以降になるので、上記で復元されたstateは上書きされてしまう。

参考リンク

NuxtJS

Nuxt.jsでsocket.ioを使うー nuxt-socket-ioライブラリ

Nuxt.jsでsocket.ioを使ったアプリケーションを作る続きです。

前回、Nuxt.jsでsocket.ioライブラリを使うやり方について整理してみました。socket.ioライブラリを直接使う方法で、3つのアプローチで試してみました。

Nuxt.jsでsocket.ioを使うやり方

今回は、Nuxt.jsでsocket.ioライブラリをすぐにアプリ内から使うことができる『nuxt-socket-io』というライブラリを使ってみたいと思います。

外部ページ(nuxt-socket-io):https://nuxt-socket-io.netlify.app

nuxt-socket-io

nuxt-socket-ioライブラリは、socket.ioを使ったサーバ側、クライアント側のプログラムを実装しやすくするためのインターフェースを提供してくれています。具体的には、以下の特徴があるようです(公式Docより)。

  • 複数のio socketのconfiguration
  • socket毎のnamespaceに対応したconfiguration
  • socket.ioのサーバ定義の自動登録
  • socket ioステータス
  • 自動エラーハンドリング
  • デバッグロギング
  • 自動teardown
  • vuexモジュール機能
  • ダイナミックAPIサポート
  • Nuxtライタイムconfigのサポート
  • ミドルウェアの自動登録

nuxt-socket-ioライブラリのサーバ側は内部的にはNuxtのlistenフックを使って実装されているようです。自分でlistenフックを使って実装するのもよいと思いますが、ライブラリを使うとconfiurationや利用が少し楽になるかと思います。

nuxt-socket-ioのインストール

使用方法

最小限の設定は以下のような感じになるかと思います。

nuxt.config.js

  • modulesでnuxt-socket-ioを定義します。これにより、プラグインとして$nuxtSocketが使えるようになるとともに、サーバ側でのsocket.ioライブラリの利用が可能になります。
  • 設定は、modulesのオプション、または、io: {} 、または、RuntimeConfig、$nuxtSocketの引数で渡せます。サーバ側の定義は、modulesのオプションまたはioで定義します。

サーバ側

サーバ側の定義は、デフォルトで以下のパスに定義ファイルを置くことになっています。このパスは、io: { servers: ... } オプションで変えることができます。server/io.jsはデフォルトのネームスペースを指しています。

server/io.js

  • middlewareは、io.useに渡されます。
  • setIOは、ioオブジェクトの生成後に呼ばれるフックです。
  • default functionは、socket.onのハンドラになります。関数名がイベント名になります。返り値は、ackに渡されます。

socketに対して自分でハンドラ定義をしたい場合は、以下のようにすると可能ではありますが、基本はreturnで関数定義が返されることを期待されている?ようです。

server/io.js

クライアント側

page/index.vue

チャネル

異なるネームスペースを使用する場合の例です。

server/io/chat.js

定義はメインネームスペース(/)の場合と同じです。

page/index.vue

参考リンク

  • https://nuxt-socket-io.netlify.app
  • https://www.npmjs.com/package/nuxt-socket-io
  • https://github.com/richardeschloss/nuxt-socket-io
NuxtJS

Nuxt.jsでsocket.ioを使うやり方

Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。

以下の3つのアプローチで記述してみます。

  1. moduleでserver.listenの上書き
  2. listenフック
  3. nuxt program

server.listenの上書き

これは、公式サンプルで書かれている内容です。

render:beforeフックの中で、listenメソッドを上書きしています。元々の処理では、protocolに応じたserverオブジェクトが作られlistenが呼ばれます。上記例では、プロトコルはhttpとしてserverオブジェクトを生成してsocket.ioライブラリに渡しています。

examples/with-sockets/io/index.js

引用)https://github.com/nuxt/nuxt.js/blob/dev/examples/with-sockets/io/index.js

listenフック

server.listenの以降で呼ばれるlistenフックを使います。serverは既にlistenが呼ばれています。

参考)https://stackoverflow.com/questions/63172001/where-do-i-add-this-websocket-code-in-the-new-nuxt-js-setup-since-it-does-not-ha

nuxt program

nuxtをプログラムから使用する方法です。これも、公式のサンプルに例があります。以下例では、公式サンプルを少し触っています。

参考)https://github.com/nuxt/nuxt.js/blob/dev/examples/with-sockets/server.js

server/index.js

server/io.js

サンプルプログラムは以下のとおり。

https://github.com/moritetu/nuxt-with-socket.io

参考リンク