2021.10.02この記事は約4分で読めます。Nuxt.jsでsocket.ioを使ったアプリケーションを作る続きです。前回、Nuxt.jsでsocket.ioライブラリを使うやり方について整理してみました。socket.ioライブラリを直接使う方法で、3つのアプローチで試してみました。Nuxt.jsでsocket.ioを使うやり方Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の3つのアプローチで記述してみます。m...debug-life.net2021.09.04今回は、Nuxt.jsでsocket.ioライブラリをすぐにアプリ内から使うことができる『nuxt-socket-io』というライブラリを使ってみたいと思います。外部ページ(nuxt-socket-io):https://nuxt-socket-io.netlify.app目次nuxt-socket-ionuxt-socket-ioのインストール使用方法サーバ側クライアント側チャネル参考リンクnuxt-socket-ionuxt-socket-ioライブラリは、socket.ioを使ったサーバ側、クライアント側のプログラムを実装しやすくするためのインターフェースを提供してくれています。具体的には、以下の特徴があるようです(公式Docより)。ioステータス自動エラーハンドリングデバッグロギング自動teardownvuexモジュール機能ダイナミックAPIサポートNuxtライタイムconfigのサポートミドルウェアの自動登録nuxt-socket-ioライブラリのサーバ側は内部的にはNuxtのlistenフックを使って実装されているようです。自分でlistenフックを使って実装するのもよいと思いますが、ライブラリを使うとconfiurationや利用が少し楽になるかと思います。最小限の設定は以下のような感じになるかと思います。'http://localhost:3000',},],}}modulesでnuxt-socket-ioを定義します。これにより、プラグインとして$nuxtSocketが使えるようになるとともに、サーバ側でのsocket.ioライブラリの利用が可能になります。RuntimeConfig、$nuxtSocketの引数で渡せます。サーバ側の定義は、modulesのオプションまたはioで定義します。サーバ側サーバ側の定義は、デフォルトで以下のパスに定義ファイルを置くことになっています。オプションで変えることができます。server/io.jsはデフォルトのネームスペースを指しています。'world'},})}middlewareは、io.useに渡されます。setIOは、ioオブジェクトの生成後に呼ばれるフックです。functionは、socket.onのハンドラになります。関数名がイベント名になります。返り値は、ackに渡されます。socketに対して自分でハンドラ定義をしたい場合は、以下のようにすると可能ではありますが、基本はreturnで関数定義が返されることを期待されている?ようです。resp})},}</script>チャネル異なるネームスペースを使用する場合の例です。server/io/chat.js定義はメインネームスペース(/)の場合と同じです。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でページ遷移時にページトップにスクロールするNuxt3でページ遷移時にページトップにスクロールさせる方法についてです。rc.13版にアップグレードしてみるとスクロールトップのオプションが入っているようでした。API)を使う引き続きNuxt3のトピックです。Vue3のUIフレームワークであるvee-validateの組み合わせでフォームのバリデーションを組んでみます。いうのも、vee-validate4の使用について少しハマってしまったので、その備忘録をかね...NuxtJSNuxt3でのビルド後の環境変数の適用(node-server)Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でno...NuxtJSNuxt3でマークダウンエディタを使う最近は個人的にnuxt3をよく触っています。練習としてちょっとしたアプリを作っているのですが、何らかの文書をマークダウンで扱えると文書構造を表現できて便利です。そこで、今回はnuxt3でマークダウンエディタを扱ってみます。nuxt3(vue...NuxtJSNuxtJS+socketioで認証フィルタをはさむ(passport)NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。今回試すことaxiosを使ってサーバAPIでログインし、その後socket.ioでweb...NuxtJSNuxt3でcodemirrorに絵文字ピッカーを追加する前回は以下の記事でNuxt3にマークダウンエディタのeasymdeを導入してみました。マークダウンで文字入力できるようになったら絵文字も入力したくなります。今回はマークダウンエディタに絵文字ピッカーを組み込んでみます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。読書ホーム検索トップサイドバータイトルとURLをコピーしました。