测试webrtc

src/assets/icons/home.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737443419214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3913" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M-664.554667 249.408" p-id="3914"></path><path d="M-664.554667 249.408" p-id="3915"></path><path d="M829.781333 960l-211.861333 0c-12.074667 0-21.866667-9.770667-21.866667-21.866667L596.053333 642.218667l-168.128 0 0 295.936c0 12.074667-9.770667 21.866667-21.866667 21.866667L194.218667 960.021333c-55.168 0-74.816-38.656-74.816-74.816L119.402667 589.248 52.693333 589.248c-21.482667 0-35.285333-6.933333-41.088-20.629333-8.64-20.394667 7.317333-40.661333 22.208-56.064L459.050667 86.912C472.448 73.024 491.029333 64.789333 511.146667 64c21.866667 0.789333 40.469333 9.024 54.122667 23.210667L989.866667 512.277333c15.146667 15.68 31.168 35.968 22.549333 56.362667-5.802667 13.674667-19.648 20.629333-41.109333 20.629333l-66.688 0 0 295.936C904.618667 921.344 884.949333 960 829.781333 960z" p-id="3916" ></path></svg>

src/assets/icons/password.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="登录页/小尺寸适配" transform="translate(-521.000000, -507.000000)" fill="#D7DAE2">
-            <g id="编组-3" transform="translate(521.000000, 489.000000)">
-                <g id="icon/密码" transform="translate(0.000000, 18.000000)">
-                    <g id="icon/面性/用户" transform="translate(2.750000, 0.000000)">
-                        <path d="M15.1687329,9.22631696 L13.6419037,9.22631696 L13.6419037,5.56573705 C13.6484598,2.5 11.234721,0.00872880628 8.24939907,0 C5.26508568,0.00939825704 2.85177162,2.49860241 2.85570897,5.56330236 L2.85570897,9.2226649 L1.33125064,9.2226649 C0.97703587,9.22363176 0.637720577,9.36914422 0.388031427,9.62715641 C0.138342276,9.8851686 -0.00124277274,10.2345199 8.33833201e-06,10.5982736 L8.33833201e-06,20.6243913 C8.33833201e-06,21.3840195 0.596286273,22 1.33125064,22 L15.1687329,22 C15.5229477,21.9990331 15.862263,21.8535207 16.1119521,21.5955085 C16.3616413,21.3374963 16.5012263,20.9881449 16.4999752,20.6243913 L16.4999752,10.5994909 C16.5002813,10.2357374 16.3597909,9.88677169 16.1094351,9.62944486 C15.8590793,9.37211803 15.5193905,9.22753418 15.1651767,9.22753432 L15.1675475,9.22753432 L15.1687329,9.22631696 Z M8.99740312,15.8742807 L8.99740312,18.0642983 C8.99740532,18.163329 8.91957674,18.2437974 8.82314545,18.2444666 L7.67920898,18.2444666 C7.58192352,18.2444666 7.50269216,18.1641951 7.50139501,18.0642983 L7.50139501,15.8742807 C6.81469059,15.5187423 6.45549943,14.7255585 6.63324412,13.9571866 C6.81098881,13.1888147 7.47917077,12.6462632 8.24821363,12.645861 C9.01510474,12.6498092 9.67994094,13.19175 9.85772301,13.9578514 C10.0355051,14.7239528 9.6801348,15.5155677 8.99740312,15.8742807 L8.99740312,15.8742807 Z M11.5733347,9.22753432 L4.92783235,9.22753432 L4.92783235,5.65582117 C4.92586377,3.76741513 6.41289775,2.2337964 8.25176991,2.22775566 C10.0888693,2.23446601 11.5741215,3.76679864 11.5721492,5.65338645 L11.5721492,9.22753432 L11.5733347,9.22753432 Z" id="形状"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/assets/icons/username.svg

@@ -1,13 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>切片</title>
-    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="登录页/小尺寸适配" transform="translate(-521.000000, -438.000000)" fill="#D7DAE2">
-            <g id="编组-3" transform="translate(521.000000, 420.000000)">
-                <g id="icon/yonghuguanli" transform="translate(0.000000, 18.000000)">
-                    <path d="M5.69990867,6.45706457 C5.73170921,7.95572849 6.24834193,9.20579289 7.2498068,10.2072578 C8.25127168,11.2087226 9.50133608,11.7253554 11,11.7571559 C12.4986639,11.7253554 13.7487283,11.2087226 14.7501932,10.2072578 C15.7516581,9.20579289 16.2682908,7.95572849 16.3000913,6.45706457 C16.2682908,4.95840065 15.7516581,3.70833625 14.7501932,2.70687137 C13.7487283,1.7054065 12.4986639,1.18877379 11,1.15697324 C9.50133608,1.18877379 8.25127168,1.7054065 7.2498068,2.70687137 C6.24834193,3.70833625 5.73170921,4.95840065 5.69990867,6.45706457 Z M18.571559,20.8430268 L2.67128505,20.8430268 C2.45019552,20.8430268 2.26873049,20.7721065 2.12688995,20.630266 C1.98504941,20.4884254 1.91412914,20.3069604 1.91412914,20.0858709 L1.91412914,17.8144031 C1.94592969,16.7417656 2.3166837,15.8505931 3.02639117,15.1408856 C3.73609863,14.4311782 4.62727113,14.0604242 5.69990867,14.0286236 L16.3000913,14.0286236 C17.3727289,14.0604242 18.2639014,14.4311782 18.9736088,15.1408856 C19.6833163,15.8505931 20.0540703,16.7417656 20.0858709,17.8144031 L20.0858709,20.0858709 C20.0858709,20.3069604 20.0149506,20.4884254 19.87311,20.630266 C19.7312695,20.7721065 19.5498045,20.8430268 19.328715,20.8430268 L18.571559,20.8430268 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
+    <path d="M5.69990867,6.45706457 C5.73170921,7.95572849 6.24834193,9.20579289 7.2498068,10.2072578 C8.25127168,11.2087226 9.50133608,11.7253554 11,11.7571559 C12.4986639,11.7253554 13.7487283,11.2087226 14.7501932,10.2072578 C15.7516581,9.20579289 16.2682908,7.95572849 16.3000913,6.45706457 C16.2682908,4.95840065 15.7516581,3.70833625 14.7501932,2.70687137 C13.7487283,1.7054065 12.4986639,1.18877379 11,1.15697324 C9.50133608,1.18877379 8.25127168,1.7054065 7.2498068,2.70687137 C6.24834193,3.70833625 5.73170921,4.95840065 5.69990867,6.45706457 Z M18.571559,20.8430268 L2.67128505,20.8430268 C2.45019552,20.8430268 2.26873049,20.7721065 2.12688995,20.630266 C1.98504941,20.4884254 1.91412914,20.3069604 1.91412914,20.0858709 L1.91412914,17.8144031 C1.94592969,16.7417656 2.3166837,15.8505931 3.02639117,15.1408856 C3.73609863,14.4311782 4.62727113,14.0604242 5.69990867,14.0286236 L16.3000913,14.0286236 C17.3727289,14.0604242 18.2639014,14.4311782 18.9736088,15.1408856 C19.6833163,15.8505931 20.0540703,16.7417656 20.0858709,17.8144031 L20.0858709,20.0858709 C20.0858709,20.3069604 20.0149506,20.4884254 19.87311,20.630266 C19.7312695,20.7721065 19.5498045,20.8430268 19.328715,20.8430268 L18.571559,20.8430268 Z" id="形状"></path>
 </svg>

src/pages/login/index.vue

@@ -19,25 +19,25 @@
         </div>
         <div>
           <Icon
-            name="username"
+            name="home"
             :size="25"
           />
           <input
             v-model="room"
             type="text"
-            placeholder="请输入房间"
+            placeholder="房间名"
             maxlength="20"
           >
         </div>
         <div>
           <Icon
-            name="password"
+            name="username"
             :size="25"
           />
           <input
             v-model="name"
             type="text"
-            placeholder="请输入名称"
+            placeholder="用户名"
             maxlength="20"
           >
         </div>
@@ -67,7 +67,7 @@ const name = ref(localStorage.getItem('NAME') || '')
 const room = ref(localStorage.getItem('ROOM') || '')
 const url = ref(localStorage.getItem('URL') || '')
 const dic = { leave: '对方离开房间', disconnect: '连接断开' }
-const disabled = computed(() => !name.value || !room.value || !url.value || !url.value.startsWith('mqtts:'))
+const disabled = computed(() => !name.value || !room.value || !url.value || !url.value.startsWith('mqtt'))
 const err = computed(() => dic[store.mqtt_message.type])
 
 async function login() {
@@ -144,21 +144,6 @@ async function login() {
             font-size: 15px;
           }
         }
-
-        // button {
-        //   background: #79b8fa;
-        //   border: none;
-        //   outline: none;
-        //   color: white;
-        //   font-size: 16px;
-        //   font-weight: 500;
-        //   border-radius: 10px;
-        //   margin-top: 40px;
-        //   margin-left: auto;
-        //   line-height: 35px;
-        //   padding: 0 35px;
-        //   cursor: not-allowed;
-        // }
       }
 
       &>span {

src/services/mqtt.service.ts

@@ -30,7 +30,9 @@ export default class MqttService extends Service {
    */
   async connect(url: string, room: string, name: string) {
     if (!url || !name || !room) return null
-    const mqttUrl = url.replace(/(\/\/)/, `$1${room}:${name}@`)
+    const newUrl = url.replace(/(\/\/)/, `$1${room}:${name}@`)
+    const mqttUrl = `${newUrl}?client_id=${name}-${new Date().getTime()}`
+    if (mqttUrl.startsWith('mqtt://')) return await connect(this.client_id, mqttUrl)
     return await connect(this.client_id, mqttUrl, { skipVerification: true })
   }
 
@@ -73,6 +75,7 @@ export default class MqttService extends Service {
       }
 
       // 收到消息
+      // TODO:需要排除自己发的消息
       if (event.message) {
         try {
           const { payload } = event.message