エンジンが使うポートが割り当てできなければ、他の空いているポートで起動してユーザーに通知する

src/background.ts

@@ -599,7 +599,7 @@ ipcMainHandle("GET_PRIVACY_POLICY_TEXT", () => {
   return privacyPolicyText;
 });
 
-ipcMainHandle("GET_ALT_PORT_INFO", () => {
+ipcMainHandle("GET_ALT_PORT_INFOS", () => {
   return engineManager.altPortInfo;
 });
 

src/background/engineManager.ts

@@ -21,7 +21,7 @@ import {
   engineIdSchema,
   minimumEngineManifestSchema,
 } from "@/type/preload";
-import { AltPortInfo } from "@/store/type";
+import { AltPortInfos } from "@/store/type";
 
 type EngineProcessContainer = {
   willQuitEngine: boolean;
@@ -68,7 +68,7 @@ export class EngineManager {
   defaultEngineInfos: EngineInfo[];
   engineProcessContainers: Record<EngineId, EngineProcessContainer>;
 
-  public altPortInfo: AltPortInfo = {};
+  public altPortInfo: AltPortInfos = {};
 
   constructor({
     store,
@@ -268,10 +268,7 @@ export class EngineManager {
       };
 
       // 代替ポートを設定
-      engineInfo.host = new PortManager(
-        engineInfoUrl.hostname,
-        altPort
-      ).getUrl();
+      engineInfo.host = `http://${engineInfoUrl.hostname}:${altPort}`;
       log.warn(
         `ENGINE ${engineId}: Applied Alternative Port: ${engineInfoUrl.port} -> ${altPort}`
       );

src/background/portManager.ts

@@ -7,13 +7,11 @@ export class PortManager {
   constructor(private hostname: string, private port: number) {}
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  portLog = (...message: any) => log.info(`PORT ${this.port}: ${message}`);
+  portLog = (...message: any) =>
+    log.info(`PORT ${this.port} (${this.hostname}): ${message}`);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  portWarn = (...message: any) => log.warn(`PORT ${this.port}: ${message}`);
-
-  public getUrl(isHttps = false): string {
-    return `${isHttps ? "https" : "http"}://${this.hostname}:${this.port}`;
-  }
+  portWarn = (...message: any) =>
+    log.warn(`PORT ${this.port} (${this.hostname}): ${message}`);
 
   /**
    * "netstat -ano" の stdout から, 指定したポートを使用しているプロセスの process id を取得する
@@ -59,7 +57,28 @@ export class PortManager {
     }).toString();
 
     if (isWindows) {
-      stdout = this.stdout2processId(stdout)?.toString() ?? "";
+      // Windows の場合は, lsof のように port と pid が 1to1 で取れないので, ３つのループバックアドレスが割り当てられているか確認
+      const loopbackAddr = ["127.0.0.1", "0.0.0.0", "[::1]"];
+
+      // hostname が３つループバックアドレスのどれかの場合, それぞれのループバックアドレスに対して pid を取得
+      if (loopbackAddr.includes(this.hostname)) {
+        this.portLog(
+          "Hostname is loopback address; Getting process id from all loopback addresses..."
+        );
+
+        const pid: (number | undefined)[] = [];
+        loopbackAddr.forEach((hostname) =>
+          pid.push(
+            // TODO: インスタンスの再定義を回避するなどのリファクタリング
+            new PortManager(hostname, this.port).stdout2processId(stdout)
+          )
+        );
+
+        // pid が undefined (= 割り当て可能) でないものを取得 → 1つ目を取得 → stdoutへ
+        stdout = pid.filter((pid) => pid !== undefined)[0]?.toString() ?? "";
+      } else {
+        stdout = this.stdout2processId(stdout)?.toString() ?? "";
+      }
     }
 
     if (!stdout || !stdout.length) {
@@ -114,7 +133,7 @@ export class PortManager {
 
     for (let altPort = this.port + 1; altPort <= altPortMax; altPort++) {
       this.portLog(`Trying whether port ${altPort} is assignable...`);
-      const altPid = await new PortManager(
+      const altPid = await new PortManager( // TODO: インスタンスの再定義を回避するなどのリファクタリング
         this.hostname,
         altPort
       ).getProcessIdFromPort();

src/components/MenuBar.vue

@@ -83,7 +83,7 @@ const $q = useQuasar();
 const currentVersion = ref("");
 const altPorts = ref<number[]>([]);
 
-store.dispatch("GET_ALT_PORT_INFO").then(
+store.dispatch("GET_ALT_PORT_INFOS").then(
   (altPortInfo) =>
     // {[engineId]: {from: number, to: number}} -> to: number[]
     (altPorts.value = Object.values(altPortInfo).map(({ to }) => to))

src/electron/preload.ts

@@ -71,8 +71,8 @@ const api: Sandbox = {
     return await ipcRendererInvoke("GET_PRIVACY_POLICY_TEXT");
   },
 
-  getAltPortInfo: async () => {
-    return await ipcRendererInvoke("GET_ALT_PORT_INFO");
+  getAltPortInfos: async () => {
+    return await ipcRendererInvoke("GET_ALT_PORT_INFOS");
   },
 
   saveTempAudioFile: async ({ relativePath, buffer }) => {

src/store/engine.ts

@@ -45,9 +45,9 @@ export const engineStore = createPartialStore<EngineStoreTypes>({
     },
   },
 
-  GET_ALT_PORT_INFO: {
+  GET_ALT_PORT_INFOS: {
     async action() {
-      return await window.electron.getAltPortInfo();
+      return await window.electron.getAltPortInfos();
     },
   },
 

src/store/setting.ts

@@ -57,7 +57,7 @@ export const settingStoreState: SettingStoreState = {
   },
   confirmedTips: {
     tweakableSliderByScroll: false,
-    noticeAltPortInfo: true,
+    engineStartedOnAltPort: false,
   },
   engineSettings: {},
 };

src/store/type.ts

@@ -80,7 +80,7 @@ export type Command = {
 };
 
 export type EngineState = "STARTING" | "FAILED_STARTING" | "ERROR" | "READY";
-export type AltPortInfo = Record<EngineId, { from: number; to: number }>;
+export type AltPortInfos = Record<EngineId, { from: number; to: number }>; // ポートが塞がれていたときの代替ポート
 
 export type SaveResult =
   | "SUCCESS"
@@ -739,8 +739,8 @@ export type EngineStoreTypes = {
     getter: EngineInfo[];
   };
 
-  GET_ALT_PORT_INFO: {
-    action(): Promise<AltPortInfo>;
+  GET_ALT_PORT_INFOS: {
+    action(): Promise<AltPortInfos>;
   };
 
   SET_ENGINE_MANIFESTS: {

src/type/ipc.ts

@@ -13,7 +13,7 @@ import {
   EngineId,
   MessageBoxReturnValue,
 } from "@/type/preload";
-import { AltPortInfo } from "@/store/type";
+import { AltPortInfos } from "@/store/type";
 
 /**
  * invoke, handle
@@ -69,9 +69,9 @@ export type IpcIHData = {
     return: string;
   };
 
-  GET_ALT_PORT_INFO: {
+  GET_ALT_PORT_INFOS: {
     args: [];
-    return: AltPortInfo;
+    return: AltPortInfos;
   };
 
   SHOW_AUDIO_SAVE_DIALOG: {

src/type/preload.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { IpcSOData } from "./ipc";
-import { AltPortInfo } from "@/store/type";
+import { AltPortInfos } from "@/store/type";
 
 export const isMac =
   typeof process === "undefined"
@@ -143,7 +143,7 @@ export interface Sandbox {
   getQAndAText(): Promise<string>;
   getContactText(): Promise<string>;
   getPrivacyPolicyText(): Promise<string>;
-  getAltPortInfo(): Promise<AltPortInfo>;
+  getAltPortInfos(): Promise<AltPortInfos>;
   saveTempAudioFile(obj: { relativePath: string; buffer: ArrayBuffer }): void;
   loadTempFile(): Promise<string>;
   showAudioSaveDialog(obj: {
@@ -496,7 +496,7 @@ export type SplitterPosition = z.infer<typeof splitterPositionSchema>;
 
 export type ConfirmedTips = {
   tweakableSliderByScroll: boolean;
-  noticeAltPortInfo: boolean;
+  engineStartedOnAltPort: boolean; // エンジンのポート変更の通知
 };
 
 export const electronStoreSchema = z
@@ -586,7 +586,7 @@ export const electronStoreSchema = z
     confirmedTips: z
       .object({
         tweakableSliderByScroll: z.boolean().default(false),
-        noticeAltPortInfo: z.boolean().default(true),
+        engineStartedOnAltPort: z.boolean().default(false),
       })
       .passthrough()
       .default({}),

src/views/EditorHome.vue

@@ -546,33 +546,35 @@ onMounted(async () => {
   isCompletedInitialStartup.value = true;
 
   // 代替ポートをトースト通知する
-  if (!store.state.confirmedTips.noticeAltPortInfo) return;
-  const altPortInfo = await store.dispatch("GET_ALT_PORT_INFO");
-  for (const engineId of store.state.engineIds) {
-    const engineName = store.state.engineInfos[engineId].name;
-    const altPort = altPortInfo[engineId];
-
-    if (!altPort) return;
-    $q.notify({
-      message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
-      color: "toast",
-      textColor: "toast-display",
-      icon: "compare_arrows",
-      timeout: 5000,
-      actions: [
-        {
-          label: "今後この通知をしない",
-          textColor: "toast-button-display",
-          handler: () =>
-            store.dispatch("SET_CONFIRMED_TIPS", {
-              confirmedTips: {
-                ...store.state.confirmedTips,
-                noticeAltPortInfo: false,
-              },
-            }),
-        },
-      ],
-    });
+  // FIXME: トーストが何度も出るようにする（altPortInfoをstateに持たせてwatchする）
+  if (!store.state.confirmedTips.engineStartedOnAltPort) {
+    const altPortInfo = await store.dispatch("GET_ALT_PORT_INFOS");
+    for (const engineId of store.state.engineIds) {
+      const engineName = store.state.engineInfos[engineId].name;
+      const altPort = altPortInfo[engineId];
+
+      if (!altPort) return;
+      $q.notify({
+        message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
+        color: "toast",
+        textColor: "toast-display",
+        icon: "compare_arrows",
+        timeout: 5000,
+        actions: [
+          {
+            label: "今後この通知をしない",
+            textColor: "toast-button-display",
+            handler: () =>
+              store.dispatch("SET_CONFIRMED_TIPS", {
+                confirmedTips: {
+                  ...store.state.confirmedTips,
+                  engineStartedOnAltPort: true,
+                },
+              }),
+          },
+        ],
+      });
+    }
   }
 });
 

tests/unit/store/Vuex.spec.ts

@@ -135,7 +135,7 @@ describe("store/vuex.js test", () => {
         },
         confirmedTips: {
           tweakableSliderByScroll: false,
-          noticeAltPortInfo: true,
+          engineStartedOnAltPort: false,
         },
         progress: -1,
         defaultPresetKeys: {},
@@ -252,6 +252,6 @@ describe("store/vuex.js test", () => {
     assert.propertyVal(store.state.splitterPosition, "audioInfoPaneWidth", 20);
     assert.propertyVal(store.state.splitterPosition, "portraitPaneWidth", 50);
     assert.equal(store.state.confirmedTips.tweakableSliderByScroll, false);
-    assert.equal(store.state.confirmedTips.noticeAltPortInfo, true);
+    assert.equal(store.state.confirmedTips.engineStartedOnAltPort, false);
   });
 });