vue3+websocket 实时数据页面回显展示

后端代码 golang 实现

代码:

<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()