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

作者: 太阳上的雨天 分类: Vue 发布时间: 2022-07-07 15:55

后端代码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()

一条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注