Home Explore Help
Register Sign In
caner
/
blog
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init 增加 在线画板
Signed-off-by: Caner <5658514@qq.com>

Caner 3 years ago
parent
fd6d457276
commit
683cd11e06
7 changed files with 89 additions and 81 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. 1 0
      package.json
  3. 27 15
      src/pages/views/index/index.vue
  4. 7 11
      src/utils/Recorder.js
  5. 0 38
      src/utils/axios.ts
  6. 2 1
      src/vite-env.d.ts
  7. 51 15
      yarn.lock

+ 1 - 1
index.html
View File 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>home</title>
 
+    <title>Interesting</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 1 - 0
package.json
View File 

@@ -14,6 +14,7 @@
 
     "axios": "^1.1.3",
 
     "echarts": "^5.4.1",
 
     "pinia": "^2.0.18",
 
+    "socket.io-client": "^4.5.4",
 
     "vue": "^3.2.37",
 
     "vue-router": "^4.1.3"
 
   },

+ 27 - 15
src/pages/views/index/index.vue
View File 

@@ -12,6 +12,13 @@
 
             @click="restColor(index)"
 
           >{{ item }}</span>
 
         </span>
 
+        <span>
 
+          <a
 
+            href="https://beian.miit.gov.cn/"
 
+            target="_blank"
 
+            rel="noopener noreferrer"
 
+          >蜀ICP备2021004869号-1</a>
 
+        </span>
 
       </span>
 
     </div>
 
     <div id="cursors" />
 
@@ -21,7 +28,8 @@
 
 <script lang="ts" setup>
 
 import { Painter } from '@/utils/Painter'
 
 import { Recorder } from '@/utils/Recorder'
 
-import { onMounted, ref } from 'vue'
 
+import { onMounted, ref, nextTick } from 'vue'
 
+import { io } from 'socket.io-client'
 
 
 const painters: any = {}
 
 let recorder: any = null
 
@@ -66,37 +74,43 @@ const restColor = (i: number) => {
 
   recorder.color(i)
 
 }
 
 
-// socket
 
-const socket = new WebSocket(`wss://${window.location.hostname}`)
 
-socket.binaryType = 'arraybuffer'
 
-socket.onopen = () => {
 
+// socket init
 
+const socket = io('wss://car.caner.top', { autoConnect: false, auth: { roomID: 'drawCanvas', name: 'test' }, transports: [ 'websocket' ] })
 
+socket.on('connect', () => {
 
   recorder = new Recorder(context, socket)
 
   canvas?.addEventListener('pointerdown', onPointerDown)
 
   canvas?.addEventListener('pointerup', onPointerUp)
 
   status.value = colors[2]
 
-}
 
-
 
-socket.onclose = () => {
 
-  status.value = colors[4]
 
-}
 
+})
 
 
-socket.onmessage = (event: MessageEvent<any>) => {
 
-  const dataview = new DataView(event.data)
 
+socket.on('msg', (data:any) => {
 
+  const dataview = new DataView(data)
 
   const id = dataview.getUint8(0)
 
   if (painters[id] === undefined) {
 
     const container = document.getElementById('cursors')
 
     painters[id] = new Painter(context, container)
 
   }
 
   painters[id].execute(dataview)
 
-}
 
+})
 
+
 
+socket.on('connect_error', () => {
 
+  status.value = colors[4]
 
+})
 
 
 onMounted(() => {
 
   // init canvas
 
   canvas = document.getElementById('canvas') as HTMLCanvasElement
 
+  canvas.width = window.innerWidth * window.devicePixelRatio
 
+  canvas.height = window.innerHeight * window.devicePixelRatio
 
+  canvas.style.width = `${window.innerWidth}px`
 
+  canvas.style.height = `${window.innerHeight}px`
 
   context = canvas.getContext('2d') as CanvasRenderingContext2D
 
   context.lineWidth = 0.7 * window.devicePixelRatio
 
   context.fillStyle = 'rgb(238, 238, 238)'
 
   context.fillRect(0, 0, canvas.width, canvas.height)
 
+  nextTick(() => {
 
+    socket.connect()
 
+  })
 
 })
 
 </script>
 
 <style lang="less" scoped>
 
@@ -111,8 +125,6 @@ onMounted(() => {
 
     display: block;
 
     cursor: crosshair;
 
     touch-action: none;
 
-    width:100vw;
 
-    height:100vh
 
   }
 
 
   #cursors {

+ 7 - 11
src/utils/Recorder.js
View File 

@@ -55,10 +55,8 @@ function Recorder(context, ws) {
 
       cx = x;
 
       cy = y;
 
 
-      if (ws.readyState === WebSocket.OPEN) {
 
-
 
-        ws.send(command.buffer);
 
-
 
+      if (ws.connected) {
 
+        ws.emit("msg", command.buffer)
 
       }
 
 
     },
 
@@ -69,10 +67,8 @@ function Recorder(context, ws) {
 
       let command = commands[1];
 
       command.setUint8(1, 1);
 
 
-      if (ws.readyState === WebSocket.OPEN) {
 
-
 
-        ws.send(command.buffer);
 
-
 
+      if (ws.connected) {
 
+        ws.emit("msg", command.buffer)
 
       }
 
 
     },
 
@@ -134,9 +130,9 @@ function Recorder(context, ws) {
 
       cx = x;
 
       cy = y;
 
 
-      if (ws.readyState === WebSocket.OPEN) {
 
+      if (ws.connected) {
 
 
-        ws.send(command.buffer);
 
+        ws.emit("msg", command.buffer)
 
 
         const md = dx * dx + dy * dy;
 
 
@@ -144,7 +140,7 @@ function Recorder(context, ws) {
 
 
           ws.close();
 
           client.up();
 
-          alert('Please, draw slowly.');
 
+          alert('画慢点~');
 
 
         }

+ 0 - 38
src/utils/axios.ts
View File 

@@ -1,38 +0,0 @@
 
-import axios from 'axios'
 
-import { getActivePinia } from "pinia";
 
-
 
-// 全局loading
 
-const resetLoaing = (type: boolean) => {
 
-  const store = getActivePinia()
 
-  if (!store) return
 
-  const obj = store.state.value
 
-  for (const key in obj) {
 
-    const el = obj[key]
 
-    if ('loading' in el) {
 
-      el.loading = type
 
-      break
 
-    }
 
-  }
 
-
 
-}
 
-
 
-// http request 拦截=>增加是否显示loading
 
-axios.interceptors.request.use(
 
-  (config: any) => {
 
-    const showLoading = config.showLoading || false
 
-    if (showLoading) resetLoaing(true)
 
-    return config
 
-  },
 
-  (err) => { throw err }
 
-)
 
-
 
-// http response 拦截
 
-axios.interceptors.response.use(
 
-  (response) => {
 
-    const data = response.data
 
-    resetLoaing(false)
 
-    return data
 
-  },
 
-  (error) => { throw error }
 
-)
 
-export default axios

+ 2 - 1
src/vite-env.d.ts
View File 

@@ -6,4 +6,5 @@ declare module '*.vue' {
 
   export default component
 
 }
 
 declare module 'js-md5'
 
-declare module '@/utils/*'
 
+declare module '@/utils/*'
 
+declare module 'socket.io-client'

+ 51 - 15
yarn.lock
View File 

@@ -87,6 +87,11 @@
 
     estree-walker "^2.0.1"
 
     picomatch "^2.2.2"
 
 
+"@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==
 
+
 
 "@transloadit/prettier-bytes@0.0.7":
 
   version "0.0.7"
 
   resolved "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz"
 
@@ -652,7 +657,7 @@ debug@^3.2.6, debug@^3.2.7:
 
   dependencies:
 
     ms "^2.1.1"
 
 
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
 
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
 
   version "4.3.4"
 
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
 
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
 
@@ -713,6 +718,22 @@ echarts@^5.4.1:
 
     tslib "2.3.0"
 
     zrender "5.4.1"
 
 
+engine.io-client@~6.2.3:
 
+  version "6.2.3"
 
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"
 
+  integrity sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==
 
+  dependencies:
 
+    "@socket.io/component-emitter" "~3.1.0"
 
+    debug "~4.3.1"
 
+    engine.io-parser "~5.0.3"
 
+    ws "~8.2.3"
 
+    xmlhttprequest-ssl "~2.0.0"
 
+
 
+engine.io-parser@~5.0.3:
 
+  version "5.0.4"
 
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
 
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
 
+
 
 errno@^0.1.1:
 
   version "0.1.8"
 
   resolved "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz"
 
@@ -1996,11 +2017,6 @@ regexpp@^3.2.0:
 
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
 
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 
-resize-detector@^0.3.0:
 
-  version "0.3.0"
 
-  resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.3.0.tgz#fe495112e184695500a8f51e0389f15774cb1cfc"
 
-  integrity sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==
 
-
 
 resolve-from@^4.0.0:
 
   version "4.0.0"
 
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
 
@@ -2131,6 +2147,24 @@ snabbdom@^3.1.0:
 
   resolved "https://registry.npmjs.org/snabbdom/-/snabbdom-3.5.1.tgz"
 
   integrity sha512-wHMNIOjkm/YNE5EM3RCbr/+DVgPg6AqQAX1eOxO46zYNvCXjKP5Y865tqQj3EXnaMBjkxmQA5jFuDpDK/dbfiA==
 
 
+socket.io-client@^4.5.4:
 
+  version "4.5.4"
 
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
 
+  integrity sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==
 
+  dependencies:
 
+    "@socket.io/component-emitter" "~3.1.0"
 
+    debug "~4.3.2"
 
+    engine.io-client "~6.2.3"
 
+    socket.io-parser "~4.2.1"
 
+
 
+socket.io-parser@~4.2.1:
 
+  version "4.2.1"
 
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
 
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
 
+  dependencies:
 
+    "@socket.io/component-emitter" "~3.1.0"
 
+    debug "~4.3.1"
 
+
 
 source-map-js@^1.0.2:
 
   version "1.0.2"
 
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
 
@@ -2331,19 +2365,11 @@ vite@^3.1.8:
 
   optionalDependencies:
 
     fsevents "~2.3.2"
 
 
-vue-demi@*, vue-demi@^0.13.2:
 
+vue-demi@*:
 
   version "0.13.11"
 
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
 
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
 
-vue-echarts@^6.4.0:
 
-  version "6.4.0"
 
-  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-6.4.0.tgz#f960da3319fd6f732583610a549cd19fcb1f84ea"
 
-  integrity sha512-XQWdRoYVjQcdNQsGPuQZwjI229VH9L5X6WKMdJebP0msP6QGxnmOYAEt0F/9cBelonQ8iWMIctKm5AM5PX2Djw==
 
-  dependencies:
 
-    resize-detector "^0.3.0"
 
-    vue-demi "^0.13.2"
 
-
 
 vue-eslint-parser@^9.0.1:
 
   version "9.1.0"
 
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz"
 
@@ -2424,11 +2450,21 @@ wrappy@1:
 
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
 
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 
+ws@~8.2.3:
 
+  version "8.2.3"
 
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
 
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
 
+
 
 xml-name-validator@^4.0.0:
 
   version "4.0.0"
 
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
 
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
 
+xmlhttprequest-ssl@~2.0.0:
 
+  version "2.0.0"
 
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
 
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
+
 
 yallist@^4.0.0:
 
   version "4.0.0"
 
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"