vue.js - dotnet api 和 vue 客户端检测关闭浏览器/选项卡

Question

我有一个用 Vue.js 编写的客户端和一个用 .NET 核心编写的 API，该 API 还公开了 vue.js 客户端分发的静态页面，所有东西都在 localhost 上运行并将保持这种状态。

当服务器启动并运行时，它还会在 localhost 上打开一个带有网站 URL 的浏览器选项卡，我使用 2 种方法来实现：launchSettings 中的 launchBrowser 或使用 Process.start(URL)。

我希望在关闭选项卡时，服务器也将关闭。

我尝试了以下方法：

• 获取选项卡的进程并检测关闭（但每个浏览器处理选项卡进程的方式不同） - 不起作用
• 在客户端使用 beforeunload 和 unload 事件并向服务器发送 HTTP GET 请求：

     created() {
        window.addEventListener('beforeunload', () => {
          const request = new XMLHttpRequest();
          request.open("GET", URL, false);
          request.send();
        });
      }

它没有用

• 检查Visual Studio工具->选项-> Web项目“关闭浏览器窗口时停止调试器，调试停止时关闭浏览器”，但是当我发布应用程序时，设置和launchSettings不起作用（仅在IDE中）

任何人都知道如何解决它？

标签： vue.js.net-core

Answer 1

您可以尝试以下策略

• 创建一个单独的启动器脚本。
• Launcher 脚本在后台启动服务器并将其存储为 PID。
• Launcher 现在会在前台/阻塞模式下生成一个浏览器进程。
• 当浏览器关闭（所有选项卡都关闭）时，它会将控制权返回给启动器脚本
• 现在您可以使用之前存储的 PID 终止服务器。