featured」タグアーカイブ

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

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

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