Nuxtでプレゼンツールが作れないもんかと試してみたときにたどり着いた副産物。
作ったのはこれ。(数ヶ月前に作ってもう飽きてる
スクショ
TL;DR
- Nuxtをexpressのmiddlewareで動かす
- コンテンツの取得はexpressでAPI
- ファイルの監視はchokidar
- クライアントへの通知にServer Sent Events
プレゼンツールの概要
もろもろ
- Nuxtはexpressのmiddlewareとして動かす
- スライドは
---
でページ区切り - Markdownのパースとかはexpress側でやる
- パースした内容はAPIで取得
/talks/awesometalk/2
みたいな感じでページごとに取得
Markdownが更新されたら再レンダリングしたい
本題。Markdownの更新をトリガーにAPIから再fetchして画面を更新したい。
使ったのはServer Sent Events (SSE)
その辺りのソースはこれ
https://github.com/nakajmg/vresentation/blob/master/scripts/devServer.js
- expressでSSE用のエンドポイント作る
- chokidarでMarkdownディレクトリを監視
- クライアントから
EventSource
を作成。通知を受け取ったら再fetch
https://github.com/nakajmg/vresentation/blob/master/store/actions.js#L23-L34
EventSource
はVuexのactionsで作成するようにした。
async [types.WATCH_MARKDOWN]({ commit, state }) { if (!es) { es = new EventSource('/stream') es.addEventListener('updated', async ({ data }) => { const { slug } = JSON.parse(data) if (slug !== state.slug) return const filePath = baseURL(`/${state.slug}/${state.page}`) const response = await request(filePath) return commit(types.SET_RESPONSE, response) }) } },
これでNuxtの監視してないファイルの更新をトリガーにして再レンダリング成功
Nuxt便利
VuePressみたいなツール、Nuxt使えばわりと低コストで作れそうだなという感触。
SSR環境を自前でつくるの、思ってるより数倍はめんどくさいから、Nuxt使って楽していこう。