SocketIo - 每次访问 routerview 页面时都会添加额外的事件侦听器

Question

我有一个 vue3 应用程序，其中有一个主布局和使用 routerviews 嵌入其中的页面。

我遇到的问题是，每次我进入使用socketIO事件监听器的routerview时，似乎每次访问都会添加一个额外的事件监听器。

这会导致收到的同一条消息被处理多次。

下面是主布局中调用的子页面的内容。 我观察到，第一次访问它并发出“new_insert”事件时，我在控制台中看到 1 个条目。

下次导航到此视图并发出事件时，我会看到 2 个条目，依此类推。

就好像离开并不会杀死现有的socket.on-listener，而再次进入routerview会添加一个额外的。

有什么想法可以解决这个问题吗？

<script lang="ts">
import { socket } from "../services/socket";
export default {
  setup () {
    socket.on('new_insert', (inserted_id: number) => {
      console.log(inserted_id) // -> emits 1 entry the first time I go to the page, and additional ones for every subsequent visit
    })
  },
};

services/socket.ts 文件：

import { io } from "socket.io-client";
export const socket = io('', {path: '/absproxy/3000/socket.io/'});

Answer 1

能够自己回答问题。

import { onBeforeUnmount } from 'vue' 
  setup () {
    ...

    onBeforeUnmount(() => {
      socket.off(); // This removes all event listeners for the socket
    });
  }