NuxtJS

NuxtJS + Socket.io + https

Edmond Yip

Edmond Yip

— 1 min read
NuxtJS + Socket.io + https

我希望在NuxtJS中以Socket.io為傳送資料的方式，不過功力有限連Socket.io都沒搞定。發現NuxtJS官方其實有實例是在https中運作。

不過事情當然沒這麼簡單，官方上沒有什麼說明，我也只好當成NuxtJS一樣安裝。

$ npm install nodemon

這個例子用了nodemon作管理，我也直接照用好了
先安裝一下

$ npm run dev

啟動看一下

Socket.io不能通過https，瀏覽器會就說Mixed Content，就是https的頁面要取資料一定要經https才安全。

解決方法

想到解決的方法有兩個

  • 把Socket.io變成https
  • 令到Socket.io不用https也能通過

經過一輪測試才找到方法

因為NuxtJS官方版本是用https的，我曾在nuxt.config.js內更改很多東西也不成，最後發現要修改如下

  env: {
    HOST_URL: process.env.HOST_URL || 'https://www.256pages.com'
  }

沒錯！就是把http://localhost直接換成你的https+domain

另外在Nginx中也要修改，在location/中加入

location / {
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
}

這下子Socket.io就可以順利通過https了。

可以觀看一下NuxtJS官方即時聊天室的例子。

Read more