diff --git a/package.json b/package.json index 0282f32..95071df 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "mic-recorder-to-mp3": "^2.2.2", "postcss-px2rem": "^0.3.0", "register-service-worker": "^1.7.1", + "socket.io": "^4.7.1", "swiper": "^4.5.1", "vant": "^2.12.48", "vue": "^2.6.11", diff --git a/src/assets/icon/arrow-down-bold.png b/src/assets/icon/arrow-down-bold.png new file mode 100644 index 0000000..9c9a02d Binary files /dev/null and b/src/assets/icon/arrow-down-bold.png differ diff --git a/src/assets/icon/arrow-up-bold.png b/src/assets/icon/arrow-up-bold.png new file mode 100644 index 0000000..d54eeee Binary files /dev/null and b/src/assets/icon/arrow-up-bold.png differ diff --git a/src/assets/icon/enter.png b/src/assets/icon/enter.png new file mode 100644 index 0000000..ea09a5f Binary files /dev/null and b/src/assets/icon/enter.png differ diff --git a/src/assets/icon/input.png b/src/assets/icon/input.png new file mode 100644 index 0000000..9c23509 Binary files /dev/null and b/src/assets/icon/input.png differ diff --git a/src/assets/icon/voice.png b/src/assets/icon/voice.png new file mode 100644 index 0000000..e0d00c1 Binary files /dev/null and b/src/assets/icon/voice.png differ diff --git a/src/assets/icon/voice_close.png b/src/assets/icon/voice_close.png new file mode 100644 index 0000000..7dba6ba Binary files /dev/null and b/src/assets/icon/voice_close.png differ diff --git a/src/components/home/home.vue b/src/components/home/home.vue index e0e9651..362e3e1 100644 --- a/src/components/home/home.vue +++ b/src/components/home/home.vue @@ -72,6 +72,15 @@ > {{ characters == 1 ? "开始聊天" : "Let's Talk" }} + +
+
+ Explore our website, or click above to let Metavatar show you around +
+
+ Explore our website, or click above to let Metavatar show you around +
+
@@ -941,10 +950,7 @@ export default { goToChat() { console.log("goToChat"); this.isBtnActice = false; - }, - - startSocket() { - const socket = new WebSocket("wss://43.143.227.135:8989/webrtc"); + this.$router.push("/realTimeChat"); }, }, computed: { @@ -979,7 +985,6 @@ export default { }, mounted() { this.goView("top"); - this.startSocket(); this.$nextTick(() => { this.module_6_data = oneList; this.carouselLsit = twoList; @@ -1267,6 +1272,24 @@ export default { transform: translate(-50%, -50%) scale(0.9); } } + + .bottom { + position: absolute; + color: #fff; + width: 300px; + text-align: center; + left: 50%; + bottom: 5%; + transform: translate(-50%, 0); + font-size: 20px; + font-size: 12px; + .text1 { + margin-bottom: 10px; + } + .text2 { + text-align: center; + } + } } .module_1 { diff --git a/src/router/index.js b/src/router/index.js index 005f2f2..7e4af66 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -121,6 +121,12 @@ const routes = [ name: 'downloadVideo', component: () => import("../views/model/downloadVideo"), }, + // 实时对话 + { + path: '/realTimeChat', + name: 'realTimeChat', + component: () => import("../views/realTimeChat/realTimeChat"), + }, ] const router = new VueRouter({ diff --git a/src/views/realTimeChat/realTimeChat.vue b/src/views/realTimeChat/realTimeChat.vue new file mode 100644 index 0000000..bc9ed73 --- /dev/null +++ b/src/views/realTimeChat/realTimeChat.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/yarn.lock b/yarn.lock index 12317e1..cc31fba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -152,6 +152,11 @@ resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd" integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow== +"@socket.io/component-emitter@~3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553" + integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg== + "@soda/friendly-errors-webpack-plugin@^1.7.1": version "1.8.1" resolved "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz" @@ -195,6 +200,18 @@ dependencies: "@types/node" "*" +"@types/cookie@^0.4.1": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d" + integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q== + +"@types/cors@^2.8.12": + version "2.8.13" + resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.13.tgz#b8ade22ba455a1b8cb3b5d3f35910fd204f84f94" + integrity sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA== + dependencies: + "@types/node" "*" + "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.31": version "4.17.32" resolved "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.32.tgz" @@ -254,6 +271,11 @@ resolved "https://registry.npmmirror.com/@types/node/-/node-18.11.18.tgz" integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA== +"@types/node@>=10.0.0": + version "20.4.4" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.4.tgz#c79c7cc22c9d0e97a7944954c9e663bcbd92b0cb" + integrity sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew== + "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz" @@ -1042,6 +1064,11 @@ base64-js@^1.0.2, base64-js@^1.3.1: resolved "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== +base64id@2.0.0, base64id@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6" + integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog== + base@^0.11.1: version "0.11.2" resolved "https://registry.npmmirror.com/base/-/base-0.11.2.tgz" @@ -1996,6 +2023,11 @@ cookie@0.5.0: resolved "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== +cookie@~0.4.1: + version "0.4.2" + resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432" + integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA== + copy-concurrently@^1.0.0: version "1.0.5" resolved "https://registry.npmmirror.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz" @@ -2046,6 +2078,14 @@ core-util-is@~1.0.0: resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz" integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== +cors@~2.8.5: + version "2.8.5" + resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29" + integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g== + dependencies: + object-assign "^4" + vary "^1" + cosmiconfig@^5.0.0: version "5.2.1" resolved "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz" @@ -2358,7 +2398,7 @@ debug@^3.2.7: dependencies: ms "^2.1.1" -debug@^4.1.0, debug@^4.1.1: +debug@^4.1.0, debug@^4.1.1, debug@~4.3.1, debug@~4.3.2: version "4.3.4" resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -2833,6 +2873,27 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0: dependencies: once "^1.4.0" +engine.io-parser@~5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.1.0.tgz#d593d6372d7f79212df48f807b8cace1ea1cb1b8" + integrity sha512-enySgNiK5tyZFynt3z7iqBR+Bto9EVVVvDFuTT0ioHCGbzirZVGDGiQjZzEp8hWl6hd5FSVytJGuScX1C1C35w== + +engine.io@~6.5.0: + version "6.5.1" + resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.1.tgz#59725f8593ccc891abb47f1efcdc52a089525a56" + integrity sha512-mGqhI+D7YxS9KJMppR6Iuo37Ed3abhU8NdfgSvJSDUafQutrN+sPTncJYTyM9+tkhSmWodKtVYGPPHyXJEwEQA== + dependencies: + "@types/cookie" "^0.4.1" + "@types/cors" "^2.8.12" + "@types/node" ">=10.0.0" + accepts "~1.3.4" + base64id "2.0.0" + cookie "~0.4.1" + cors "~2.8.5" + debug "~4.3.1" + engine.io-parser "~5.1.0" + ws "~8.11.0" + enhanced-resolve@^4.5.0: version "4.5.0" resolved "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz" @@ -5972,7 +6033,7 @@ oauth-sign@~0.9.0: resolved "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== -object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz" integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== @@ -7728,6 +7789,34 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" +socket.io-adapter@~2.5.2: + version "2.5.2" + resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz#5de9477c9182fdc171cd8c8364b9a8894ec75d12" + integrity sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA== + dependencies: + ws "~8.11.0" + +socket.io-parser@~4.2.4: + version "4.2.4" + resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83" + integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew== + dependencies: + "@socket.io/component-emitter" "~3.1.0" + debug "~4.3.1" + +socket.io@^4.7.1: + version "4.7.1" + resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.1.tgz#9009f31bf7be25478895145e92fbc972ad1db900" + integrity sha512-W+utHys2w//dhFjy7iQQu9sGd3eokCjGbl2r59tyLqNiJJBdIebn3GAKEXBr3osqHTObJi2die/25bCx2zsaaw== + dependencies: + accepts "~1.3.4" + base64id "~2.0.0" + cors "~2.8.5" + debug "~4.3.2" + engine.io "~6.5.0" + socket.io-adapter "~2.5.2" + socket.io-parser "~4.2.4" + sockjs-client@^1.5.0: version "1.6.1" resolved "https://registry.npmmirror.com/sockjs-client/-/sockjs-client-1.6.1.tgz" @@ -8778,7 +8867,7 @@ vant@^2.12.48: "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0" vue-lazyload "1.2.3" -vary@~1.1.2: +vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== @@ -9289,6 +9378,11 @@ ws@^6.0.0, ws@^6.2.1: dependencies: async-limiter "~1.0.0" +ws@~8.11.0: + version "8.11.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143" + integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg== + xtend@^4.0.0, xtend@~4.0.1: version "4.0.2" resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz"