nuxt – 百吉のOnlyFuns

在nuxt裡起一個socket.io server與後續Apache的Proxy設定

最近隨著LiveTRA的MAU越來越高，怕Firebase RealtimeDatabase會產生一些額外的支出，開始萌生想把他拔掉的想法。RealtimeDatabase主要是負責傳遞顯示於時刻表最上方的警示訊息，平常不會顯示，但當台鐵發生什麼突發事件時，可以做到立即告知使用者的效果。總覺得拔掉有點可惜，又不想單純只用傳統API去撈，這樣就失去即時性。所以索性最後自己用socket.io刻一個socket server。

Nuxt Module

我的構想是，把socket server寫在跟前台同一個nuxt專案中，且當nuxt啟動（npm start）時，最好socket也能一起被啟動，這樣我就不用再另外去起socket server。

閱讀全文

Nuxt asyncData與fetch的不同

首先是關於this的使用，fetch 中的 this 指的就是component本身，asyncData 的this則是undefined。且fetch可以被component本身用

this.$fetch()

this.$fetch() 再次呼叫，而asyncData不行。

再來是顯示的效果。server-side render時感覺不出來，不過在client side render時，就有明顯差異。兩者分別運作的流程如下：

使用 asyncData 會經過的流程

點擊連結 -> asyncData() -> 組件建立完成 -> render畫面（換頁）

使用 fetch 會經過的流程

點擊連結 -> 組件建立完成 -> render畫面（換頁） -> fetch()

使用asyncData的話，會先取資料，取完資料才換頁。使用fetch的話，取資料前就會先換頁，等到資料取完後，才會填入資料。

閱讀全文

Nuxt Server-Middleware

前陣子需要利用server middleware做fb oauth功能，於是我就在middleware資料夾新增了fbauth.js，內容：

	export default async function (req, res, next) {
	var querystring = require('querystring')
	var axios = require('axios')

	var query = querystring.parse(req._parsedOriginalUrl.query)
	var appId = query.appId
	var redirectUri = query.redirectUri.replace('#_=_', '')
	var code = query.code

	if (!appId \|\| !redirectUri \|\| !code) {
	// response fail
	res.writeHead(404, { 'Content-Type': 'application/json' })
	res.end(JSON.stringify({ msg: 'Login Failed' }))
	return false
	}

	try {
	// get access token
	var clientSecret = process.env.FB_APP_SECRET
	var url = `https://graph.facebook.com/v6.0/oauth/access_token?client_id=${appId}&redirect_uri=${redirectUri}&client_secret=${clientSecret}&code=${code}`
	var result = await axios.get(url)
	var token = result.data.access_token
	// get userid
	var useridUrl = `https://graph.facebook.com/me?&access_token=${token}`
	var uinfo = await axios.get(useridUrl)
	var uid = uinfo.data.id
	// response success
	res.writeHead(200, { 'Content-Type': 'application/json' })
	res.end(JSON.stringify({ token: token, uid: uid }))
	} catch (e) {
	// response fail
	res.writeHead(404, { 'Content-Type': 'application/json' })
	res.end(JSON.stringify({ msg: 'Auth Failed' }))
	}
	}

view raw fbauth.js hosted with ❤ by GitHub

結果build完之後，發現clientSecret竟然也一起打包進client端的js裡！！

於是我查了關於如何不將code打包進client side的資料後，就在外面包了一層 if (process.env.VUE_ENV === ‘server’) 如下：

閱讀全文