一文详解websocket在vue2中的封装使用

一、背景

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 协议在 2011 年被标准化为 RFC 6455，并已经被所有现代浏览器支持。Vue.js 是一款流行的前端框架，提供了便捷、高效的组件开发和渲染，可以方便地与 WebSocket 进行配合使用，实现实时推送、聊天室、直播等丰富的应用场景。

二、WebSocket 封装

在 vue2 中使用 WebSocket，最核心的是封装 WebSocket 构造函数，使其更加方便使用。以下是一个简单的 WebSocket 封装示例：

class WebSocketClient {
  constructor(url) {
    this._url = url;
    this._callbacks = {};
    this._reconnectTimer = null;
    this.init();
  }

  init() {
    this._ws = new WebSocket(this._url);
    this._ws.onopen = () => {
      this.onopen();
    };
    this._ws.onmessage = (e) => {
      this.onmessage(e);
    };
    this._ws.onclose = (e) => {
      this.onclose(e);
      // 尝试重连
      this.reconnect();
    }
  }

  onopen() {
    console.log('WebSocket open: ', this._url);
  }

  onmessage(e) {
    console.log('WebSocket message:', e.data);
    const data = JSON.parse(e.data);
    const type = data.type;
    if (type in this._callbacks) {
      this._callbacks[type](data);
    }
  }

  onclose(e) {
    console.log('WebSocket close:', e.reason);
  }

  reconnect() {
    clearTimeout(this._reconnectTimer);
    this._reconnectTimer = setTimeout(() => {
      console.log('WebSocket reconnect:', this._url);
      this.init();
    }, 5000);
  }

  send(data) {
    if (this._ws.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify(data));
    }
  }

  registerCallback(type, callback) {
    this._callbacks[type] = callback;
  }
}

该封装实现了以下功能：

• WebSocket 的打开、消息、关闭事件的监听；
• 支持 WebSocket 断开后尝试重连；
• 结合 JSON.parse 和 JSON.stringify 实现消息体的编解码；
• 支持注册消息类型回调函数。

三、在 Vue 中使用 WebSocket

通过上述 WebSocket 封装，我们可以方便地在 Vue 组件中使用。以下是一个示例：

<template>
  <div>
    <button @click="sendMsg">发送消息</button>
    <br>
    <input type="text" v-model="receivedMsg" disabled>
  </div>
</template>

<script>
import WebSocketClient from '@/utils/websocket';

export default {
  data() {
    return {
      ws: null,
      receivedMsg: '',
    };
  },
  created() {
    // 创建 WebSocket 客户端实例
    this.ws = new WebSocketClient('ws://localhost:8080');
    // 注册消息类型回调函数
    this.ws.registerCallback('message', (data) => {
      console.log('receivedMessage:', data);
      this.receivedMsg = data.message;
    });
  },
  methods: {
    sendMsg() {
      // 发送消息
      this.ws.send({
        type: 'message',
        message: 'Hello WebSocket!',
      });
    },
  },
};
</script>

该示例实现了以下功能：

• 创建 WebSocket 实例并注册消息类型回调函数；
• 在组件内发送消息；
• 更新接收到的消息至组件数据模型。

四、进一步应用

使用 Vue 和 WebSocket，我们可以方便地实现各种应用场景。以下是两个进一步的应用示例：

实时统计

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th>请求数</th>
          <th>响应时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in stats">
          <td>{{ item.time }}</td>
          <td>{{ item.requestCount }}</td>
          <td>{{ item.responseTime }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import WebSocketClient from '@/utils/websocket';

export default {
  data() {
    return {
      ws: null,
      stats: [],
    };
  },
  created() {
    // 创建 WebSocket 客户端实例
    this.ws = new WebSocketClient('ws://localhost:8080/stats');
    // 注册消息类型回调函数
    this.ws.registerCallback('stats', (data) => {
      console.log('receivedStats:', data);
      this.stats.push(data);
      if (this.stats.length > 10) {
        this.stats.shift();
      }
    });
  },
};
</script>

该示例实现了一个实时统计页面，统计服务器在过去十秒内的请求数和响应时间，并将统计结果通过 WebSocket 推送实时展示至前端。其中，stats 数组维护了过去十秒内的统计结果，每次接收到新的统计结果时，将其添加至 stats，并截取前十个统计结果，用于展示。

聊天室

<template>
  <div>
    <div v-for="item in chatList">
      <strong>{{ item.user.name }}:</strong>{{ item.content }}
    </div>
    <form @submit.prevent="submit">
      <input type="text" placeholder="请输入内容" v-model="content">
      <button type="submit">发送</button>
    </form>
  </div>
</template>

<script>
import WebSocketClient from '@/utils/websocket';

export default {
  data() {
    return {
      ws: null,
      content: '',
      chatList: [],
    };
  },
  created() {
    // 创建 WebSocket 客户端实例
    this.ws = new WebSocketClient('ws://localhost:8080/chat');
    // 注册消息类型回调函数
    this.ws.registerCallback('chat', (data) => {
      console.log('receivedChat:', data);
      this.chatList.push(data);
    });
  },
  methods: {
    submit() {
      // 发送消息
      this.ws.send({
        type: 'chat',
        content: this.content,
      });
      this.content = '';
    },
  },
};
</script>

该示例实现了一个简单的聊天室，通过 WebSocket 实现实时推送。其中，chatList 数组维护了聊天记录，每次接收到新的聊天消息时，将其添加至 chatList，并实时渲染至页面。发送聊天消息时，将内容通过 WebSocket 发送至服务器。