Skip to content

Commit 1c54ef3

Browse files
author
manager-service
committed
init
0 parents  commit 1c54ef3

File tree

11 files changed

+2727
-0
lines changed

11 files changed

+2727
-0
lines changed

Diff for: ‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.local

Diff for: ‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>

Diff for: ‎package-lock.json

+2,552
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "mine",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"vue": "^3.0.0-rc.1"
10+
},
11+
"devDependencies": {
12+
"vite": "^1.0.0-rc.1",
13+
"@vue/compiler-sfc": "^3.0.0-rc.1"
14+
}
15+
}

Diff for: ‎public/favicon.ico

4.19 KB
Binary file not shown.

Diff for: ‎src/App.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<img alt="Vue logo" src="./assets/logo.png" />
3+
<HelloWorld msg="Hello Vue 3.0 + Vite" />
4+
</template>
5+
6+
<script>
7+
import HelloWorld from './components/HelloWorld.vue'
8+
9+
export default {
10+
name: 'App',
11+
components: {
12+
HelloWorld
13+
}
14+
}
15+
</script>

Diff for: ‎src/assets/logo.png

6.69 KB
Loading

Diff for: ‎src/components/HelloWorld.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<h1>{{ msg }}</h1>
3+
<button @click="count++">count is: {{ count }}</button>
4+
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
5+
</template>
6+
7+
<script>
8+
import { ref, watchEffect } from 'vue'
9+
export default {
10+
props: ['msg'],
11+
setup(props, context) {
12+
let count = ref(0)
13+
14+
watchEffect(() => {
15+
console.log(props.msg);
16+
})
17+
18+
return {
19+
count
20+
}
21+
}
22+
}
23+
</script>

Diff for: ‎src/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#app {
2+
font-family: Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}

Diff for: ‎src/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import './index.css'
4+
5+
createApp(App).mount('#app')

Diff for: ‎src/socket.ts

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
2+
import baseUrl from './baseUrl'
3+
4+
interface cb {
5+
openCb?: (e: Event) => void,
6+
messageCb?: (e: Event) => void,
7+
closeCb?: (e: Event) => void,
8+
errorCb?: (e: socketError) => void
9+
}
10+
11+
interface socketError {
12+
code: number,
13+
reason: string,
14+
wasClean: boolean
15+
}
16+
17+
class WS {
18+
lockReconnect: boolean = false // 避免ws重复连接
19+
wsUrl: string = baseUrl.webSocketUrl // websocket url
20+
timeout: any
21+
ws: any // websocket实例
22+
toObj: any = null
23+
serverToObj: any = null
24+
25+
constructor(cbs: cb) {
26+
this.creatWebSocket()
27+
this.handleWebSocket(cbs)
28+
return this.ws // 返回实例对象，可调用ws.close()等关闭连接
29+
}
30+
31+
creatWebSocket(): void {
32+
try {
33+
if(this.timeout) {
34+
clearTimeout(this.timeout)
35+
}
36+
this.ws = new WebSocket(this.wsUrl)
37+
this.lockReconnect = true
38+
} catch(e) {
39+
this.lockReconnect = false
40+
throw new Error(e)
41+
}
42+
}
43+
44+
handleWebSocket(cbs: cb): void {
45+
if(!this.ws) return
46+
this.ws.addEventListener('open', (e: Event) => {
47+
cbs.openCb(e)
48+
})
49+
this.ws.addEventListener('message', (e: Event) => {
50+
this.heartBeat.reset()
51+
this.heartBeat.start() // 定时发送心跳以防止连接自动断开
52+
cbs.messageCb(e)
53+
})
54+
this.ws.addEventListener('close', (e: Event) => {
55+
cbs.closeCb(e)
56+
})
57+
this.ws.addEventListener('error', (e: socketError) => {
58+
console.log('websocket已断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
59+
cbs.errorCb(e)
60+
this.reconnect() // 发生错误的时候尝试重连
61+
})
62+
}
63+
64+
reconnect(): void {
65+
if(this.lockReconnect) return
66+
this.timeout = setTimeout((): void => {
67+
this.creatWebSocket()
68+
}, 5000)
69+
}
70+
71+
heartBeat: any = {
72+
reset: (): void => {
73+
if(this.toObj) {
74+
clearTimeout(this.toObj)
75+
}
76+
if(this.serverToObj) {
77+
clearTimeout(this.serverToObj)
78+
}
79+
},
80+
start: (): void => {
81+
this.toObj = setTimeout((): void => { // warning:如果后端对这个心跳不作处理的话，似乎这里要用interval?
82+
this.ws.send('发送一个心跳💓')
83+
this.serverToObj = setTimeout((): void => {
84+
this.ws.close()
85+
}, 1000)
86+
}, 1000)
87+
}
88+
}
89+
}
90+
91+
92+
export default WS

0 commit comments

Comments
 (0)