增加自定义服务地址

electron/main.js

@@ -146,19 +146,23 @@ class MainSerivce {
 
   #initMqtt(data) {
     this.#closeMqtt()
-    this.#client = mqtt.connect(data.url, { username: data.room, password: data.name })
-    // 监听
-    this.#client.on('connect', () => this.mainWin.webContents.send('message', { type: 'connect' }))
-    this.#client.on('message', (_, msg, __) => {
-      try {
-        const db = JSON.parse(msg.toString())
-        if (db.type === 'join') this.#mqttChannel = db.channel
-        this.mainWin.webContents.send('message', db)
-      } catch (error) {
-        console.log(error);
-      }
-    })
-    this.#client.on('error', (e) => this.#closeMqtt())
+    try {
+      this.#client = mqtt.connect(data.url, { username: data.room, password: data.name })
+      // 监听
+      this.#client.on('connect', () => this.mainWin.webContents.send('message', { type: 'connect' }))
+      this.#client.on('message', (_, msg, __) => {
+        try {
+          const db = JSON.parse(msg.toString())
+          if (db.type === 'join') this.#mqttChannel = db.channel
+          this.mainWin.webContents.send('message', db)
+        } catch (error) {
+          console.log(error);
+        }
+      })
+      this.#client.on('error', (e) => { this.mainWin.webContents.send('message', { type: 'disconnect' }); this.#closeMqtt() })
+    } catch (error) {
+      this.mainWin.webContents.send('message', { type: 'disconnect' })
+    }
   }
 
   #closeMqtt() {

src/App.vue

@@ -130,7 +130,7 @@ function sendAudio(blob: Blob) {
 function titleEvent(type: string) {
   if (type === 'maxWin') winMaxOrMin.value = !winMaxOrMin.value
   if (type === 'loginOut') {
-    close('手动退出')
+    close()
     window.$electron.send('closeMqtt')
   } else {
     window.$electron?.send(type, winMaxOrMin.value)

src/components/login.vue

@@ -11,15 +11,15 @@ const emit = defineEmits<{(evt: 'update:modelValue', value: string): void
 }>()
 
 function login() {
-  if (name.value && room.value) emit('loginBack', { name: name.value, room: room.value, url: url.value })
+  if (name.value && room.value && url.value && url.value.includes('mqtt://')) emit('loginBack', { name: name.value, room: room.value, url: url.value })
 }
 
 function titleEvent(type: string) {
   window.$electron?.send(type)
 }
 
-watch([ name, room ], () => {
-  if (name.value && room.value) emit('update:modelValue', '')
+watch([ name, room, url ], () => {
+  if (name.value && room.value && url.value) emit('update:modelValue', '')
 })
 </script>
 <template>
@@ -47,8 +47,8 @@ watch([ name, room ], () => {
           <input
             v-model="url"
             type="text"
-            placeholder="请输入地址"
-            maxlength="20"
+            placeholder="mqtt://*******"
+            maxlength="50"
           >
         </div>
         <div>
@@ -78,8 +78,8 @@ watch([ name, room ], () => {
         <span>{{ err }}</span>
         <div>
           <button
-            :disabled="!name && !room"
-            :class="{ resetStyle: name && room }"
+            :disabled="!name && !room && !url && !url.includes('mqtt://')"
+            :class="{ resetStyle: name && room && url && url.includes('mqtt://')}"
             @click="login"
           >
             加入