auto reconnect to driver & auto refresh page

- resolves cdfmlr/muvtuber#34: 丢失和 live2ddriver 的 ws 连接时自动重连
- resolves cdfmlr/muvtuber#33: 定期自动刷新页面避免长时间工作出现掉san画面(播着播着主播头没了)

src/pages/IndexPage.vue

@@ -7,22 +7,50 @@
 <script setup lang="ts">
 import Live2DView from 'components/Live2DView.vue';
 import { useWsStore, DEFAULT_DRIVER_WS_ADDR } from 'stores/ws-store';
+import { onBeforeUnmount, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
-let driverWsAddr = DEFAULT_DRIVER_WS_ADDR;
-
-// custom wsAddr from url query
 const route = useRoute();
-if (route.query.driver) {
-  driverWsAddr = route.query.driver as string;
-  console.log('use driver ws addr from route param:', driverWsAddr);
-} else {
-  console.log(
-    'no driver param (?driver=ws://muvtuber.live2d.driver) set. use default:',
-    driverWsAddr
-  );
+const wsStore = useWsStore();
+
+function connectToControllers() {
+  let driverWsAddr = DEFAULT_DRIVER_WS_ADDR;
+
+  // custom wsAddr from url query
+  if (route.query.driver) {
+    driverWsAddr = route.query.driver as string;
+    console.log('use driver ws addr from route param:', driverWsAddr);
+  } else {
+    console.log(
+      'no driver param (?driver=ws://muvtuber.live2d.driver) set. use default:',
+      driverWsAddr
+    );
+  }
+
+  wsStore.dialWebSocket(driverWsAddr);
 }
 
-const wsStore = useWsStore();
-wsStore.dialWebSocket(driverWsAddr);
+onMounted(() => {
+  connectToControllers();
+});
+
+onBeforeUnmount(() => {
+  console.log('onBeforeUnmount: close websocket connection');
+  wsStore.closeWebSocket();
+});
+
+setInterval(() => {
+  if (!wsStore.connected) {
+    console.log('no controllers connected. trying to connect...');
+    connectToControllers();
+  }
+}, 1000 * 30);
+// }, 1000 * 3); // for debug
+
+// auto refresh page every 2 hours (#33)
+setTimeout(() => {
+  console.log('auto refresh page every 2 hours...');
+  window.location.reload();
+}, 1000 * 60 * 60 * 2);
+// }, 1000 * 30); // for debug
 </script>

src/stores/ws-store.ts

@@ -8,18 +8,25 @@ console.log('DEFAULT_DRIVER_WS_ADDR', DEFAULT_DRIVER_WS_ADDR);
 const live2DStore = useLive2DStore();
 
 export const useWsStore = defineStore('ws', () => {
+  let _connected = false;
   const ws = ref<WebSocket>();
 
+  /** deprecated: use connected instead */
   const opened = computed(() => ws.value?.readyState === WebSocket.OPEN);
+  /** deprecated: use connected instead */
   const closed = computed(() => ws.value?.readyState === WebSocket.CLOSED);
 
+  /** WebSocket connection status */
+  const connected = computed(() => _connected);
+
   function dialWebSocket(address: string = DEFAULT_DRIVER_WS_ADDR) {
     console.log('dailWebSocket:', address);
 
     ws.value = new WebSocket(address);
 
     ws.value.onopen = (event: Event) => {
       console.log('ws onopen:', event);
+      _connected = true;
     };
     ws.value.onmessage = (event: MessageEvent) => {
       console.log('ws onmessage:', event);
@@ -54,17 +61,27 @@ export const useWsStore = defineStore('ws', () => {
     };
     ws.value.onerror = (event: Event) => {
       console.log('ws onerror:', event);
+      _connected = false;
     };
     ws.value.onclose = (event: CloseEvent) => {
       console.log('ws onclose:', event);
+      _connected = false;
     };
   }
 
+  function closeWebSocket() {
+    if (ws.value) {
+      ws.value.close();
+    }
+  }
+
   return {
     // getters
     opened,
     closed,
+    connected,
     // actions
     dialWebSocket,
+    closeWebSocket,
   };
 });