使用vite

2023-10-13 05:45:12 +08:00 · 2023-10-13 05:45:12 +08:00 · 2aadae6b85
commit 2aadae6b85
parent 0865ef39f6
11 changed files with 409 additions and 122 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,129 +4,23 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 .pnpm-debug.log*
 package-lock.json
-# Diagnostic reports (https://nodejs.org/api/report.html)
+node_modules
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
 # nyc test coverage
 .nyc_output
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 # Bower dependency directory (https://bower.io/)
 bower_components
 # node-waf configuration
 .lock-wscript
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
 # Snowpack dependency directory (https://snowpack.dev/)
 web_modules/
 # TypeScript cache
 *.tsbuildinfo
 # Optional npm cache directory
 .npm
 # Optional eslint cache
 .eslintcache
 # Optional stylelint cache
 .stylelintcache
 # Microbundle cache
 .rpt2_cache/
 .rts2_cache_cjs/
 .rts2_cache_es/
 .rts2_cache_umd/
 # Optional REPL history
 .node_repl_history
 # Output of 'npm pack'
 *.tgz
 # Yarn Integrity file
 .yarn-integrity
 # dotenv environment variable files
 .env
 .env.development.local
 .env.test.local
 .env.production.local
 .env.local
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache
 # Next.js build output
 .next
 out
 # Nuxt.js build / generate output
 .nuxt
 dist
 dist-ssr
 *.local
-# Gatsby files
+# Editor directories and files
-.cache/
+.vscode/*
-# Comment in the public line in if your project uses Gatsby and not Next.js
+!.vscode/extensions.json
-# https://nextjs.org/blog/next-9-1#public-directory-support
+.idea
-# public
+.DS_Store
-
+*.suo
-# vuepress build output
+*.ntvs*
-.vuepress/dist
+*.njsproj
-
+*.sln
-# vuepress v2.x temp and cache directory
+*.sw?
 .temp
 .cache
 # Docusaurus cache and generated files
 .docusaurus
 # Serverless directories
 .serverless/
 # FuseBox cache
 .fusebox/
 # DynamoDB Local files
 .dynamodb/
 # TernJS port file
 .tern-port
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 # yarn v2
 .yarn/cache
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webRTC</title>
  </head>
  <body>
    <script type="module" src="./src/main.js"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -5,13 +5,19 @@
  "type": "module",
  "main": "index.js",
  "scripts": {
-    "dev": "nodemon index.js",
+    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "devx": "nodemon index.js",
    "start": "node index.js"
  },
  "author": "",
  "license": "GPL-3.0-or-later",
  "devDependencies": {
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
    "vite": "^4.4.11",
    "vite-plugin-windicss": "^1.9.1",
    "windicss": "^3.5.6"
  },
  "dependencies": {
    "express": "^4.18.2",
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/public/client.js
+++ b/public/client.js
--- a/public/database.js
+++ b/public/database.js
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,253 @@
 import 'virtual:windi.css'
 import 'virtual:windi-devtools'
 import IndexedDB from './database.js'
 import MusicList from './music.js'
 import ClientList from './client.js'
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
 const DELAY = 50              // 默认延迟500ms
 // 将两个ArrayBuffer合并成一个
 function appendBuffer(buffer1, buffer2) {
  const tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
  tmp.set(new Uint8Array(buffer1), 0)
  tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
  return tmp.buffer
 }
 // 读取本地图像
 const imageStore = new IndexedDB('musicDatabase', 1, 'imageObjectStore')
 await imageStore.open()
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
 const musicStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
 await musicStore.open()
 const list = (await musicStore.getAll()).map(item => {
  return { save: true, ...item }
 })
 // 读取本地用户名(本地缓存)
 const name = localStorage.getItem('username') ?? '游客'
 const avatar = localStorage.getItem('avatar') ?? '/favicon.ico'
 // 初始化客户端列表
 const clientList = new ClientList({
  name,
  onexit: async client => {
    console.log(client.name, '离开频道', client)
    // 从列表中移除未缓存的此用户的音乐, 但可能多人都有此音乐且未缓存
    // 因此每条音乐都要检查是否有其他用户也有此音乐, 如果有则不移除
    const 此用户音乐 = client.musicList?.map(item => item.id) || []
    const 无数据音乐 = musicList.list.filter(item => !item.arrayBuffer).filter(item => {
      return 此用户音乐.includes(item.id)
    })
    无数据音乐.forEach(item => {
      const client = clientList.clientlist.find(client => {
        return client.musicList.find(x => x.id === item.id)
      })
      if (!client) musicList.remove(item)
    })
  }
 })
 // 初始化音乐列表(加入本地缓存)
 const musicList = new MusicList({
  list,
  onplay: item => {
    console.log('播放音乐', item.name)
  },
  onstop: item => {
    console.log('停止音乐', item?.name)
  },
  onlike: (item, list) => {
    console.log('喜欢音乐', item.name)
    if (item.arrayBuffer) {
      musicStore.add(item)
      clientList.send('base', JSON.stringify({
        type: 'set_music_list',
        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
      }))
    }
  },
  onunlike: (item, list) => {
    console.log('取消喜欢', item.name)
    if (item.arrayBuffer) {
      musicStore.delete(item.id)
      clientList.send('base', JSON.stringify({
        type: 'set_music_list',
        list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
      }))
    }
  },
  onban: item => {
    console.info('禁止音乐', item.name)
  },
  onunban: item => {
    console.info('解禁音乐', item.name)
  },
  onremove: item => {
    console.info('移除音乐', item.name)
    musicStore.delete(item.id)
  },
  onadd: (item, list) => {
    console.info('添加音乐', item.name)
  },
  onupdate: item => {
    console.info('更新音乐', item.name)
    musicStore.put(item)
  },
  onerror: error => {
    console.error('音乐列表错误', error)
  },
  onload: async item => {
    console.info('加载音乐', item)
    return await new Promise((resolve) => {
      var buffer = new ArrayBuffer(0) // 接收音乐数据
      var count = 0                   // 接收分片计数
      const chunkNumber = Math.ceil(item.size / 1024 / 64) // 64KB每片
      clientList.setChannel(`music-data-${item.id}`, {
        onmessage: async (event, client) => {
          console.log('收到音乐数据 chunk', `${count + 1}/${chunkNumber}`, buffer.byteLength)
          buffer = appendBuffer(buffer, event.data) // 合并分片准备存储
          item.arrayBufferChunks?.push(event.data)  // 保存分片给边下边播
          count++
          if (buffer.byteLength >= item.size) {
            console.log('音乐数据接收完毕')
            item.arrayBuffer = buffer
            event.target.close() // 关闭信道
            resolve(item)
          }
        }
      })
      const client = clientList.clientlist.find(client => {
        return client.musicList.find(x => x.id === item.id)
      })
      console.info('向', client.name, '请求音乐数据')
      const c = Math.ceil(item.size / CHUNK_SIZE)
      console.log('需要接收', c, '个分片')
      clientList.sendto(client.id, 'base', JSON.stringify({
        type: 'get_music_data', id: item.id, channel: `music-data-${item.id}`
      }))
    })
  }
 })
 const ImageList = []
 // 只有一个基本信道, 用于交换和调度信息
 clientList.setChannel('base', {
  onopen: async event => {
    console.debug('打开信道', event.target.label, '广播请求音乐列表和身份信息')
    clientList.send('base', JSON.stringify({ type: 'get_music_list' }))   // 要求对方发送音乐列表
    clientList.send('base', JSON.stringify({ type: 'get_user_profile' })) // 要求对方发送身份信息
  },
  onmessage: async (event, client) => {
    const data = JSON.parse(event.data)
    if (data.type === 'get_user_profile') {
      console.log(client.name, '请求身份信息:', data)
      // 包过大会导致发送失败, 因此需要分开发送
      clientList.sendto(client.id, 'base', JSON.stringify({
        type: 'set_user_profile',
        name: name,
        avatar: avatar,
      }))
      return
    }
    if (data.type === 'set_user_profile') {
      console.log(client.name, '发来身份信息:', data)
      console.log('将身份信息保存到本机记录:', client)
      client.name = data.name
      client.avatar = data.avatar
      // 还需要更新组件的用户信息
      console.log('更新组件的用户信息:', data, client)
      clientList.setAvatar({ id: client.id, ...data })
      return
    }
    if (data.type === 'get_image_list') {
      // webrtc://用户@域名:端口/信道标识/资源ID
    }
    if (data.type === 'get_music_list') {
      const ms = musicList.list.filter(item => item.arrayBuffer)
      console.log(client.name, '请求音乐列表:', ms)
      clientList.sendto(client.id, 'base', JSON.stringify({
        type: 'set_music_list',
        list: ms.map(({ id, name, size, type }) => ({ id, name, size, type }))
      }))
      return
    }
    if (data.type === 'set_music_list') {
      console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
      client.musicList = data.list
      client.musicList.forEach(music => musicList.add(music))
      return
    }
    if (data.type === 'get_music_data') {
      // 建立一个信道, 用于传输音乐数据(接收方已经准备好摘要信息)
      console.log(client.name, '建立一个信道, 用于传输音乐数据', musicList.list)
      musicList.list.filter(item => item.id === data.id).forEach(item => {
        const ch = client.webrtc.createDataChannel(data.channel, { reliable: true })
        ch.onopen = async event => {
          console.log(client.name, `打开 ${data.channel} 信道传输音乐数据`, item.name)
          // 将音乐数据分成多个小块，并逐个发送
          async function sendChunk(dataChannel, data, index = 0, buffer = new ArrayBuffer(0)) {
            while (index < data.byteLength) {
              if (dataChannel.bufferedAmount <= THRESHOLD) {
                const chunk = data.slice(index, index + CHUNK_SIZE)
                dataChannel.send(chunk)
                index += CHUNK_SIZE
                buffer = appendBuffer(buffer, chunk)
              }
              await new Promise((resolve) => setTimeout(resolve, DELAY))
            }
            return buffer
          }
          await sendChunk(ch, item.arrayBuffer)
          console.log(client.name, `获取 ${data.channel} 信道数据结束`, item.name)
          ch.close() // 关闭信道
        }
      })
      return
    }
    console.log('未知类型:', data.type)
  },
  onclose: event => {
    console.log('关闭信道', event.target.label)
  },
  onerror: event => {
    console.error('信道错误', event.target.label, event.error)
  }
 })
 // 延迟1500ms
 //await new Promise((resolve) => setTimeout(resolve, 100))
 // 设置自己的主机名
 const nameInput = document.createElement('input')
 nameInput.type = 'text'
 nameInput.placeholder = '请设置你的昵称'
 nameInput.value = name
 nameInput.onchange = event => {
  localStorage.setItem('username', event.target.value)
  window.location.reload() // 简单刷新页面
 }
 document.body.appendChild(nameInput)
 // 设置标签为自己的头像
 if (localStorage.getItem('avatar')) {
  const favicon = document.createElement('link')
  favicon.rel = 'icon'
  favicon.href = localStorage.getItem('avatar')
  document.head.appendChild(favicon)
 }
 // 设置标题为自己的昵称
 if (localStorage.getItem('username')) {
  document.title = localStorage.getItem('username')
 }
--- a/public/music.js
+++ b/public/music.js
--- a/public/weigets.js
+++ b/public/weigets.js
--- a/style.css
+++ b/style.css
@ -0,0 +1,97 @@
 :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
 body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
 }
 h1 {
  font-size: 3.2em;
  line-height: 1.1;
 }
 #app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }
 .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
 }
 .logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.vanilla:hover {
  filter: drop-shadow(0 0 2em #f7df1eaa);
 }
 .card {
  padding: 2em;
 }
 .read-the-docs {
  color: #888;
 }
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,24 @@
 import { defineConfig } from 'vite'
 import WindiCSS from 'vite-plugin-windicss'
 export default defineConfig({
    server: {
        port: 4096,
        proxy: {
            '/webrtc': {
                target: 'wss://webrtc.satori.love',
                changeOrigin: true,
                ws: true,
            },
            '/entanglement': {
                target: 'wss://webrtc.satori.love',
                changeOrigin: true,
                ws: true,
            },
            '/webhook': 'https://webrtc.satori.love',
        }
    },
    plugins: [
        WindiCSS(),
    ]
 })
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>