之前以為websocket復(fù)雜，想使用插件來實(shí)現(xiàn)，查了一番資料，原生寫法就很簡(jiǎn)單。

項(xiàng)目需求

查詢列表，需要實(shí)時(shí)獲取員工上報(bào)的數(shù)據(jù)

代碼部分

Table.vue

<script setup lang="ts">
import { ref, onUnmounted } from "vue";
//頁面卸載，關(guān)閉socket
onUnmounted(() => {
  closeWebSocket();
});
//這里后端接口需要用登錄的用戶id，通過session獲取
const userInfo = getSessStorage("userInfo") as { userId: string };
// WebSocket
const ws = ref();
const initWebSocket = () => {
  ws.value = new WebSocket(`ws://${location.host}/commonSocket/${userInfo.userId}`);
  ws.value.onopen = () => {
    console.log("連接成功");
  };
  //后端設(shè)置心跳，會(huì)每間隔一定時(shí)間，觸發(fā)一次，根據(jù)內(nèi)容變化處理邏輯
  ws.value.onmessage = (e: any) => {
    console.log(e, "廣播返回的消息");
    //后端約定了，如果返回字符串“UPDATE”，就更新表格
    if (e.data === "UPDATE") {
      //getTable();
    }
  };
  ws.value.onerror = () => {
    console.log("連接錯(cuò)誤");
    //斷連后每5秒重連一次
    setTimeout(() => {
      initWebSocket();
    }, 5000);
  };
};
initWebSocket();
//關(guān)閉鏈接（在頁面銷毀時(shí)銷毀連接）
const closeWebSocket = () => {
  ws.value.close();
};
</script>

因?yàn)榭缬騿栴}，這里使用了vite的proxy代理功能

vite.config.ts

import { defineConfig} from "vite";
import { resolve } from "path";
……

export default defineConfig(({ command }) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".js", ".json", ".ts"], 
    },
    plugins: [
      vue(),
    ],
    
    server: {
      host: "0.0.0.0",
      port: 3000,
      proxy: {
        "/commonSocket": {
          // target: 'ws://192.168.0.66:60601/',這是后端接口地址
          target: 'ws://192.168.0.66:60601/',
          changeOrigin: true,
          ws: true
        },
      },
    },
  };
});

如果代理設(shè)置好，連接成功，以上websocket會(huì)打印"連接成功"和輸出返回。

完！

補(bǔ)充：

項(xiàng)目運(yùn)行了一段，對(duì)websocket有了更多了解：
websocket保持連接，在網(wǎng)絡(luò)中斷時(shí)候，不會(huì)報(bào)錯(cuò)，短時(shí)間恢復(fù)網(wǎng)絡(luò)，還會(huì)繼續(xù)連接上，長(zhǎng)時(shí)間還未知。

解決辦法：

加入一個(gè)前端檢測(cè)機(jī)制，每次心跳，后端發(fā)送當(dāng)前時(shí)間戳，前端接收保存變量里，用定時(shí)器間隔檢查時(shí)間戳，和當(dāng)前時(shí)間做比較，發(fā)現(xiàn)時(shí)間間隔大于一定，比如10分鐘，說明有一段沒收到心跳，就認(rèn)為斷連了，重新初始化websocket文章來源地址http://www.zghlxwxcb.cn/news/detail-691958.html

到了這里，關(guān)于vue3.2+vite+代理，使用websocket的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！