Vue2 使用WebSocket实现前端与后端的实时通讯

最新推荐文章于 2025-07-01 10:28:58 发布

今天不撒网了~

最新推荐文章于 2025-07-01 10:28:58 发布

阅读量3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： websocket 网络协议网络前端

本文链接：https://blog.youkuaiyun.com/zengkeai/article/details/134691084

本文介绍了如何在前端项目中使用WebSocket实现与后端的实时通讯，通过SocketService类封装WebSocket操作，并结合Vue框架，实现单例模式以优化资源管理和数据共享。涵盖了连接管理、事件处理和登录登出时的WebSocket操作。

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

功能描述：WebSocket是一种在单个TCP连接上进行全双工通信的协议，它能够在客户端和服务器之间建立持久的连接，使得实时通讯成为可能。在前端开发中，WebSocket通常用于实现实时消息推送、实时数据更新等功能，为用户提供更流畅、即时的体验

本文将介绍如何在前端项目中利用WebSocket实现与后端的实时通讯，并结合具体的代码示例进行讲解。

实现单例模式的SocketService类

在本文中，我们将使用一个名为SocketService的类来封装WebSocket的相关操作，并通过单例模式确保在整个应用程序中只有一个SocketService实例存在。这样可以避免多次实例化和重复连接服务器的问题，同时方便在应用程序的不同模块中共享同一个SocketService实例，实现统一的数据传输和处理逻辑。

创建utils文件夹--->websocket.js文件

import { LoginWebSocketApi } from "@/request/api";
export default class SocketService {
    // 用于实现单例模式的写法
    // 可以确保在整个应用程序中只有一个SocketService实例存在，避免了多次实例化和重复连接服务器的问题。通过单例模式，可以方便地在应用程序的不同模块中共享同一个SocketService实例，实现统一的数据传输和处理逻辑。
    static instance = null;
    static get Instance() {
        if (!this.instance) {
            this.instance = new SocketService()
        }
        return this.instance
    }
    ws = null
    // 标识是否连接成功
    connected = false
    // 重试的次数
    sendRetryCount = 0
    // 重连的次数
    connectRetryCount = 0
    // 存储回调函数
    // callBackMapping = {}
    heartbeatInterval = null;
    // 连接服务器的方法
    connect(vue) {
        // 连接服务器
        if (!window.WebSocket) {
            return console.log("浏览器不支持webSocket")
        }
        if (!localStorage.getItem("token")) {
            co