在 Vue 中使用 ReconnectingWebSocket实现即时通讯聊天客服功能

唯一Chat

发布于 2025-08-09 09:49:16

18900

代码可运行

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

运行总次数：0

代码可运行

ReconnectingWebSocket 是一个自动重连的 WebSocket 实现，非常适合在 Vue 项目中使用。下面是如何在 Vue 中集成和使用它的方法：

安装 ReconnectingWebSocket

首先，你需要安装 ReconnectingWebSocket 库：

npm install reconnecting-websocket
# 或者
yarn add reconnecting-websocket

基本使用方法

1. 在组件中直接使用

import ReconnectingWebSocket from 'reconnecting-websocket';

export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  mounted() {
    // 创建 WebSocket 连接
    this.socket = new ReconnectingWebSocket('ws://your-websocket-url');
    
    // 监听消息
    this.socket.addEventListener('message', (event) => {
      this.messages.push(event.data);
    });
    
    // 监听连接打开
    this.socket.addEventListener('open', () => {
      console.log('WebSocket connected');
    });
    
    // 监听错误
    this.socket.addEventListener('error', (error) => {
      console.error('WebSocket error:', error);
    });
    
    // 监听连接关闭
    this.socket.addEventListener('close', () => {
      console.log('WebSocket disconnected');
    });
  },
  methods: {
    sendMessage(message) {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(message);
      }
    }
  },
  beforeDestroy() {
    // 组件销毁时关闭连接
    if (this.socket) {
      this.socket.close();
    }
  }
};

2. 作为 Vue 插件使用（推荐）

为了更好的复用性，可以创建一个 Vue 插件：

src/plugins/websocket.js

import ReconnectingWebSocket from 'reconnecting-websocket';

const WebSocketPlugin = {
  install(Vue, options) {
    const socket = new ReconnectingWebSocket(options.url, [], {
      connectionTimeout: options.timeout || 5000,
      maxRetries: options.maxRetries || 10
    });

    Vue.prototype.$socket = socket;
    
    // 添加全局方法
    Vue.prototype.$connectWebSocket = function() {
      socket.reconnect();
    };
    
    Vue.prototype.$disconnectWebSocket = function() {
      socket.close();
    };
  }
};

export default WebSocketPlugin;

在 main.js 中注册插件

import Vue from 'vue';
import WebSocketPlugin from './plugins/websocket';

Vue.use(WebSocketPlugin, {
  url: 'ws://your-websocket-url',
  timeout: 5000,
  maxRetries: 10
});

在组件中使用

export default {
  mounted() {
    this.$socket.addEventListener('message', (event) => {
      console.log('Received message:', event.data);
    });
    
    // 发送消息
    this.$socket.send('Hello, server!');
  },
  beforeDestroy() {
    // 可选：关闭连接
    this.$disconnectWebSocket();
  }
};

高级配置选项

ReconnectingWebSocket 提供了多种配置选项：

const socket = new ReconnectingWebSocket('ws://your-websocket-url', [], {
  // 自动重连的最小延迟时间（毫秒）
  minReconnectionDelay: 1000,
  // 自动重连的最大延迟时间（毫秒）
  maxReconnectionDelay: 5000,
  // 重连延迟时间的增长因子
  reconnectionDelayGrowFactor: 1.3,
  // 连接超时时间（毫秒）
  connectionTimeout: 4000,
  // 最大重试次数，Infinity 表示无限重试
  maxRetries: Infinity,
  // 是否在关闭时自动重连
  automaticOpen: true,
  // 是否在连接丢失时立即尝试重连
  startClosed: false,
  // 调试模式
  debug: false
});

注意事项

跨域问题：确保你的 WebSocket 服务器支持跨域请求
SSL：生产环境建议使用 wss:// 而不是 ws://
组件销毁：记得在组件销毁时关闭连接，避免内存泄漏
响应式数据：WebSocket 消息不是响应式的，需要手动更新 Vue 的数据
重连策略：根据业务需求调整重连策略参数

完整示例

<template>
  <div>
    <h1>WebSocket Demo</h1>
    <button @click="sendMessage">Send Message</button>
    <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
  </div>
</template>

<script>
import ReconnectingWebSocket from 'reconnecting-websocket';

export default {
  data() {
    return {
      socket: null,
      messages: [],
      connectionStatus: 'disconnected'
    };
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.socket = new ReconnectingWebSocket('ws://your-websocket-url', [], {
        minReconnectionDelay: 1000,
        maxRetries: 10
      });

      this.socket.addEventListener('open', () => {
        this.connectionStatus = 'connected';
        console.log('WebSocket connected');
      });

      this.socket.addEventListener('message', (event) => {
        this.messages.push(event.data);
      });

      this.socket.addEventListener('error', (error) => {
        this.connectionStatus = 'error';
        console.error('WebSocket error:', error);
      });

      this.socket.addEventListener('close', () => {
        this.connectionStatus = 'disconnected';
        console.log('WebSocket disconnected');
      });
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send('Hello from Vue!');
      }
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>

通过这种方式，你可以在 Vue 应用中轻松实现具有自动重连功能的 WebSocket 通信。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除

即时通讯