-
Notifications
You must be signed in to change notification settings - Fork 9
/
socket.js
129 lines (123 loc) · 3.22 KB
/
socket.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// const NOTIFY_LOGIN_GITHUB = 1
// const NOTIFY_LOGIN_QQ = 2
const NOTIFY_COMMENT = 3
// const NOTIFY_LIKE = 4
const NOTIFY_COMMENT_REPLY = 5
const NOTIFY_MESSAGE = 6
const NOTIFY_MESSAGE_REPLY = 7
import io from 'socket.io-client'
import Vue from 'vue'
import { getToken, camel } from '@/tool'
import { BASE_URL } from '@/config'
function notify ({ type, username, postTitle, url, content }) {
const { $bus: bus, $Notice: notice } = Vue.prototype
bus.$emit('get-current-user', (userinfo) => {
const titleInfo = {
[NOTIFY_COMMENT]: '新增评论',
[NOTIFY_COMMENT_REPLY]: '评论回复',
[NOTIFY_MESSAGE]: '新增留言',
[NOTIFY_MESSAGE_REPLY]: '留言回复'
}
notice.info({
title: titleInfo[type],
duration: 0,
render (h) {
console.log(this, this.$store)
const user = h('span', {
style: { color: '#FFA710' },
}, username)
const post = postTitle ? h('span', {
style: { color: '#2d8cf0' }
}, `《${postTitle}》`) : ''
const info = {
[NOTIFY_COMMENT]: ['评论了文章', post],
[NOTIFY_COMMENT_REPLY]: ['在', post, '回复了你' ],
[NOTIFY_MESSAGE]: [`在留言板留言`],
[NOTIFY_MESSAGE_REPLY]: [`回复了你的留言`]
}
let email = userinfo.email ? '' : h('div', {
style: {
marginTop: '15px',
fontSize: `12px`,
color: `#888`,
}
}, [
'设置邮箱可以及时收到离线回复,',
h('span', {
props: {
type: 'primary',
plain: true,
},
style: {
color: '#FFA710',
cursor: 'pointer',
userSelect: 'none',
textDecoration: 'underline'
},
on: {
click () {
bus.$emit('click-avatar', userinfo.id)
}
}
}, '现在设置')
])
return h('div', {
style: {
fontSize: '14px',
lineHeight: 1.5
}
}, [
h('div', {},
[
user,
...info[type],
": ",
h('span', {
style: {
marginRight: '4px',
color: '#000',
fontWeight: 'bold'
}
}, content),
h('a', {
attrs: {
href: url
},
style: {
textDecoration: 'underline'
}
}, '点击查看')
]),
email
])
}
})
})
}
class Socket {
constructor () {
this.socket = null
}
init () {
this.socket && this.socket.close()
this.socket = io(BASE_URL)
this.socket.on('connect', () => {
this.socket.emit('bind-user', { token: getToken() })
})
this.socket.on('message', ({ type, data }) => {
data = camel(data)
if (type == 'notify') {
notify(data)
}
})
this.socket.on('error', (err) => {
console.log('socket error', err)
})
}
destroy () {
this.socket && this.socket.close()
}
}
if (process.client) {
Vue.prototype.$socket = new Socket()
}