vue3+websocket 实时数据页面回显展示
代码:
<script setup>
import { ref } from 'vue';
const data = ref({})
const getBoardData = (function () {
let websocket = new WebSocket("ws://localhost:7830/v1/api/dashboard/get/data")
// 链接发生错误的回调方法
websocket.onerror = function() {
alert('websocket链接错误')
}
// 链接成功建立的回调方法
websocket.onopen = function() {
// alert('websocket链接成功')
}
// 接受到消息的回调方法
websocket.onmessage = function(event) {
// alert(event.data)
data.value = JSON.parse(event.data)
console.log(data.value);
send();
}
// 链接关闭的回调方法
websocket.onclose = function() {
alert('websocket链接关闭')
}
// 监听窗口关闭事件, 当窗口关闭时,主动去关闭websocket链接, 防止链接还没断开就关闭窗口, server端会炮异常
window.onbeforeunload = function() {
websocket.close();
}
function send() {
var message = "success"
websocket.send(message)
}
})
getBoardData()
一条评论
发表新评论
- Pingback: golang+vue3+websocket 实时推送首页数据或者站内信 - 太阳上的雨天