Vue使用WebSocket第三方插件vue-socket.io連接ws踩坑記錄

Vue里面要使用WebSocket，Google度娘出來一堆，全部都是推薦vue-socket.io

好吧，即使大家都推薦了，那咱也用吧。

然后所有的文章里面一開始的配置信息就是

Vue.use(new VueSocketIO({

  debug: true,

  connection: ' http://127.0.0.1:30000', 

  options: { path: "/" }

}))

 

看到奇怪的地方沒有，為什么是http，不應該是ws或者wss嗎？

實際跑起來后，發送的也是http請求，而不是ws請求，

網上文章都沒找到相關的問題的。

好咱想自己給他換下唄

connection: ' ws://127.0.0.1:30000', 

或者是網上文章講的

connection:SocketIO('ws://127.0.0.1:30000')

然后再跑，可是還是發現，他走的是http協議，並不是ws協議。

 

要瘋了。。。

后面終於在這篇文章里 https://www.jianshu.com/p/0d20a032d0ec找到了答案
里面也遇到了這樣的問題，具體摘錄如下：

然后測試，創建連接 var socket = io(url);，這樣創建的鏈接，Socket.IO默認是按輪詢方式發起的http請求（很奇怪，當前瀏覽器明明是支持websocket的），這樣首先就出現了前面的http跨域請求報錯。
XMLHttpRequest cannot load http://192.168.0.239:9000/socket.io/?EIO=3&transport=polling&t=LbjddEK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
查閱資料，創建連接的時候，可以指定參數 io(WS_URL, {transports: ['websocket', 'polling', 'flashsocket']})，設置其發起websocket鏈接，這樣在console里看到的確實是發起的ws請求，

作者：七寶琥珀
鏈接：https://www.jianshu.com/p/0d20a032d0ec
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

所以正確的配置代碼如下：

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({

  debug: true,

  connection: 'ws://127.0.0.1:30000',  

  options: { path: "/",  transports: ['websocket', 'polling', 'flashsocket'] }

}))