vite websocket 公網 端口 連接異常問題

vite websocket 端口連接異常問題

 

在vite websocket 開發時，可能會遇到端口是寫死的，如果公網地址或域名 跟 代碼本地的端口不一致，websocket 會出現連接異常的情況

在瀏覽器調試中可以發現瀏覽器使用 ws://公網地址或域名:本地端口 或 wss://公網地址或域名:本地端口  去連服務器。

 

傳統網絡架構中，大家習慣於服務通過 防火牆 或者 代理服務器 發布出去，而且本地服務端口跟發布出去的公網地址端口往往不一致。

比如本地3000 或 24678 ，發布出去通常會用http 80 或 https 443。

關於此問題 vite 在 2021.5.29 之后的版本應該都已經解決

 

官方說明 

詳細可以參考大佬在 github 關於此 功能 or bug 的討論和 merge 過程：

https://github.com/vitejs/vite/pull/3578

官方配置說明參考如下：

https://vitejs.dev/config/#server-hmr

關於clientport 說明

clientPort 是一個高級選項，只在客戶端的情況下覆蓋端口，這允許你為 websocket 提供不同的端口，而並非在客戶端代碼中查找。如果需要在 dev-server 情況下使用 SSL 代理，這非常有用。

當使用 server.middlewareMode 或 server.https 時，你需將 server.hmr.server 指定為你 HTTP(S) 的服務器，這將通過你的服務器來處理 HMR 的安全連接請求。這在使用自簽證書或想通過網絡在某端口暴露 Vite 的情況下，非常有用。

 

關於解決方案

升級vite，在server.hmr中添加clientport，示例如下，主要內容就是加黑加粗部分。

{
        server: {
            host: true,
            port: 23456,
            open: true,
            proxy: {
                '/api': {
                    target: process.env.SERVER_URL,
                    changeOrigin: true,
                },
            },
 hrm: { clientPort: 80 }
        },
}

 

另外nginx 代理ws 或wss 需要格外添加配置，參考文章

nginx 代理 wss/ws websocket 協議