コピー2021.11.17この記事は約3分で読めます。NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。今回試すことsocket.ioのロードサーバ側server/index.jsserver/session.jsserver/io.jsクライアント側pages/index.vue参考リンク今回試すことaxiosを使ってサーバAPIでログインし、その後socket.ioでwebsocketに接続する。やりたいことは、サーバAPIで開始したセッションをsocket.ioで引き継ぎ利用することである。これには、socket.ioのミドルウェアを使って開始済みのセッションを読み込めば、socket.ioのリクエストでセッションを扱える。気をつける点は、socket.ioのミドルウェア関数インターフェースがexpressのそれと異なっているので、正しく情報を引き継げるようミドルウェアをつないでやることである。具体的には、socket.ioのドキュメントにもあるとおり以下のようにすればよい。serverMiddlewareで、/apiにexpressのappをマウントする。Nuxtのlistenフックを使ってsocket.ioサーバを統合するための設定をmodulesに定義する。今回は動作検証のため、セッションはメモリストアを使っている。socket.ioとセッションストアを共有するため、共通の定義を使うようにしている。io}クライアント側クライアント側は、ログインしてセッション確認するだけのためのインターフェースにする。ログインしていない状態の時。ログインしてsocket.ioにつながった時。Viewテンプレートはveutifyを使う。pages/index.vueNuxtJSは、Universalモードで動かしているのでSSRを行なう。sessionは、asyncDataフックを使ってコンポーネントのdataに統合する。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でNuxt-Authモジュールを使って認証処理をつくる以前、以下の投稿で簡易な認証機能を試してみました。以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。自作のmoduleを作成するはじめにUI/UXの設計やプロトタイプ作成してイメージを具現化し仮説検証していくプロセスを効率的に回せるようになりたいという目的でフロントエンドを触り出してから、NuxtJSを学んでいます。今回は、NuxtJSでの自作したライブラリをモジュ...NuxtJSNuxt3でcodemirrorに絵文字ピッカーを追加する前回は以下の記事でNuxt3にマークダウンエディタのeasymdeを導入してみました。マークダウンで文字入力できるようになったら絵文字も入力したくなります。今回はマークダウンエディタに絵文字ピッカーを組み込んでみます。v...NuxtJSNuxt3でのビルド後の環境変数の適用(node-server)Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でno...NuxtJSNuxt3でマークダウンエディタを使う最近は個人的にnuxt3をよく触っています。練習としてちょっとしたアプリを作っているのですが、何らかの文書をマークダウンで扱えると文書構造を表現できて便利です。そこで、今回はnuxt3でマークダウンエディタを扱ってみます。nuxt3(vue...NuxtJSNuxt3でgoogle-fontsを使う異なるデバイスでもフォントを統一かつ綺麗で見やすいフォントを使いたい。今回はNuxt3でGoogleフォントを使う方法について記述します。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。