WebSocket 的封装

最新推荐文章于 2025-02-24 14:32:45 发布

April_zk

最新推荐文章于 2025-02-24 14:32:45 发布

阅读量635

点赞数 1

文章标签：前端 vue.js javascript 开发语言 websocket

本文链接：https://blog.youkuaiyun.com/qq_45747074/article/details/138351016

版权

文章介绍了如何在Vue应用中使用WebSocket进行实时通信，包括初始化连接、事件处理、心跳检测以及自定义Hooks来管理WebSocket的生命周期和消息处理。还展示了如何在Vue组件中使用这些功能，如发送消息和处理接收到的邮件和通知消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket 具体内容参考了原文

import {
   ref, onUnmounted} from 'vue';
import dayjs from "dayjs";

class Socket {
   
    url;
    ws = null;
    opts;
    reconnectAttempts = 0;
    listeners = {
   };
    heartbeatInterval = null;

    constructor(url, opts = {
    }) {
   
        this.url = url;
        this.opts = {
   
            // 心跳检测
            heartbeatInterval: 30000,
            // 重新连接时间间隔
            reconnectInterval: 5000,
            // 重连的次数
            maxReconnectAttempts: 3,
            ...opts
        };

        this.init();
    }

    init() {
   
        this.ws = new WebSocket(this.url);
        this.ws.onopen = this.onOpen.bind(this);
        this.ws.onmessage = this.onMessage.bind(this);
        this.ws.onerror = this.onError.bind(this);
        this.ws.onclose = this.onClose.bind(this);
    }

    onOpen(event) {
   
        if (event) {
   
            console.log(`%c websocket 已建立连接 ${
     dayjs(new Date()).format("HH:mm:ss")}`, 'color: green');
            this.reconnectAttempts = 0;
            this.startHeartbeat();
            this.emit('open', event);
        }

    }

    onMessage(event) {
   
        this.emit('message', event.data

最低0.47元/天解锁文章