增加服务器连接地址

electron/main.js

@@ -146,7 +146,7 @@ class MainSerivce {
 
   #initMqtt(data) {
     this.#closeMqtt()
-    this.#client = mqtt.connect('mqtt://127.0.0.1:49800', { username: data.room, password: data.name })
+    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, __) => {

src/App.vue

@@ -36,11 +36,11 @@ const conctrlGrears = ref(false)
 const conctrlNum = ref(0)
 const SpeedValue = ref(0)
 
-// 方向盘数据
-function onContrlData() {
+// 发送控制数据
+function sendContrlData() {
   if (showLoading.value) return
   window.$electron.send('sendMqtt', { type: 'conctrl', conctrl: { ...conctrlData.value } })
-  conctrlAnimation.value = requestAnimationFrame(onContrlData)
+  conctrlAnimation.value = requestAnimationFrame(sendContrlData)
 }
 
 // 关闭
@@ -54,7 +54,6 @@ function close(err?: string) {
   audioStateNum.value = 0
   quantity.value = 0
   cancelAnimationFrame(conctrlAnimation.value)
-  console.log('退出')
 }
 
 // 初始化rtc
@@ -96,7 +95,7 @@ function initRTC() {
       if (state === 'connected') {
         await sleep(3000)
         showLoading.value = false
-        onContrlData()
+        sendContrlData()
       }
     }
     console.log('rtc 初始化成功')
@@ -106,8 +105,8 @@ function initRTC() {
 }
 
 // 登录
-async function login(data: { name: string, roomID: string }) {
-  window.$electron.send('loginMqtt', { room: data.roomID, name: data.name })
+function login(data: { name: string, room: string, url: string }) {
+  window.$electron.send('loginMqtt', { room: data.room, name: data.name, url: data.url })
 }
 
 // 档位计算
@@ -127,6 +126,17 @@ function sendAudio(blob: Blob) {
   window.$electron.send('sendMqtt', { type: 'Meadia', Meadia: blob })
 }
 
+// 窗口事件
+function titleEvent(type: string) {
+  if (type === 'maxWin') winMaxOrMin.value = !winMaxOrMin.value
+  if (type === 'loginOut') {
+    close('手动退出')
+    window.$electron.send('closeMqtt')
+  } else {
+    window.$electron?.send(type, winMaxOrMin.value)
+  }
+}
+
 // mqtt
 window.$electron.on('message', async (msg: any) => {
   switch (msg.type) {
@@ -140,13 +150,10 @@ window.$electron.on('message', async (msg: any) => {
       break
     case 'join':
       window.$electron.send('sendMqtt', { type: 'startRTC' })
-      console.log('开始rtc')
-
       initRTC()
       break
     case 'leave':
       close('对方断开连接')
-
       break
     case 'offer':
       {
@@ -158,12 +165,10 @@ window.$electron.on('message', async (msg: any) => {
     case 'power':
       quantity.value = msg.power
       console.log('电量')
-
       break
     case 'speed':
       SpeedValue.value = Math.floor(msg.data)
       console.log('速度')
-
       break
     case 'contrl':
       {
@@ -191,16 +196,8 @@ window.$electron.on('message', async (msg: any) => {
   }
 })
 
-// 窗口事件
-function titleEvent(type: string) {
-  if (type === 'maxWin') winMaxOrMin.value = !winMaxOrMin.value
-  if (type === 'loginOut') {
-    close()
-    window.$electron.send('closeMqtt')
-  } else {
-    window.$electron?.send(type, winMaxOrMin.value)
-  }
-}
+// 关闭loadingwin
+window.$electron.send('close-loading')
 
 // 监听按钮状态
 watch([ audioState, warnAudio, conctrlGrears ], () => {
@@ -216,9 +213,6 @@ watch([ audioState, warnAudio, conctrlGrears ], () => {
 })
 
 onUnmounted(() => close())
-
-// 关闭loadingwin
-window.$electron.send('close-loading')
 </script>
 <template>
   <template v-if="isLogin">

src/assets/icons/server.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M938.72 85.28a66.56 66.56 0 0 0-48-16c-42.4 0-102.56 22.72-172.64 64a432 432 0 0 0-585.6 585.6c-60.96 102.88-81.6 185.44-47.2 219.84a66.56 66.56 0 0 0 48 16c42.4 0 102.56-22.72 172.64-64a432 432 0 0 0 585.6-585.6c60.96-102.88 81.6-185.44 47.2-219.84zM133.76 891.36h-1.44c-1.44-18.56 10.08-57.92 39.2-113.6a438.4 438.4 0 0 0 74.56 74.56c-67.36 35.52-102.08 39.04-112.32 39.04zM226.08 688a336 336 0 0 1-32-66.24A330.24 330.24 0 0 1 176 512a335.2 335.2 0 0 1 445.6-317.28 328.8 328.8 0 0 1 66.4 32A338.72 338.72 0 0 1 797.92 336a1751.2 1751.2 0 0 1-211.2 250.4A1763.2 1763.2 0 0 1 336 797.6 338.72 338.72 0 0 1 226.08 688zM512 848a336 336 0 0 1-109.6-18.72A1904 1904 0 0 0 632 632a1889.76 1889.76 0 0 0 197.28-229.6A331.84 331.84 0 0 1 848 512a336 336 0 0 1-336 336z m340.48-601.76a438.4 438.4 0 0 0-74.56-74.56c67.36-35.52 101.76-39.04 112-39.04h1.44c1.76 18.56-9.76 57.92-38.88 113.6z" ></path></svg>

src/components/login.vue

@@ -2,23 +2,24 @@
 import { computed, ref, watch } from 'vue'
 
 const name = ref('')
-const roomID = ref('')
+const room = ref('')
+const url = ref('mqtt://127.0.0.1:49800')
 const props = defineProps<{ modelValue: string }>()
 const err = computed(() => props.modelValue)
 const emit = defineEmits<{(evt: 'update:modelValue', value: string): void
-  (evt: 'loginBack', value: { name: string, roomID: string }): void
+  (evt: 'loginBack', value: { name: string, room: string, url: string }): void
 }>()
 
 function login() {
-  if (name.value && roomID.value) emit('loginBack', { name: name.value, roomID: roomID.value })
+  if (name.value && room.value) emit('loginBack', { name: name.value, room: room.value, url: url.value })
 }
 
 function titleEvent(type: string) {
   window.$electron?.send(type)
 }
 
-watch([ name, roomID ], () => {
-  if (name.value && roomID.value) emit('update:modelValue', '')
+watch([ name, room ], () => {
+  if (name.value && room.value) emit('update:modelValue', '')
 })
 </script>
 <template>
@@ -38,13 +39,25 @@ watch([ name, roomID ], () => {
         @keydown.enter="login"
       >
         <p>Hello, 欢迎登录</p>
+        <div>
+          <Icon
+            name="server"
+            :size="25"
+          />
+          <input
+            v-model="url"
+            type="text"
+            placeholder="请输入地址"
+            maxlength="20"
+          >
+        </div>
         <div>
           <Icon
             name="username"
             :size="25"
           />
           <input
-            v-model="roomID"
+            v-model="room"
             type="text"
             placeholder="请输入房间"
             maxlength="20"
@@ -65,8 +78,8 @@ watch([ name, roomID ], () => {
         <span>{{ err }}</span>
         <div>
           <button
-            :disabled="!name && !roomID"
-            :class="{ resetStyle: name && roomID }"
+            :disabled="!name && !room"
+            :class="{ resetStyle: name && room }"
             @click="login"
           >
             加入
@@ -132,7 +145,6 @@ watch([ name, roomID ], () => {
         padding: 0.1rem 0;
         display: flex;
         align-items: center;
-        margin: 0.1rem 0;
 
         &:not(:last-child) {
           border-bottom: solid 1px #D2D6E7;