├── public
    └── favicon.ico
├── .vscode
    └── extensions.json
├── src
    ├── views
    │   ├── HomeView.vue
    │   └── AboutView.vue
    ├── main.js
    ├── assets
    │   ├── logo.svg
    │   └── base.css
    ├── components
    │   ├── icons
    │   │   ├── IconSupport.vue
    │   │   ├── IconTooling.vue
    │   │   ├── IconCommunity.vue
    │   │   ├── IconDocumentation.vue
    │   │   └── IconEcosystem.vue
    │   ├── HelloWorld.vue
    │   ├── WelcomeItem.vue
    │   └── TheWelcome.vue
    ├── stores
    │   └── counter.js
    ├── router
    │   └── index.js
    └── App.vue
├── .eslintrc.cjs
├── index.html
├── .gitignore
├── vite.config.js
├── package.json
├── LICENSE
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/79W/bilibili-bullet/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import TheWelcome from '@/components/TheWelcome.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <main>
 7 |     <TheWelcome />
 8 |   </main>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import { createPinia } from 'pinia'
 3 | 
 4 | import App from './App.vue'
 5 | import router from './router'
 6 | 
 7 | const app = createApp(App)
 8 | 
 9 | app.use(createPinia())
10 | app.use(router)
11 | 
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | @media (min-width: 1024px) {
 9 |   .about {
10 |     min-height: 100vh;
11 |     display: flex;
12 |     align-items: center;
13 |   }
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>


--------------------------------------------------------------------------------
/src/components/icons/IconSupport.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 |   "root": true,
 6 |   "extends": [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/eslint-config-prettier"
10 |   ],
11 |   "env": {
12 |     "vue/setup-compiler-macros": true
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/stores/counter.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useCounterStore = defineStore({
 4 |   id: 'counter',
 5 |   state: () => ({
 6 |     counter: 0
 7 |   }),
 8 |   getters: {
 9 |     doubleCount: (state) => state.counter * 2
10 |   },
11 |   actions: {
12 |     increment() {
13 |       this.counter++
14 |     }
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const router = createRouter({
 5 |   history: createWebHistory(import.meta.env.BASE_URL),
 6 |   routes: [
 7 |     {
 8 |       path: '/',
 9 |       name: 'home',
10 |       component: HomeView
11 |     },
12 |     {
13 |       path: '/about',
14 |       name: 'about',
15 |       // route level code-splitting
16 |       // this generates a separate chunk (About.[hash].js) for this route
17 |       // which is lazy-loaded when the route is visited.
18 |       component: () => import('../views/AboutView.vue')
19 |     }
20 |   ]
21 | })
22 | 
23 | export default router
24 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | import vueJsx from "@vitejs/plugin-vue-jsx";
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [vue(), vueJsx()],
10 |   resolve: {
11 |     alias: {
12 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
13 |     },
14 |   },
15 |   server: {
16 |     host: "0.0.0.0",
17 |     port: 3001,
18 |     open: true,
19 |     hmr: true,
20 |     proxy: {
21 |       "/api": {
22 |         target: "https://api.live.bilibili.com",
23 |         changeOrigin: true,
24 |         rewrite: (path) => path.replace(/^\/api/, ""),
25 |       },
26 |     },
27 |   },
28 | });
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bzsocket",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "preview": "vite preview --port 5050",
 8 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.26.1",
12 |     "less": "^4.1.2",
13 |     "less-loader": "^10.2.0",
14 |     "pako": "^2.0.4",
15 |     "pinia": "^2.0.13",
16 |     "vue": "^3.2.33",
17 |     "vue-router": "^4.0.14"
18 |   },
19 |   "devDependencies": {
20 |     "@rushstack/eslint-patch": "^1.1.0",
21 |     "@vitejs/plugin-vue": "^2.3.1",
22 |     "@vitejs/plugin-vue-jsx": "^1.3.10",
23 |     "@vue/eslint-config-prettier": "^7.0.0",
24 |     "eslint": "^8.5.0",
25 |     "eslint-plugin-vue": "^8.2.0",
26 |     "prettier": "^2.5.1",
27 |     "vite": "^2.9.5"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | defineProps({
 3 |   msg: {
 4 |     type: String,
 5 |     required: true
 6 |   }
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="greetings">
12 |     <h1 class="green">{{ msg }}</h1>
13 |     <h3>
14 |       You’ve successfully created a project with
15 |       <a target="_blank" href="https://vitejs.dev/">Vite</a> +
16 |       <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
17 |     </h3>
18 |   </div>
19 | </template>
20 | 
21 | <style scoped>
22 | h1 {
23 |   font-weight: 500;
24 |   font-size: 2.6rem;
25 |   top: -10px;
26 | }
27 | 
28 | h3 {
29 |   font-size: 1.2rem;
30 | }
31 | 
32 | .greetings h1,
33 | .greetings h3 {
34 |   text-align: center;
35 | }
36 | 
37 | @media (min-width: 1024px) {
38 |   .greetings h1,
39 |   .greetings h3 {
40 |     text-align: left;
41 |   }
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
 1 | <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 2 | <template>
 3 |   <svg
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 6 |     aria-hidden="true"
 7 |     role="img"
 8 |     class="iconify iconify--mdi"
 9 |     width="24"
10 |     height="24"
11 |     preserveAspectRatio="xMidYMid meet"
12 |     viewBox="0 0 24 24"
13 |   >
14 |     <path
15 |       d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
16 |       fill="currentColor"
17 |     ></path>
18 |   </svg>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 我是一只虫子
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/icons/IconDocumentation.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
3 |     <path
4 |       d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/components/WelcomeItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <i>
 4 |       <slot name="icon"></slot>
 5 |     </i>
 6 |     <div class="details">
 7 |       <h3>
 8 |         <slot name="heading"></slot>
 9 |       </h3>
10 |       <slot></slot>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <style scoped>
16 | .item {
17 |   margin-top: 2rem;
18 |   display: flex;
19 | }
20 | 
21 | .details {
22 |   flex: 1;
23 |   margin-left: 1rem;
24 | }
25 | 
26 | i {
27 |   display: flex;
28 |   place-items: center;
29 |   place-content: center;
30 |   width: 32px;
31 |   height: 32px;
32 | 
33 |   color: var(--color-text);
34 | }
35 | 
36 | h3 {
37 |   font-size: 1.2rem;
38 |   font-weight: 500;
39 |   margin-bottom: 0.4rem;
40 |   color: var(--color-heading);
41 | }
42 | 
43 | @media (min-width: 1024px) {
44 |   .item {
45 |     margin-top: 0;
46 |     padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
47 |   }
48 | 
49 |   i {
50 |     top: calc(50% - 25px);
51 |     left: -26px;
52 |     position: absolute;
53 |     border: 1px solid var(--color-border);
54 |     background: var(--color-background);
55 |     border-radius: 8px;
56 |     width: 50px;
57 |     height: 50px;
58 |   }
59 | 
60 |   .item:before {
61 |     content: ' ';
62 |     border-left: 1px solid var(--color-border);
63 |     position: absolute;
64 |     left: 0;
65 |     bottom: calc(50% + 25px);
66 |     height: calc(50% - 25px);
67 |   }
68 | 
69 |   .item:after {
70 |     content: ' ';
71 |     border-left: 1px solid var(--color-border);
72 |     position: absolute;
73 |     left: 0;
74 |     top: calc(50% + 25px);
75 |     height: calc(50% - 25px);
76 |   }
77 | 
78 |   .item:first-of-type:before {
79 |     display: none;
80 |   }
81 | 
82 |   .item:last-of-type:after {
83 |     display: none;
84 |   }
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
3 |     <path
4 |       d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   position: relative;
59 |   font-weight: normal;
60 | }
61 | 
62 | body {
63 |   min-height: 100vh;
64 |   color: var(--color-text);
65 |   background: var(--color-background);
66 |   transition: color 0.5s, background-color 0.5s;
67 |   line-height: 1.6;
68 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
69 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
70 |   font-size: 15px;
71 |   text-rendering: optimizeLegibility;
72 |   -webkit-font-smoothing: antialiased;
73 |   -moz-osx-font-smoothing: grayscale;
74 | }
75 | 


--------------------------------------------------------------------------------
/src/components/TheWelcome.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import WelcomeItem from './WelcomeItem.vue'
 3 | import DocumentationIcon from './icons/IconDocumentation.vue'
 4 | import ToolingIcon from './icons/IconTooling.vue'
 5 | import EcosystemIcon from './icons/IconEcosystem.vue'
 6 | import CommunityIcon from './icons/IconCommunity.vue'
 7 | import SupportIcon from './icons/IconSupport.vue'
 8 | </script>
 9 | 
10 | <template>
11 |   <WelcomeItem>
12 |     <template #icon>
13 |       <DocumentationIcon />
14 |     </template>
15 |     <template #heading>Documentation</template>
16 | 
17 |     Vue’s
18 |     <a target="_blank" href="https://vuejs.org/">official documentation</a>
19 |     provides you with all information you need to get started.
20 |   </WelcomeItem>
21 | 
22 |   <WelcomeItem>
23 |     <template #icon>
24 |       <ToolingIcon />
25 |     </template>
26 |     <template #heading>Tooling</template>
27 | 
28 |     This project is served and bundled with
29 |     <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
30 |     setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
31 |     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
32 |     your components and web pages, check out
33 |     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
34 |     <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
35 |       >Cypress Component Testing</a
36 |     >.
37 | 
38 |     <br />
39 | 
40 |     More instructions are available in <code>README.md</code>.
41 |   </WelcomeItem>
42 | 
43 |   <WelcomeItem>
44 |     <template #icon>
45 |       <EcosystemIcon />
46 |     </template>
47 |     <template #heading>Ecosystem</template>
48 | 
49 |     Get official tools and libraries for your project:
50 |     <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
51 |     <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
52 |     <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
53 |     <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
54 |     resources, we suggest paying
55 |     <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
56 |     a visit.
57 |   </WelcomeItem>
58 | 
59 |   <WelcomeItem>
60 |     <template #icon>
61 |       <CommunityIcon />
62 |     </template>
63 |     <template #heading>Community</template>
64 | 
65 |     Got stuck? Ask your question on
66 |     <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
67 |     <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
68 |     You should also subscribe to
69 |     <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
70 |     <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
71 |     twitter account for latest news in the Vue world.
72 |   </WelcomeItem>
73 | 
74 |   <WelcomeItem>
75 |     <template #icon>
76 |       <SupportIcon />
77 |     </template>
78 |     <template #heading>Support Vue</template>
79 | 
80 |     As an independent project, Vue relies on community backing for its sustainability. You can help
81 |     us by
82 |     <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
83 |   </WelcomeItem>
84 | </template>
85 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <div class="top">
  4 |       <input type="text" v-model="vlaue" />
  5 |       <button @click="onClickShow">查看</button>
  6 |     </div>
  7 | 
  8 |     <div class="content">
  9 |       <div>
 10 |         <p v-for="ol in openLive" :key="ol">{{ ol }}</p>
 11 |       </div>
 12 |       <div>
 13 |         <p v-for="st in sendText" :key="st">{{ st }}</p>
 14 |       </div>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script setup>
 20 | import { ref } from "vue";
 21 | import Axios from "axios";
 22 | import pako from "pako";
 23 | 
 24 | const vlaue = ref();
 25 | 
 26 | const openLive = ref([]);
 27 | const sendText = ref([]);
 28 | 
 29 | async function onClickShow() {
 30 |   console.log(vlaue.value);
 31 | 
 32 |   if (!vlaue.value) return;
 33 |   const roomData = await getRoomId(vlaue.value);
 34 |   if (roomData.code) {
 35 |     alert("房间号错误");
 36 |     return;
 37 |   }
 38 |   openLive.value = [];
 39 |   sendText.value = [];
 40 |   const socketData = await getWebSocketHost(roomData.data.room_id);
 41 |   if (socketData.code) {
 42 |     alert("房间号错误");
 43 |     return;
 44 |   }
 45 |   openSocket(socketData.data.host, roomData.data.room_id);
 46 | }
 47 | 
 48 | async function getRoomId(id) {
 49 |   const res = await Axios.get(`/api/room/v1/Room/room_init?id=${id}`);
 50 |   return res.data;
 51 | }
 52 | 
 53 | async function getWebSocketHost(roomid) {
 54 |   const res = await Axios.get(
 55 |     `/api/room/v1/Danmu/getConf?room_id=${roomid}&platform=pc&player=web`
 56 |   );
 57 |   return res.data;
 58 | }
 59 | 
 60 | // 从buffer中读取int
 61 | const readInt = function (buffer, start, len) {
 62 |   let result = 0;
 63 |   for (let i = len - 1; i >= 0; i--) {
 64 |     result += Math.pow(256, len - i - 1) * buffer[start + i];
 65 |   }
 66 |   return result;
 67 | };
 68 | 
 69 | /**
 70 |  * blob blob数据
 71 |  * call 回调 解析数据会通过回调返回数据
 72 |  */
 73 | function decode(blob, call) {
 74 |   // 文本解码器
 75 |   var textDecoder = new TextDecoder("utf-8");
 76 |   let reader = new FileReader();
 77 |   reader.onload = function (e) {
 78 |     let buffer = new Uint8Array(e.target.result);
 79 |     let result = {};
 80 |     result.packetLen = readInt(buffer, 0, 4);
 81 |     result.headerLen = readInt(buffer, 4, 2);
 82 |     result.ver = readInt(buffer, 6, 2);
 83 |     result.op = readInt(buffer, 8, 4);
 84 |     result.seq = readInt(buffer, 12, 4);
 85 |     if (result.op == 5) {
 86 |       result.body = [];
 87 |       let offset = 0;
 88 |       while (offset < buffer.length) {
 89 |         let packetLen = readInt(buffer, offset + 0, 4);
 90 |         let headerLen = 16; // readInt(buffer,offset + 4,4)
 91 |         let data = buffer.slice(offset + headerLen, offset + packetLen);
 92 | 
 93 |         let body = "{}";
 94 |         if (result.ver == 2) {
 95 |           //协议版本为 2 时  数据有进行压缩 通过pako.js 进行解压
 96 |           body = textDecoder.decode(pako.inflate(data));
 97 |         } else {
 98 |           //协议版本为 0 时  数据没有进行压缩
 99 |           body = textDecoder.decode(data);
100 |         }
101 |         if (body) {
102 |           // 同一条消息中可能存在多条信息，用正则筛出来
103 |           // eslint-disable-next-line no-control-regex
104 |           const group = body.split(/[\x00-\x1f]+/);
105 |           group.forEach((item) => {
106 |             try {
107 |               result.body.push(JSON.parse(item));
108 |             } catch (e) {
109 |               // 忽略非JSON字符串，通常情况下为分隔符
110 |             }
111 |           });
112 |         }
113 |         offset += packetLen;
114 |       }
115 |     }
116 |     //回调
117 |     call(result);
118 |   };
119 |   reader.readAsArrayBuffer(blob);
120 | }
121 | 
122 | function openSocket(url, room_id) {
123 |   let timer = null;
124 |   let ws = new WebSocket(`wss://${url}/sub`);
125 |   let json = {
126 |     uid: 0,
127 |     roomid: room_id, //上面获取到的room_id
128 |     protover: 1,
129 |     platform: "web",
130 |     clientver: "1.4.0",
131 |   };
132 |   // WebSocket连接成功回调
133 |   ws.onopen = function () {
134 |     console.log("WebSocket 已连接上");
135 |     ws.send(getCertification(JSON.stringify(json)).buffer);
136 |     //心跳包的定时器
137 |     timer = setInterval(function () {
138 |       //定时器 注意声明timer变量
139 |       var n1 = new ArrayBuffer(16);
140 |       var i = new DataView(n1);
141 |       i.setUint32(0, 0), //封包总大小
142 |         i.setUint16(4, 16), //头部长度
143 |         i.setUint16(6, 1), //协议版本
144 |         i.setUint32(8, 2), // 操作码 2 心跳包
145 |         i.setUint32(12, 1); //就1
146 |       ws.send(i.buffer); //发送
147 |     }, 30000);
148 |     //组合认证数据包 并发送
149 |   };
150 | 
151 |   //WebSocket接收数据回调
152 |   ws.onmessage = function (evt) {
153 |     var blob = evt.data;
154 |     //对数据进行解码 decode方法
155 |     decode(blob, function (packet) {
156 |       //解码成功回调
157 |       if (packet.op == 5) {
158 |         //会同时有多个 数发过来 所以要循环
159 |         for (let i = 0; i < packet.body.length; i++) {
160 |           var element = packet.body[i];
161 |           //做一下简单的打印
162 |           console.log(element); //数据格式从打印中就可以分析出来啦
163 | 
164 |           //cmd = DANMU_MSG 是弹幕
165 |           if (element.cmd == "DANMU_MSG") {
166 |             sendText.value.push(
167 |               `uid:${element.info[2][0]},用户:${element.info[2][1]},说:${element.info[1]}`
168 |             );
169 |             console.log(
170 |               "uid: " +
171 |                 element.info[2][0] +
172 |                 " 用户: " +
173 |                 element.info[2][1] +
174 |                 " \n内容: " +
175 |                 element.info[1]
176 |             );
177 |           }
178 |           //cmd = INTERACT_WORD 有人进入直播了
179 |           else if (element.cmd == "INTERACT_WORD") {
180 |             openLive.value.push(`进入直播: ${element.data.uname}`);
181 |             console.log("进入直播: " + element.data.uname);
182 |           }
183 |           //还有其他的
184 |         }
185 |       }
186 |     });
187 |   };
188 | 
189 |   // WebSocket连接关闭回调
190 |   ws.onclose = function () {
191 |     console.log("连接已关闭");
192 |     if (timer != null) clearInterval(timer);
193 |   };
194 | }
195 | 
196 | //组合认证数据包
197 | function getCertification(json) {
198 |   var bytes = str2bytes(json); //字符串转bytes
199 |   var n1 = new ArrayBuffer(bytes.length + 16);
200 |   var i = new DataView(n1);
201 |   i.setUint32(0, bytes.length + 16), //封包总大小
202 |     i.setUint16(4, 16), //头部长度
203 |     i.setUint16(6, 1), //协议版本
204 |     i.setUint32(8, 7), //操作码 7表示认证并加入房间
205 |     i.setUint32(12, 1); //就1
206 |   for (var r = 0; r < bytes.length; r++) {
207 |     i.setUint8(16 + r, bytes[r]); //把要认证的数据添加进去
208 |   }
209 |   return i; //返回
210 | }
211 | 
212 | //字符串转bytes //这个方法是从网上找的QAQ
213 | function str2bytes(str) {
214 |   const bytes = [];
215 |   let c;
216 |   const len = str.length;
217 |   for (let i = 0; i < len; i++) {
218 |     c = str.charCodeAt(i);
219 |     if (c >= 0x010000 && c <= 0x10ffff) {
220 |       bytes.push(((c >> 18) & 0x07) | 0xf0);
221 |       bytes.push(((c >> 12) & 0x3f) | 0x80);
222 |       bytes.push(((c >> 6) & 0x3f) | 0x80);
223 |       bytes.push((c & 0x3f) | 0x80);
224 |     } else if (c >= 0x000800 && c <= 0x00ffff) {
225 |       bytes.push(((c >> 12) & 0x0f) | 0xe0);
226 |       bytes.push(((c >> 6) & 0x3f) | 0x80);
227 |       bytes.push((c & 0x3f) | 0x80);
228 |     } else if (c >= 0x000080 && c <= 0x0007ff) {
229 |       bytes.push(((c >> 6) & 0x1f) | 0xc0);
230 |       bytes.push((c & 0x3f) | 0x80);
231 |     } else {
232 |       bytes.push(c & 0xff);
233 |     }
234 |   }
235 |   return bytes;
236 | }
237 | </script>
238 | 
239 | <style lang="less">
240 | body {
241 |   padding: 0;
242 |   margin: 0;
243 | }
244 | </style>
245 | <style lang="less" scoped>
246 | .home {
247 |   display: flex;
248 |   flex-direction: column;
249 |   align-items: center;
250 |   justify-content: center;
251 |   .top {
252 |     display: flex;
253 |   }
254 |   .content {
255 |     display: flex;
256 |   }
257 | }
258 | </style>
259 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 需求：实时获取直播间的弹幕
  2 | 
  3 | 我们打开一个B站的直播间
  4 | 
  5 | ```javascript
  6 | https://live.bilibili.com/23423267?session_id=6db8b01d511cae96d90825a02161af46_E97F63BD-7769-40B1-8239-2CFC7294000A&launch_id=1000218&hotRank=0&spm_id_from=333.1007.partition_recommend.content.click
  7 | ```
  8 | 
  9 | 然后我们删除 `?`即以后的所有内容 就剩下这个链接了
 10 | 
 11 | ```javascript
 12 | https://live.bilibili.com/23423267
 13 | ```
 14 | 
 15 | 这里可以看到一串数字 这并不是真实的 直播间ID
 16 | 
 17 | #### 获取真实直播间ID
 18 | 
 19 | ```javascript
 20 | // 注意ID
 21 | https://api.live.bilibili.com/room/v1/Room/room_init?id=23423267
 22 | ```
 23 | 
 24 | 这里需要填写个ID 这就是 网页URL 上面的数字
 25 | 
 26 | ```javascript
 27 | async function getRoomId(id) {
 28 |   const res = await Axios.get(`https://api.live.bilibili.com/room/v1/Room/room_init?id=${id}`);
 29 |   return res.data;
 30 | }
 31 | ```
 32 | 
 33 | 返回值
 34 | 
 35 | ```javascript
 36 | {
 37 |   "code": 0,
 38 |   "msg": "ok",
 39 |   "message": "ok",
 40 |   "data": {
 41 |     "room_id": 23423267,
 42 |     "short_id": 0,
 43 |     "uid": 431856380,
 44 |     "need_p2p": 0,
 45 |     "is_hidden": false,
 46 |     "is_locked": false,
 47 |     "is_portrait": false,
 48 |     "live_status": 1,
 49 |     "hidden_till": 0,
 50 |     "lock_till": 0,
 51 |     "encrypted": false,
 52 |     "pwd_verified": false,
 53 |     "live_time": 1650773392,
 54 |     "room_shield": 0,
 55 |     "is_sp": 0,
 56 |     "special_type": 0
 57 |   }
 58 | }
 59 | ```
 60 | 
 61 | 这里数据会反回真实的直播间ID 也就是：`room_id`
 62 | 
 63 | #### 获取WebSocket地址
 64 | 
 65 | 我们有了真实的房间ID就需要获取 Socket 交互的地址
 66 | 
 67 | ```javascript
 68 | // roomid ===》 room_id
 69 | https://api.live.bilibili.com/room/v1/Danmu/getConf?room_id=${roomid}&platform=pc&player=web
 70 | ```
 71 | 
 72 | 写个方法然后方便进行调用
 73 | 
 74 | ```javascript
 75 | async function getWebSocketHost(roomid) {
 76 |   const res = await Axios.get(
 77 |     `https://api.live.bilibili.com/room/v1/Danmu/getConf?room_id=${roomid}&platform=pc&player=web`
 78 |   );
 79 |   return res.data;
 80 | }
 81 | ```
 82 | 
 83 | 返回值
 84 | 
 85 | ```javascript
 86 | {
 87 |   "code": 0,
 88 |   "msg": "ok",
 89 |   "message": "ok",
 90 |   "data": {
 91 |     "refresh_row_factor": 0.125,
 92 |     "refresh_rate": 100,
 93 |     "max_delay": 5000,
 94 |     "port": 2243,
 95 |     "host": "broadcastlv.chat.bilibili.com",
 96 |     "host_server_list": [
 97 |       {
 98 |         "host": "hw-sh-live-comet-01.chat.bilibili.com",
 99 |         "port": 2243,
100 |         "wss_port": 443,
101 |         "ws_port": 2244
102 |       },
103 |       {
104 |         "host": "tx-bj-live-comet-04.chat.bilibili.com",
105 |         "port": 2243,
106 |         "wss_port": 443,
107 |         "ws_port": 2244
108 |       },
109 |       {
110 |         "host": "broadcastlv.chat.bilibili.com",
111 |         "port": 2243,
112 |         "wss_port": 443,
113 |         "ws_port": 2244
114 |       }
115 |       ],
116 |       "server_list": [
117 |       {
118 |         "host": "119.3.126.45",
119 |         "port": 2243
120 |       },
121 |       {
122 |         "host": "49.232.64.111",
123 |         "port": 2243
124 |       },
125 |       {
126 |         "host": "broadcastlv.chat.bilibili.com",
127 |         "port": 2243
128 |       },
129 |       {
130 |         "host": "119.3.126.45",
131 |         "port": 80
132 |       },
133 |       {
134 |         "host": "49.232.64.111",
135 |         "port": 80
136 |       },
137 |       {
138 |         "host": "broadcastlv.chat.bilibili.com",
139 |         "port": 80
140 |       }
141 |   	],
142 |     "token": "_xRKFgXU73NHsSrvh4jAKiQ8CRFZMqao1r6xarlMgqNppUZRbmjVK-VcYxU1AgoPKkJ7ruT27X9AwpVsM8F92xux8jKu4Nlm6tfOYyUCsuGSvxLRD1damLw5GpeRewYjXCVfK7ylDwCHhyisaaII0IRIdw=="
143 |   }
144 | }
145 | ```
146 | 
147 | 我们直接使用 `host`字段就可以
148 | 
149 | 这里需要注意 链接webSocket需要进行拼接 在B站直播间进行`F12`查看
150 | 
151 | ![image-20220424125640854](https://cdn.jsdelivr.net/gh/duogongneng/OneMyBlogImg@master/image-20220424125640854.png)
152 | 
153 | 最后我们的WebSocket链接拼接成
154 | 
155 | ```
156 | wss://broadcastlv.chat.bilibili.com/sub
157 | ```
158 | 
159 | 然后我们就可以进行连接了 我们还是写个方法 然后在这个方法里面进行处理
160 | 
161 | ```js
162 | function openSocket(url, room_id) {
163 |   let ws = new WebSocket(`wss://${url}/sub`);
164 |   let json = {
165 |     uid: 0, // 0表示未登录
166 |     roomid: room_id, //上面获取到的room_id
167 |     protover: 1,
168 |     platform: "web",
169 |     clientver: "1.4.0",
170 |   };
171 |   // WebSocket连接成功回调
172 |   ws.onopen = function () {
173 |     console.log("WebSocket 已连接上");
174 |     ws.send(getCertification(JSON.stringify(json)).buffer);
175 |     //组合认证数据包 并发送
176 |   };
177 | 
178 | 
179 |   // WebSocket连接关闭回调
180 |   ws.onclose = function () {
181 |     console.log("连接已关闭");
182 |   };
183 | }
184 | ```
185 | 
186 | **注意点：**
187 | 
188 | - json 数据 这是我们需要提交进行认证使用的否则是连接不上的
189 | - 这里用到一个方法下面会进行讲解 因为b站接受的数据需要进行封包处理才能连接
190 | - 还需要一个奖字符串转 bytes
191 | 
192 | #### 封包格式
193 | 
194 | 封包由头部和数据组成，**字节序均为大端模式**
195 | 
196 | 头部格式：
197 | 
198 | | 偏移量 | 长度 | 含义                  |
199 | | ------ | ---- | --------------------- |
200 | | 0      | 4    | 封包总大小            |
201 | | 4      | 2    | 头部长度              |
202 | | 6      | 2    | 协议版本，目前是1     |
203 | | 8      | 4    | 操作码（封包类型）    |
204 | | 12     | 4    | sequence，可以取常数1 |
205 | 
206 | 已知的操作码：
207 | 
208 | | 操作码 | 含义                              |
209 | | ------ | --------------------------------- |
210 | | 2      | 客户端发送的心跳包                |
211 | | 3      | 人气值，数据不是JSON，是4字节整数 |
212 | | 5      | 命令，数据中`['cmd']`表示具体命令 |
213 | | 7      | 认证并加入房间                    |
214 | | 8      | 服务器发送的心跳包                |
215 | 
216 | 数据格式：一般为JSON字符串UTF-8编码
217 | 
218 | ```js
219 | //组合认证数据包
220 | function getCertification(json) {
221 |   var bytes = str2bytes(json); //字符串转bytes
222 |   var n1 = new ArrayBuffer(bytes.length + 16);
223 |   var i = new DataView(n1);
224 |   i.setUint32(0, bytes.length + 16), //封包总大小
225 |     i.setUint16(4, 16), //头部长度
226 |     i.setUint16(6, 1), //协议版本
227 |     i.setUint32(8, 7), //操作码 7表示认证并加入房间
228 |     i.setUint32(12, 1); //就1
229 |   for (var r = 0; r < bytes.length; r++) {
230 |     i.setUint8(16 + r, bytes[r]); //把要认证的数据添加进去
231 |   }
232 |   return i; //返回
233 | }
234 | ```
235 | 
236 | **JavaScript DataView**
237 | 
238 | DataView提供了用于在ArrayBuffer中读取和写入多种数字类型的低级接口。
239 | 
240 | 让我们看看JavaScript的列表< strong> DataView 方法及其说明。
241 | 
242 | | 方法                  | 说明                                                         |
243 | | --------------------- | ------------------------------------------------------------ |
244 | | DataView.getFloat32() | DataView.getFloat32()方法用于在指定位置获取32位浮点数。      |
245 | | DataView.getFloat64() | DataView.getFloat64()方法用于在指定位置获取64位float(double)数字。 |
246 | | DataView.getInt16()   | DataView.getInt16()方法用于在指定位置获取带符号的16位整数(短)数字。 |
247 | | Dataview.getInt32()   | DataView.getInt32()方法用于在指定位置获取带符号的32位整数(长整数)。 |
248 | | DataView.getInt8()    | DataView.getInt8()方法用于在指定位置获取带符号的8位整数(字节)数字。 |
249 | | DataView.getUint16()  | DataView.getUint16()方法用于在指定位置获取无符号的16位整数(无符号的短整数)。 |
250 | | DataView.getUint32()  | DataView.getUint32()方法用于在指定位置获取无符号的32位整数(无符号长整数)。 |
251 | | DataView.getUint8()   | DataView.getUint8()方法用于在指定位置获取无符号的8位整数(无符号字节)数字。 |
252 | 
253 | ```js
254 | //字符串转bytes //这个方法是从网上找的QAQ
255 | function str2bytes(str) {
256 |   const bytes = [];
257 |   let c;
258 |   const len = str.length;
259 |   for (let i = 0; i < len; i++) {
260 |     c = str.charCodeAt(i);
261 |     if (c >= 0x010000 && c <= 0x10ffff) {
262 |       bytes.push(((c >> 18) & 0x07) | 0xf0);
263 |       bytes.push(((c >> 12) & 0x3f) | 0x80);
264 |       bytes.push(((c >> 6) & 0x3f) | 0x80);
265 |       bytes.push((c & 0x3f) | 0x80);
266 |     } else if (c >= 0x000800 && c <= 0x00ffff) {
267 |       bytes.push(((c >> 12) & 0x0f) | 0xe0);
268 |       bytes.push(((c >> 6) & 0x3f) | 0x80);
269 |       bytes.push((c & 0x3f) | 0x80);
270 |     } else if (c >= 0x000080 && c <= 0x0007ff) {
271 |       bytes.push(((c >> 6) & 0x1f) | 0xc0);
272 |       bytes.push((c & 0x3f) | 0x80);
273 |     } else {
274 |       bytes.push(c & 0xff);
275 |     }
276 |   }
277 |   return bytes;
278 | }
279 | ```
280 | 
281 | 上面这两个方法是进行认证使用也就是进行连接这一步 就算完成了
282 | 
283 | 链接上不算完成 B站的心跳是30秒一次也就是
284 | 
285 | 我们可以在 连接的时候写个定时器 每30秒进行连接一次 然后在连接关闭的时候进行 清除定时器
286 | 
287 | 我们来改造 `openSocket` 方法
288 | 
289 | ```js
290 | function openSocket(url, room_id) {
291 | 	let timer = null
292 |   let ws = new WebSocket(`wss://${url}/sub`);
293 |   let json = {
294 |     uid: 0, // 0表示未登录
295 |     roomid: room_id, //上面获取到的room_id
296 |     protover: 1,
297 |     platform: "web",
298 |     clientver: "1.4.0",
299 |   };
300 |   // WebSocket连接成功回调
301 |   ws.onopen = function () {
302 |     console.log("WebSocket 已连接上");
303 |     ws.send(getCertification(JSON.stringify(json)).buffer);
304 |     //组合认证数据包 并发送
305 |     
306 |     //心跳包的定时器
307 |     timer = setInterval(function () {
308 |       //定时器 注意声明timer变量
309 |       var n1 = new ArrayBuffer(16);
310 |       var i = new DataView(n1);
311 |       i.setUint32(0, 0), //封包总大小
312 |         i.setUint16(4, 16), //头部长度
313 |         i.setUint16(6, 1), //协议版本
314 |         i.setUint32(8, 2), // 操作码 2 心跳包
315 |         i.setUint32(12, 1); //就1
316 |       ws.send(i.buffer); //发送
317 |     }, 30000);
318 |   };
319 | 
320 | 
321 |   // WebSocket连接关闭回调
322 |   ws.onclose = function () {
323 |     console.log("连接已关闭");
324 |     if (timer != null) clearInterval(timer);
325 |   };
326 | }
327 | ```
328 | 
329 | 这连接就算真正的完事了
330 | 
331 | 那么接下来就是获取消息了
332 | 
333 | 这个应该是放在 `openSocket` 方法里面的
334 | 
335 | ```js
336 | //WebSocket接收数据回调
337 | ws.onmessage = function (evt) {
338 |   var blob = evt.data;
339 |   //对数据进行解码 decode方法
340 |   decode(blob, function (packet) {
341 | 
342 |   }
343 |  );
344 | };
345 | ```
346 | 
347 | 我们可以看下控制台数据
348 | 
349 | ![image-20220424132518466](https://cdn.jsdelivr.net/gh/duogongneng/OneMyBlogImg@master/image-20220424132518466.png)
350 | 
351 | 这里可以看到又一些数据是没有进行压缩的 可以直接进行使用的
352 | 
353 | 但是还有一些数据是进行压缩了的
354 | 
355 | ![image-20220424132603712](https://cdn.jsdelivr.net/gh/duogongneng/OneMyBlogImg@master/image-20220424132603712.png)
356 | 
357 | 我们就可以对这两种情况进行分析
358 | 
359 | 我们创建`decode`函数
360 | 
361 | ```js
362 | /**
363 |  * blob blob数据
364 |  * call 回调 解析数据会通过回调返回数据
365 |  */
366 | function decode(blob, call) {
367 |   // 文本解码器
368 | 	var textDecoder = new TextDecoder("utf-8");
369 |   let reader = new FileReader();
370 |   reader.onload = function (e) {
371 |     let buffer = new Uint8Array(e.target.result);
372 |     let result = {};
373 |     result.packetLen = readInt(buffer, 0, 4);
374 |     result.headerLen = readInt(buffer, 4, 2);
375 |     result.ver = readInt(buffer, 6, 2);
376 |     result.op = readInt(buffer, 8, 4);
377 |     result.seq = readInt(buffer, 12, 4);
378 |     if (result.op == 5) {
379 |       result.body = [];
380 |       let offset = 0;
381 |       while (offset < buffer.length) {
382 |         let packetLen = readInt(buffer, offset + 0, 4);
383 |         let headerLen = 16; // readInt(buffer,offset + 4,4)
384 |         let data = buffer.slice(offset + headerLen, offset + packetLen);
385 | 
386 |         let body = "{}";
387 |         if (result.ver == 2) {
388 |           //协议版本为 2 时  数据有进行压缩 通过pako.js 进行解压
389 |           body = textDecoder.decode(pako.inflate(data));
390 |         } else {
391 |           //协议版本为 0 时  数据没有进行压缩
392 |           body = textDecoder.decode(data);
393 |         }
394 |         if (body) {
395 |           // 同一条消息中可能存在多条信息，用正则筛出来
396 |           // eslint-disable-next-line no-control-regex
397 |           const group = body.split(/[\x00-\x1f]+/);
398 |           group.forEach((item) => {
399 |             try {
400 |               result.body.push(JSON.parse(item));
401 |             } catch (e) {
402 |               // 忽略非JSON字符串，通常情况下为分隔符
403 |             }
404 |           });
405 |         }
406 |         offset += packetLen;
407 |       }
408 |     }
409 |     //回调
410 |     call(result);
411 |   };
412 |   reader.readAsArrayBuffer(blob);
413 | }
414 | ```
415 | 
416 | 这里使用了一个方法
417 | 
418 | ```js
419 | // 从buffer中读取int
420 | const readInt = function (buffer, start, len) {
421 |   let result = 0;
422 |   for (let i = len - 1; i >= 0; i--) {
423 |     result += Math.pow(256, len - i - 1) * buffer[start + i];
424 |   }
425 |   return result;
426 | };
427 | ```
428 | 
429 | 当返回值协议是2的时候我们需要进行解压然后在返回数据
430 | 
431 | 这里我们解压用到一个包是`pako.js` https://www.npmjs.com/package/pako
432 | 
433 | 然后我们继续完善 `ws.onmessage`
434 | 
435 | ```js
436 | //WebSocket接收数据回调
437 | ws.onmessage = function (evt) {
438 |   var blob = evt.data;
439 |   //对数据进行解码 decode方法
440 |   decode(blob, function (packet) {
441 | 		//解码成功回调
442 |       if (packet.op == 5) {
443 |         //会同时有多个 数发过来 所以要循环
444 |         for (let i = 0; i < packet.body.length; i++) {
445 |           var element = packet.body[i];
446 |           //做一下简单的打印
447 |           console.log(element); //数据格式从打印中就可以分析出来啦
448 |           //cmd = DANMU_MSG 是弹幕
449 |           if (element.cmd == "DANMU_MSG") {
450 |             console.log(
451 |               "uid: " +
452 |                 element.info[2][0] +
453 |                 " 用户: " +
454 |                 element.info[2][1] +
455 |                 " \n内容: " +
456 |                 element.info[1]
457 |             );
458 |           }
459 |           //cmd = INTERACT_WORD 有人进入直播了
460 |           else if (element.cmd == "INTERACT_WORD") {
461 |             console.log("进入直播: " + element.data.uname);
462 |           }
463 |           //还有其他的
464 |         }
465 |       }
466 |   }
467 |  );
468 | };
469 | ```
470 | 
471 | #### 命令包
472 | 
473 | 根据前端代码，数据也可能是多条命令的数组，不过我只收到过单条命令。每条命令中`['cmd']`表示具体命令
474 | 
475 | 已知的命令：
476 | 
477 | | 命令          | 含义             |
478 | | ------------- | ---------------- |
479 | | DANMU_MSG     | 收到弹幕         |
480 | | SEND_GIFT     | 有人送礼         |
481 | | WELCOME       | 欢迎加入房间     |
482 | | WELCOME_GUARD | 欢迎房管加入房间 |
483 | | SYS_MSG       | 系统消息         |
484 | | PREPARING     | 主播准备中       |
485 | | LIVE          | 直播开始         |
486 | | WISH_BOTTLE   | 许愿瓶？         |
487 | 
488 | 


--------------------------------------------------------------------------------