Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
W
web-monitor
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
web-monitor
Commits
8f189dea
Commit
8f189dea
authored
Mar 11, 2022
by
yanzhongrong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
socket
parent
a5dd387a
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
143 additions
and
116 deletions
+143
-116
App.vue
src/App.vue
+69
-2
main.js
src/main.js
+2
-2
websocket.js
src/store/modules/websocket.js
+0
-22
bus.js
src/utils/bus.js
+3
-0
websocket.js
src/utils/websocket.js
+69
-52
index.vue
src/views/alarm/device/index.vue
+0
-38
No files found.
src/App.vue
View file @
8f189dea
<
template
>
<div
id=
"app"
>
<router-view
/>
<audio
controls=
"controls"
id=
"my_audio"
src=
"./assets/audio/alarm.mp3"
style=
"display:none;"
hidden=
"hidden"
/>
<div
class=
"tips"
v-if=
"tflag"
>
<p>
提示
</p>
<span>
有一条新告警
</span>
</div>
</div>
</
template
>
<
script
>
import
{
receiveMessage
}
from
'@/utils/websocket'
import
socket
from
'@/utils/websocket'
import
{
mapState
}
from
'vuex'
import
EventBus
from
'@/utils/bus'
export
default
{
name
:
'App'
name
:
'App'
,
data
()
{
return
{
websocket
:
null
,
tflag
:
false
,
}
},
computed
:
{
...
mapState
(
"user"
,
[
'userBaseInfo'
]),
userId
()
{
return
this
.
userBaseInfo
.
userId
}
},
methods
:
{
receiveMessage
,
closeWebsocket
()
{
if
(
this
.
websocket
)
{
this
.
websocket
.
close
()
}
},
},
mounted
()
{
this
.
websocket
=
socket
({
onmessage
:
this
.
receiveMessage
})
EventBus
.
$on
(
'dialogAlarm'
,
(
data
)
=>
{
this
.
tflag
=
data
setTimeout
(()
=>
{
this
.
tflag
=
false
},
3000
)
})
},
watch
:
{
userId
:
{
immediate
:
true
,
handler
(
newV
)
{
if
(
newV
)
{
this
.
closeWebsocket
()
// my_audio.play()
this
.
websocket
=
socket
({
onmessage
:
this
.
receiveMessage
})
}
}
}
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
// zheyeshi
#app
{
// & ::v-deep .el-table__body tr:hover>td{
// background-color: #bed5ff !important;
...
...
@@ -20,4 +75,16 @@ export default {
// background-color: #bed5ff !important;
// }
}
.tips
{
width
:
400px
;
height
:
80px
;
background
:
#fff
;
box-shadow
:
0px
2px
14px
#888888
;
border-radius
:
5px
;
padding
:
0
20px
20px
20px
;
position
:
absolute
;
text-align
:
center
;
top
:calc
(
50
%
-
40px
)
;
left
:calc
(
50
%
-
200px
)
}
</
style
>
src/main.js
View file @
8f189dea
...
...
@@ -12,8 +12,8 @@ import '@/permission' // permission control
import
performLoader
from
'@/utils/global_main_loader.js'
import
WS
from
'@/utils/websocket'
Vue
.
prototype
.
$ws
=
WS
import
WS
from
'@/utils/websocket'
Vue
.
prototype
.
$ws
=
WS
Vue
.
use
(
ElementUI
,
{
locale
})
performLoader
(
Vue
)
// 所有的第三方插件性质的东西都放到这里面了
Vue
.
config
.
productionTip
=
false
...
...
src/store/modules/websocket.js
deleted
100644 → 0
View file @
a5dd387a
const
state
=
{
webSocketMsg
:
''
}
const
mutations
=
{
SET_WS_MSG
(
state
,
msg
)
{
state
.
webSocketMsg
=
msg
}
}
const
getters
=
{
webSocketMsg
(
state
)
{
return
state
.
webSocketMsg
}
}
export
default
{
namespaced
:
true
,
state
,
mutations
,
getters
}
\ No newline at end of file
src/utils/bus.js
0 → 100644
View file @
8f189dea
import
Vue
from
'vue'
const
EventBus
=
new
Vue
()
export
default
EventBus
\ No newline at end of file
src/utils/websocket.js
View file @
8f189dea
import
store
from
'../store'
const
WS
=
{
$ws
:
null
,
type
:
""
,
// webscoket实例
wsUrl
:
'ws://8.142.143.40:8885/websocket/1'
,
// websocket链接地址
createWS
:
function
(
val
)
{
this
.
type
=
val
;
console
.
log
(
this
.
type
);
if
(
'WebSocket'
in
window
)
{
this
.
$ws
=
new
WebSocket
(
this
.
wsUrl
)
this
.
$ws
.
onopen
=
this
.
wsOpen
this
.
$ws
.
onmessage
=
this
.
wsMessage
this
.
$ws
.
onerror
=
this
.
wsError
this
.
$ws
.
onclose
=
this
.
wsClose
}
else
{
alert
(
'当前浏览器不支持webSocket'
)
}
},
wsOpen
:
function
()
{
this
.
send
(
WS
.
type
)
console
.
log
(
'== websocket open =='
,
"传值为"
+
WS
.
type
)
heartBeat
.
start
()
},
wsMessage
:
function
(
msg
)
{
// console.log( msg.data)
heartBeat
.
reset
()
store
.
commit
(
'websocket/SET_WS_MSG'
,
msg
.
data
)
},
wsError
:
function
(
err
)
{
console
.
log
(
'== websocket error =='
,
err
)
},
wsClose
:
function
(
event
)
{
console
.
log
(
'== websocket close =='
,
event
)
}
/* eslint-disable */
import
{
Message
}
from
"element-ui"
import
EventBus
from
'@/utils/bus'
export
default
function
socket
(
handlerOptions
)
{
let
{
onmessage
,
onopen
}
=
handlerOptions
let
socketUrl
=
'ws://8.142.143.40:8885/websocket/1'
let
websocket
if
(
"WebSocket"
in
window
)
{
websocket
=
new
WebSocket
(
socketUrl
)
}
else
{
Message
.
warning
(
"当前浏览器不支持WebSocket推送,请升级浏览器"
)
}
let
heart
=
heartCheck
(
websocket
)
websocket
.
onerror
=
function
()
{
console
.
info
(
"Websocket服务器连接错误"
)
}
window
.
onbeforeunload
=
function
()
{
websocket
.
close
()
}
//连接成功建立的回调方法
websocket
.
onopen
=
function
()
{
console
.
info
(
"Websocket连接成功"
)
heart
.
start
()
onopen
&&
onopen
()
}
//接收到消息的回调方法
websocket
.
onmessage
=
function
(
event
)
{
let
message
=
event
.
data
//消息内容
heart
.
reset
()
//重置心跳上传时间
onmessage
&&
onmessage
(
message
)
//消息业务处理
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window
.
onbeforeunload
=
function
()
{
websocket
.
close
()
}
return
websocket
}
const
heartBeat
=
{
timeout
:
30000
,
// 心跳重连时间
timeoutObj
:
null
,
// 定时器
reset
:
function
()
{
clearInterval
(
this
.
timeoutObj
)
console
.
log
(
'websocket 心跳'
)
heartBeat
.
start
()
function
heartCheck
(
websocket
)
{
return
{
timeout
:
15000
,
timeoutObj
:
null
,
reset
:
function
()
{
clearTimeout
(
this
.
timeoutObj
)
this
.
start
()
},
start
:
function
()
{
this
.
timeoutObj
=
setInterval
(
function
()
{
websocket
.
send
(
"HeartBeat"
)
console
.
info
(
"Websocket发送心跳:HeartBeat"
)
},
this
.
timeout
)
},
start
:
function
()
{
this
.
timeoutObj
=
setTimeout
(
function
()
{
if
(
WS
.
$ws
.
readyState
===
1
)
{
WS
.
$ws
.
send
(
'HeartBeat'
)
}
},
this
.
timeout
)
}
}
}
export
default
WS
\ No newline at end of file
//消息处理
export
function
receiveMessage
(
message
)
{
// 消息接收后处理逻辑 接口访问
console
.
log
(
message
,
'接收到的信息'
);
EventBus
.
$emit
(
'dialogAlarm'
,
true
)
// let obj = JSON.parse(message)
// return obj
}
\ No newline at end of file
src/views/alarm/device/index.vue
View file @
8f189dea
...
...
@@ -125,13 +125,6 @@
class=
"pagination"
@
pagination=
"handlePageChange"
/>
<audio
controls=
"controls"
id=
"my_audio"
src=
"../../../assets/audio/alarm.mp3"
style=
"display:none;"
hidden=
"hidden"
>
</audio>
<div
class=
"tips"
v-if=
"tflag==true"
>
<p>
提示
</p>
<span>
有一条新告警
</span>
</div>
</div>
</template>
...
...
@@ -168,7 +161,6 @@ export default {
key
:
0
,
},
],
tflag
:
false
,
isQuery
:
false
,
searchOption
:
{},
};
...
...
@@ -258,41 +250,11 @@ export default {
},
},
computed
:
{
getWsMsg
:{
get
(){
return
this
.
$store
.
state
.
websocket
.
webSocketMsg
},
set
(){
// this.$store.state.websocket.webSocketMsg=a
}
},
},
watch
:
{
getWsMsg
:
{
handler
(
newVal
)
{
this
.
getWsMsg
=!!
newVal
my_audio
.
play
();
this
.
tflag
=
true
setTimeout
(()
=>
{
this
.
tflag
=
false
},
3000
);
console
.
log
(
newVal
);
// alert("接收到webSocket推送" + newVal);
},
},
},
mounted
()
{
this
.
getTableData
();
},
created
(){
this
.
$ws
.
createWS
(
"1"
)
}
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment