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

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

参考リンク

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は上書きされてしまう。

参考リンク

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

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

参考リンク

NuxtJS – 自作のmoduleを作成する

はじめに

UI/UXの設計やプロトタイプ作成してイメージを具現化し仮説検証していくプロセスを効率的に回せるようになりたいという目的でフロントエンドを触り出してから、NuxtJSを学んでいます。

今回は、NuxtJSでの自作したライブラリをモジュールとして使う方法について整理してみました。コンポーネント共通で使用するアプリ用のモジュールはどうすべきか?というところから来ています。NuxtJSには、communityから提供されるmoduleと同じように自前のモジュールをロードしてアプリケーション内で使用可能になるようなので、その仕組みを使って自作モジュールを作成していきます。

理解の誤りがあるかもしれませんので記述内容については個人の責任のもと判断ください。

NuxtJSのビルドの流れ

以下のソースを参考に、ssrモードでnuxt run devを実行した時の大まかな流れを掴んでおきます。

https://github.com/nuxt/nuxt.js/blob/2.x/packages/cli/src/commands/dev.js

  • Nuxtインスタンスの作成と初期処理(ready)
    • moduleのreadyはここで実行される。
      moduleのhandlerが実行される(実行コンテキストはModuleContainerインスタンスでnuxt.config.jsで指定したmoduleのオプションが引数に渡される)
  • Server インスタンスの作成と初期処理(ready)
    • VueRendererインスタンスの作成と初期処理(ready)
      • manifestファイルなどを読む(dev時はmemoryfsから)
  • Serverのlisten
  • バナーの表示
  • ビルド
    • .nuxtディレクトリにアプリケーションリソースをgenerate
    • webpackビルド

モジュールでできること

プラグインやビルド、serverMiddleWare、フックなどの機能を提供することができます。

NuxtJSでモジュールを作成する

単純な出力だけを行なうモジュールを作成し、モジュール作成のイメージをつかみます。

モジュールのファイル構成

作成するモジュールの構成は以下のとおり。

moduleによって構成は異なると思いますが、ここでは以下の構成としてみます。

  • index.jsは、module機能を使えるようにする定義を書く
  • plugin.jsは、Componentなどでモジュール内の機能を使用可能にする定義を書く
  • mymodule.jsは、プラグイン機能の本体を書く

モジュールを利用可能にする

まず、mymoduleをNuxtJSでロードし利用可能な状態にします。nuxt.config.jsに以下のような定義を書くことで、moduleがロードされるようになります。

オプションがある場合は以下のようにして渡すことができます。

なお、他にも以下のような書き方もできます。

モジュールを作成する

index.js

index.jsでは、オプションのマージ、hookでビルドされるテンプレートファイルをダンプ、プラグインファイル及びテンプレートファイルを追加しています。プラグインで登録しているファイルはnuxtの実行時にimportされます。

plugin.js

ここでは、inject関数を呼び、コンポーネントなどからthis.$mymoduleのように呼び出せるようにします。

mymodule.js

hello関数が登録されたオブジェクトを定義します。moduleはテンプレートファイルとしてコンパイルされるので、オプションの値を元に生成するソースを可変にもできます。

componentからmymoduleを呼び出す

npm run devで起動してブラウザ画面を開くと、以下のような画面が表示されることを確認できます。

まとめ

  • モジュール機構で自作のライブラリをNuxtアプリケーションに組み込み、コンポーネントなどから利用できる。
  • モジュールを使用するには、nuxt.config.jsのmodulesで定義する。
  • addTemplateやaddPluginで追加したリソースは、テンプレートとしてコンパイルされる。

参考リンク

 

NuxtJS – storeのnuxtServerInitアクションの実行

最近はフロントエンド開発の技術に触れています。

NuxtJSのSSRモードで、storeのnuxtServerInitアクションの実行について勘違いしてしまっていた。事象は、ログインセッションがあるのにログインされていないと判断されログインページに飛んでしまうというもの。nuxtServerInitアクションが実行されていない?となり改めてドキュメントを見ると、nuxtServerInitアクションはプライマリモジュールのみが受けとると書いてあった(ちゃんと読めですね。。)

Only the primary module (in store/index.js) will receive this action. You’ll need to chain your module actions from there.

– https://nuxtjs.org/docs/2.x/directory-structure/store

複数のstoreモジュールでのnuxtServerInitの実行

間違いの書き方

以下の例では、サブモジュールでnuxtServerInitを実行しようとしています。しかし、dispatchされないので動きません。

正しい書き方

プライマリモジュールからuser namespaceのmutationsを呼びます。グルーバルのnuxtServerInitが呼ばれるので期待どおり動作します。

ソースの確認

nuxtのソースを見ると以下のようになっており、グローバルのnuxtServerInitが呼ばれています。

まとめ

  • nuxtServerInitアクションは、プライマリモジュールで指定する。
  • チェーンする場合は、プライマリモジュールから呼び出す。

参考リンク

  • https://nuxtjs.org/docs/2.x/directory-structure/store
  • https://qiita.com/erukiti/items/75792f5fd4d993de3f2f