AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

赶快收藏！全网最佳websocket封装：完美支持断网重连、自动心跳！

2024-08-22 87
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【8月更文挑战第17天】赶快收藏！全网最佳websocket封装：完美支持断网重连、自动心跳！

简介

websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！
前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！

自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。

websokect的API非常简单

// 创建ws连接
const ws = new WebSocket('ws://localhost:8080/test');
ws.onopen = function() {
   
   
    console.log('WebSocket 连接已经建立。');
    ws.send('Hello, server!');
};
ws.onmessage = function(event) {
   
   
    console.log('收到服务器消息：', event.data);
};
ws.onerror = function(event) {
   
   
    console.error('WebSocket 连接出现错误：', event);
};
ws.onclose = function() {
   
   
    console.log('WebSocket 连接已经关闭。');
}

但是，要封装一个支持断网重连、自动心跳的websokect没有那么容易！

封装成功演示

核心优势

我们先看我封装的websokect，首先，最重要的，它的使用方法和官方Api完全一致！零学习成本，上手即用！

import WebSocketClient from "./WebSocketClient"

// 创建实例
const ws = new WebSocketClient('ws://localhost:3200');

// 连接
ws.connect()
// 同原生方法
ws.onclose(()=>{
   
   })
// 同原生方法
ws.onerror(()=>{
   
   })
// 同原生方法
ws.onmessage(()=>{
   
   
  // 同原生方法
  ws.send("自定义发送的数据")
})
// 同原生方法
ws.onopen(()=>{
   
   })

// 关闭连接
ws.close()

效果演示

后端服务创建

我们先使用node创建一个后端服务，安装ws库：

npm install ws

创建node index.js文件，引入WebSocket 服务器

const WebSocket = require("ws");

const wss = new WebSocket.Server({
   
    port: 3200 });

console.log("服务运行在http://localhost:3200/");

wss.on("connection", (ws) => {
   
   
  console.log("[服务器]：客官您来了~里边请");
  ws.send(`[websocket云端]您已经连接云端!数据推送中!`);
  let index = 1;
  const interval = setInterval(() => {
   
   
    ws.send(`[websocket]数据推送第${
     
     index}次`);
    index ++
  }, 1000 * 10);

  ws.on("close", () => {
   
   
    clearInterval(interval); // 清除定时器
    console.log("[服务器]：客官下次再来呢~");
  });
});

我们启动这个服务

node index.js

现在，我们在前端服务内进行连接测试

前端websokect测试

我们先写前端的相关逻辑

import {
   
    WebSocketClient } from '@/utils/dataDispatcher/WebSocketClient';

const ws = new WebSocketClient('ws://localhost:3200');

// 连接
ws.connect();
// 同原生方法
ws.onclose(() => {
   
   });
// 同原生方法
ws.onerror(() => {
   
   });
// 同原生方法
ws.onmessage(() => {
   
   
    // 同原生方法
    ws.send('自定义发送的数据');
});
// 同原生方法
ws.onopen(() => {
   
   });

启动项目，我们会发现控制台已经有了提示
image.png
心跳验证：
等待一段时间后，我们可以看到ws连接里，前端已经发送了多次心跳数据
image.png
服务端与客户端也一直在进行数据交互
image.png
断网重连验证：
可以看到，当我们断开服务端的时候，断网重连被自动触发。111.gif

技术路线

基本框架搭建

export class WebSocketClient {
   
   
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;

    constructor(url: string) {
   
   
        super();
        this.url = url;
    }

    // >消息发送
    public send(message: string): void {
   
   
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
   
   
            this.socket.send(message);
        } else {
   
   
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
   
   
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
   
   
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
   
   
            console.log(`连接成功,等待服务端数据推送[onopen]...`);
        };

        this.socket.onmessage = event => {
   
   
        };

        this.socket.onclose = event => {
   
   
            console.log(`连接断开[onclose]...`);
        };

        this.socket.onerror = event => {
   
   
            console.log(`连接异常[onerror]...`);
        };
    }

    // >关闭连接
    public close(): void {
   
   
        if (this.socket) {
   
   
            this.socket.close();
            this.socket = null;
        }
    }
}

上述代码借助官方API实现了一个基本的 WebSocket 客户端，具有以下功能：

  • 初始化连接并处理各种 WebSocket 事件（打开、消息、关闭、错误）。
  • 发送消息到服务器。
  • 关闭连接。

现在，我们开始逐步完善代码，进行封装。

断网重连封装

export class WebSocketClient{
   
   
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;
    // #重连次数
    private reconnectAttempts = 0;
    // #最大重连数
    private maxReconnectAttempts = 5;
    // #重连间隔
    private reconnectInterval = 10000; // 10 seconds

    constructor(url: string) {
   
   
        super();
        this.url = url;
    }
    // >消息发送
    public send(message: string): void {
   
   
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
   
   
            this.socket.send(message);
        } else {
   
   
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
   
   
        if (this.reconnectAttempts === 0) {
   
   
            console.log(`初始化连接中...`);
        }
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
   
   
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
   
   
            // 重置重连尝试成功连接
            this.reconnectAttempts = 0;
            console.log(`连接成功,等待服务端数据推送[onopen]...`);
        };

        this.socket.onmessage = event => {
   
   
        };

        this.socket.onclose = event => {
   
   
            if (this.reconnectAttempts === 0) {
   
   
                console.log(`连接断开[onclose]...`);
            }
            if (!this.stopWs) {
   
   
                this.handleReconnect();
            }
        };

        this.socket.onerror = event => {
   
   
            if (this.reconnectAttempts === 0) {
   
   
                console.log(`连接异常[onerror]...`);
            }
        };
    }

    // > 断网重连逻辑
    private handleReconnect(): void {
   
   
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
   
   
            this.reconnectAttempts++;
            console.log(`尝试重连... (${
     
     this.reconnectAttempts}/${
     
     this.maxReconnectAttempts})`);
            setTimeout(() => {
   
   
                this.connect();
            }, this.reconnectInterval);
        } else {
   
   
            console.log(`最大重连失败，终止重连: ${
     
     this.url}`);
        }
    }

    // >关闭连接
    public close(): void {
   
   
        if (this.socket) {
   
   
            this.socket.close();
            this.socket = null;
        }
    }
}

上述代码添加了自动断网重连的机制。其核心逻辑在于以下几个方面：

  1. 记录重连次数：通过 reconnectAttempts 属性记录当前已经尝试重连的次数。
  2. 设置最大重连次数：通过 maxReconnectAttempts 属性设置允许的最大重连次数。
  3. 重连逻辑：在 onclose 和 onerror 事件中调用重连处理函数 handleReconnect。
  4. 重连间隔：通过 reconnectInterval 属性设置每次重连的间隔时间，可以在每次重连时增加间隔以实现指数退避。

初始化连接并处理事件
在 connect 方法中，初始化 WebSocket 连接并为其设置事件处理函数。特别关注 onclose 和 onerror 事件，在连接关闭和出现错误时调用重连逻辑。

public connect(): void {
   
   
    if (this.reconnectAttempts === 0) {
   
   
        console.log(`初始化连接中...`);
    }
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
   
   
        return;
    }
    this.socket = new WebSocket(this.url);

    this.socket.onopen = (event: Event) => {
   
   
        this.reconnectAttempts = 0;
        console.log(`连接成功,等待服务端数据推送[onopen]...`);
    };
    this.socket.onclose = (event: CloseEvent) => {
   
   
        if (this.reconnectAttempts === 0) {
   
   
            console.log(`连接断开[onclose]...`);
        }
        this.handleReconnect();
    };

    this.socket.onerror = (event: Event) => {
   
   
        if (this.reconnectAttempts === 0) {
   
   
            console.log(`连接异常[onerror]...`);
        }
        this.handleReconnect();
    };
}

处理重连逻辑
在 handleReconnect 方法中，实现了实际的重连逻辑。该方法会递增 reconnectAttempts，检查是否达到最大重连次数，如果没有达到，则在指定的重连间隔后再次调用 connect 方法尝试重连。

private handleReconnect(): void {
   
   
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
   
   
        this.reconnectAttempts++;
        console.log(`尝试重连... (${
     
     this.reconnectAttempts}/${
     
     this.maxReconnectAttempts})`);
        setTimeout(() => {
   
   
            this.connect();
        }, this.reconnectInterval * this.reconnectAttempts); // 重连间隔可以增加，例如指数退避
    } else {
   
   
        console.log(`最大重连失败，终止重连: ${
     
     this.url}`);
    }
}

关闭连接
在 close 方法中，手动关闭 WebSocket 连接并将 socket 设置为 null。

public close(): void {
   
   
    if (this.socket) {
   
   
        this.socket.close();
        this.socket = null;
    }
}

自动心跳封装

自动心跳（Automatic Heartbeat）是一种在网络通信中常用的机制，用于维持连接的活跃状态，检测连接是否仍然有效，并及时发现和处理连接断开或故障的情况。心跳机制通过定期发送“心跳”消息（通常是一个简单的 ping 或者 pong 消息）来确认连接双方的状态。
实现自动心跳的基本思路

  1. 发送心跳消息：在 WebSocket 连接建立后，启动一个定时器，定期发送心跳消息到服务器。
  2. 接收心跳响应：服务器收到心跳消息后返回响应，客户端接收到响应后重置定时器。
  3. 检测心跳超时：如果在指定时间内没有收到心跳响应，则认为连接断开，进行重连。
    ```javascript

export class WebSocketClient {
// #socket链接
private url = '';
// #socket实例
private socket: WebSocket | null = null;
// #重连次数
private reconnectAttempts = 0;
// #最大重连数
private maxReconnectAttempts = 5;
// #重连间隔
private reconnectInterval = 10000; // 10 seconds
// #发送心跳数据间隔
private heartbeatInterval = 1000 30;
// #计时器id
private heartbeatTimer?: NodeJS.Timeout;
// #彻底终止ws
private stopWs = false;
// 构造函数
constructor(url: string) {
super();
this.url = url;
}
// >消息发送
public send(message: string): void {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(message);
} else {
console.error('[WebSocket] 未连接');
}
}

// !初始化连接
public connect(): void {
    if (this.reconnectAttempts === 0) {
        console.log('WebSocket', `初始化连接中...`);
    }
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        return;
    }
    this.socket = new WebSocket(this.url);

    // !websocket连接成功
    this.socket.onopen = event => {
        this.stopWs = false;
        // 重置重连尝试成功连接
        this.reconnectAttempts = 0;
        // 在连接成功时停止当前的心跳检测并重新启动
        this.startHeartbeat();
        console.log(`连接成功,等待服务端数据推送[onopen]...`);
    };

    this.socket.onmessage = event => {
        this.dispatchEvent('message', event);
        this.startHeartbeat();
    };

    this.socket.onclose = event => {
        if (this.reconnectAttempts === 0) {
            console.log(`连接断开[onclose]...`);
        }
        if (!this.stopWs) {
            this.handleReconnect();
        }
    };

    this.socket.onerror = event => {
        if (this.reconnectAttempts === 0) {
            console.log(`连接异常[onerror]...`);
        }
        this.closeHeartbeat();
    };
}

// > 断网重连逻辑
private handleReconnect(): void {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
        this.reconnectAttempts++;
        console.log('WebSocket', `尝试重连...`);
        setTimeout(() => {
            this.connect();
        }, this.reconnectInterval);
    } else {
        this.closeHeartbeat();
        console.log(`最大重连失败，终止重连: ${this.url}`);
    }
}

// >关闭连接
public close(): void {
    if (this.socket) {
        this.stopWs = true;
        this.socket.close();
        this.socket = null;
    }
    this.closeHeartbeat();
}

// >开始心跳检测 -> 定时发送心跳消息
private startHeartbeat(): void {
    if (this.stopWs) return;
    if (this.heartbeatTimer) {
        this.closeHeartbeat();
    }
    this.heartbeatTimer = setInterval(() => {
        if (this.socket) {
            this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
            console.log('WebSocket', '送心跳数据...');
        } else {
            console.error('[WebSocket] 未连接');
        }
    }, this.heartbeatInterval);
}

// >关闭心跳
private closeHeartbeat(): void {
    clearInterval(this.heartbeatTimer);
    this.heartbeatTimer = undefined;
}

}

上述代码通过定时发送心跳消息来实现自动心跳机制，并结合断网重连逻辑来确保 WebSocket 连接的稳定性。
心跳机制的实现原理简析：

- **在连接成功时启动心跳检测**

在 connect() 方法中，当 WebSocket 连接成功（onopen 事件触发）时，调用 startHeartbeat() 方法。
```tsx
this.socket.onopen = event => {
  this.stopWs = false;
  this.reconnectAttempts = 0;
  this.startHeartbeat();
  console.log(`连接成功,等待服务端数据推送[onopen]...`);
};
  • 定时发送心跳消息

startHeartbeat() 方法启动一个定时器，每隔 heartbeatInterval 时间（30秒）发送一次心跳消息。

private startHeartbeat(): void {
  if (this.stopWs) return;
if (this.heartbeatTimer) {
  this.closeHeartbeat();
}
this.heartbeatTimer = setInterval(() => {
  if (this.socket) {
    this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
    console.log('WebSocket', '发送心跳数据...');
  } else {
    console.error('[WebSocket] 未连接');
  }
}, this.heartbeatInterval);
}
  • 停止心跳检测

closeHeartbeat() 方法用于停止心跳检测，清除定时器。

private closeHeartbeat(): void {
  clearInterval(this.heartbeatTimer);
    this.heartbeatTimer = undefined;
}
  • 在连接断开或发生错误时停止心跳检测

在 onclose 和 onerror 事件中调用 closeHeartbeat()，停止心跳检测。

this.socket.onclose = event => {
  if (this.reconnectAttempts === 0) {
    console.log(`连接断开[onclose]...`);
  }
  if (!this.stopWs) {
    this.handleReconnect();
  }
};

this.socket.onerror = event => {
  if (this.reconnectAttempts === 0) {
    console.log(`连接异常[onerror]...`);
  }
  this.closeHeartbeat();
};

如何触发原生函数

现在，我们已经基本完成了功能的封装，那么，我们如何在外部调用原生的websokectApi呢？非常简单，借助几个自定义的生命周期函数即可！

import { EventDispatcher } from './dispatcher';

export class WebSocketClient extends EventDispatcher {

    //...
    constructor(url: string) {
        super();
        this.url = url;
    }
    // >生命周期钩子
    onopen(callBack: Function) {
        this.addEventListener('open', callBack);
    }
    onmessage(callBack: Function) {
        this.addEventListener('message', callBack);
    }
    onclose(callBack: Function) {
        this.addEventListener('close', callBack);
    }
    onerror(callBack: Function) {
        this.addEventListener('error', callBack);
    }

    // !初始化连接
    public connect(): void {
        // ...

        // !websocket连接成功
        this.socket.onopen = event => {
            // ...
            this.dispatchEvent('open', event);
        };

        this.socket.onmessage = event => {
            this.dispatchEvent('message', event);
            this.startHeartbeat();
        };

        this.socket.onclose = event => {
            // ...
            this.dispatchEvent('close', event);
        };

        this.socket.onerror = event => {
            // ...
            this.closeHeartbeat();
            this.dispatchEvent('error', event);
        };
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.stopWs = true;
            this.socket.close();
            this.socket = null;
            this.removeEventListener('open');
            this.removeEventListener('message');
            this.removeEventListener('close');
            this.removeEventListener('error');
        }
        this.closeHeartbeat();
    }

    // ...
}

当原生的onclose、onopen方法触发时，会通过dispatchEvent触发相应的调度，进而触发通过addEventListener绑定的生命周期函数！
注意，这里的this.dispatchEvent方法，addEventListener方法都是通过类继承EventDispatcher方法获得的！
EventDispatcher源码如下：

export class EventDispatcher {
    private listeners: { [type: string]: Function[] } = {};

    protected addEventListener(type: string, listener: Function) {
        if (!this.listeners[type]) {
            this.listeners[type] = [];
        }
        if (this.listeners[type].indexOf(listener) === -1) {
            this.listeners[type].push(listener);
        }
    }

    protected removeEventListener(type: string) {
        this.listeners[type] = [];
    }

    protected dispatchEvent(type: string, data: any) {
        const listenerArray = this.listeners[type] || [];
        if (listenerArray.length === 0) return;
        listenerArray.forEach(listener => {
            listener.call(this, data);
        });
    }
}

关于EventDispatcher的实现原理，请参考博主的其他文章。

完整代码

import { EventDispatcher } from './dispatcher';

export class WebSocketClient extends EventDispatcher {
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;
    // #重连次数
    private reconnectAttempts = 0;
    // #最大重连数
    private maxReconnectAttempts = 5;
    // #重连间隔
    private reconnectInterval = 10000; // 10 seconds
    // #发送心跳数据间隔
    private heartbeatInterval = 1000 * 30;
    // #计时器id
    private heartbeatTimer?: NodeJS.Timeout;
    // #彻底终止ws
    private stopWs = false;
    // *构造函数
    constructor(url: string) {
        super();
        this.url = url;
    }
    // >生命周期钩子
    onopen(callBack: Function) {
        this.addEventListener('open', callBack);
    }
    onmessage(callBack: Function) {
        this.addEventListener('message', callBack);
    }
    onclose(callBack: Function) {
        this.addEventListener('close', callBack);
    }
    onerror(callBack: Function) {
        this.addEventListener('error', callBack);
    }
    // >消息发送
    public send(message: string): void {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(message);
        } else {
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
        if (this.reconnectAttempts === 0) {
            this.log('WebSocket', `初始化连接中...          ${this.url}`);
        }
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
            this.stopWs = false;
            // 重置重连尝试成功连接
            this.reconnectAttempts = 0;
            // 在连接成功时停止当前的心跳检测并重新启动
            this.startHeartbeat();
            this.log('WebSocket', `连接成功,等待服务端数据推送[onopen]...     ${this.url}`);
            this.dispatchEvent('open', event);
        };

        this.socket.onmessage = event => {
            this.dispatchEvent('message', event);
            this.startHeartbeat();
        };

        this.socket.onclose = event => {
            if (this.reconnectAttempts === 0) {
                this.log('WebSocket', `连接断开[onclose]...    ${this.url}`);
            }
            if (!this.stopWs) {
                this.handleReconnect();
            }
            this.dispatchEvent('close', event);
        };

        this.socket.onerror = event => {
            if (this.reconnectAttempts === 0) {
                this.log('WebSocket', `连接异常[onerror]...    ${this.url}`);
            }
            this.closeHeartbeat();
            this.dispatchEvent('error', event);
        };
    }

    // > 断网重连逻辑
    private handleReconnect(): void {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            this.log('WebSocket', `尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})       ${this.url}`);
            setTimeout(() => {
                this.connect();
            }, this.reconnectInterval);
        } else {
            this.closeHeartbeat();
            this.log('WebSocket', `最大重连失败，终止重连: ${this.url}`);
        }
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.stopWs = true;
            this.socket.close();
            this.socket = null;
            this.removeEventListener('open');
            this.removeEventListener('message');
            this.removeEventListener('close');
            this.removeEventListener('error');
        }
        this.closeHeartbeat();
    }

    // >开始心跳检测 -> 定时发送心跳消息
    private startHeartbeat(): void {
        if (this.stopWs) return;
        if (this.heartbeatTimer) {
            this.closeHeartbeat();
        }
        this.heartbeatTimer = setInterval(() => {
            if (this.socket) {
                this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
                this.log('WebSocket', '送心跳数据...');
            } else {
                console.error('[WebSocket] 未连接');
            }
        }, this.heartbeatInterval);
    }

    // >关闭心跳
    private closeHeartbeat(): void {
        clearInterval(this.heartbeatTimer);
        this.heartbeatTimer = undefined;
    }
}

class Log {
    private static console = true;
    log(title: string, text: string) {
        if (!Log.console) return;
        if (import.meta.env.MODE === 'production') return;
        const color = '#ff4d4f';
        console.log(
            `%c ${title} %c ${text} %c`,
            `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
            `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
            'background:transparent'
        );
    }
    closeConsole() {
        Log.console = false;
    }
}
export class EventDispatcher extends Log {
    private listeners: { [type: string]: Function[] } = {};

    protected addEventListener(type: string, listener: Function) {
        if (!this.listeners[type]) {
            this.listeners[type] = [];
        }
        if (this.listeners[type].indexOf(listener) === -1) {
            this.listeners[type].push(listener);
        }
    }

    protected removeEventListener(type: string) {
        this.listeners[type] = [];
    }

    protected dispatchEvent(type: string, data: any) {
        const listenerArray = this.listeners[type] || [];
        if (listenerArray.length === 0) return;
        listenerArray.forEach(listener => {
            listener.call(this, data);
        });
    }
}

总结

这篇文章封装了weboskect，完美支持了断网重连、自动心跳的功能，且完全兼容原生写法，无任何学习负担，开开箱即用！但美中不足的是，断网重连时间、心跳数据内容目前都是写死的，大家可以根据自己的情况做一些更改，让它更灵活！

文章标签：
前端开发
API
JavaScript
调度
关键词：
WebSocket封装
WebSocket封装心跳
WebSocket心跳
石小石Orz
目录
相关文章
m0_黎明
|
6月前
|
前端开发
websocket的心跳机制
websocket的心跳机制
m0_黎明
317 3
赵广陆
|
移动开发 HTML5
WebSocket心跳机制
WebSocket心跳机制
赵广陆
174 0
yqcoder
|
4月前
WebSocket 心跳机制如何实现
WebSocket 心跳机制如何实现
yqcoder
62 0
球球不吃虾
|
6月前
|
网络协议 JavaScript 前端开发
将websocket封装成一个class，断线可重连
将websocket封装成一个class，断线可重连
球球不吃虾
135 3
北海屿鹿
|
6月前
|
前端开发 Java Spring
WebSocket心跳机制（笔记大全）
WebSocket心跳机制（笔记大全）
北海屿鹿
957 0
北海屿鹿
|
6月前
|
移动开发 HTML5
WebSocket心跳机制
WebSocket心跳机制
北海屿鹿
80 0
田八
|
6月前
|
前端开发
告别屎山！！！WebSocket 的极致封装， 写好代码竟如此简单
告别屎山！！！WebSocket 的极致封装， 写好代码竟如此简单
田八
228 0
橘子的分享
|
JavaScript
websocket | 浅浅的封装一下
在写websocket的时候，很多页面都需要使用，每个页面重复写，太麻烦，于是先浅浅的封装一下。
橘子的分享
93 0
青城Dev
|
开发框架 前端开发 网络协议
服务器开发- Asp.Net Core中的websocket，并封装一个简单的中间件
服务器开发- Asp.Net Core中的websocket，并封装一个简单的中间件
青城Dev
488 7
全栈若城
|
JavaScript
vue websocket组件封装
vue websocket组件封装
全栈若城
250 0

热门文章

最新文章

  • 1
    java开发之使用websocket实现web客户端与服务器之间的实时通讯
  • 2
    使用阿里云函数计算和 Websocket，轻松开发 Serverless 实时应用
  • 3
    三分钟构建高性能WebSocket服务 | 超优雅的Springboot整合Netty方案
  • 4
    Laravel 5.7 中广播实践，使用websocket（Redis + socket.io） 技术接收
  • 5
    Tomcat 7的WebSocket实现(下)
  • 6
    基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
  • 7
    Netty实战，Springboot + netty +websocket 实现推送消息（附源码）
  • 8
    python 版websocket实现
  • 9
    WebSocket心跳机制（笔记大全）
  • 10
    解决浏览器不兼容websocket
  • 1
    t-io websocket的聊天功能学习记录（二）
    95
  • 2
    t-io websocket的聊天功能学习记录（一）
    106
  • 3
    局域网监控软件的实时通知系统：利用Node.js和WebSocket实现即时消息推送
    180
  • 4
    Springboot+Netty+WebSocket搭建简单的消息通知
    153
  • 5
    Server-Sent Events 和 WebSocket 之间有什么区别
    195
  • 6
    基于位置的服务中，WebSocket有哪些用途？
    71
  • 7
    WebSocket协议
    92
  • 8
    WebSocket协议
    57
  • 9
    WebSocket通过建立一个持久的连接实现实时双向通信
    184
  • 10
    WebSocket是一种基于TCP的全双工通信协议
    185

    • 相关电子书

    更多
  • 探索连接的最后十秒”落时”的网关
  • 流量太大容易挂？接入 Sentinel 让 N 个 9 成为可能！
  • 流量太大容易挂？接入Sentinel让N个9成为可能

    • 相关实验场景

    更多
  • 消息队列RocketMQ版：定时消息通知功能体验
    • 下一篇
    阿里云OSS设置跨域访问