一文详解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 发送至服务器。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:一文详解websocket在vue2中的封装使用 - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • Lua编程中使用嵌套循环的使用教程

    Lua编程中使用嵌套循环的使用教程 在Lua编程中,嵌套循环是一种强大的工具,可以用于处理复杂的问题。嵌套循环允许我们在循环内部再次使用循环,以便多次执行某个操作。本教程将详细介绍如何在Lua中使用嵌套循环,并提供两个示例说明。 基本语法 嵌套循环的基本语法如下: for 初始值1, 终止值1, 步长1 do — 外层循环代码 for 初始值2, 终止值2…

    other 2023年7月28日
    00
  • shell 脚本中获取命令的输出的实现示例

    要在shell脚本中获取命令的输出,我们可以使用重定向符号(>)和反引号(“)或者$(命令)表达式来实现。 首先,重定向符号可以将命令的输出重定向到文件或者变量中,如下: # 将命令的输出重定向到文件中 command > output.txt # 将命令的输出重定向到变量中 result=$(command) 其中,>符号用于将命令的标…

    other 2023年6月26日
    00
  • VBS变量名Wsh等于WScript对象?

    当我们说“VBS变量名Wsh等于WScript对象”时,我们指的是在VBScript中创建一个名为Wsh的变量,并将其赋值为WScript对象。WScript对象是VBScript中的一个内置对象,它提供了与脚本宿主环境(如Windows脚本宿主)进行交互的功能。 要理解这个过程,我们可以按照以下步骤进行: 首先,我们需要了解VBScript中的变量声明和赋…

    other 2023年8月8日
    00
  • python3 基础语法(一)

    Python3基础语法(一) Python是一种高级的,面向对象的解释型编程语言,它具有简单易学、代码清晰、高效等特点,在机器学习、数据分析、网络爬虫等领域广泛应用。本文将介绍Python3的基础语法,帮助初学者快速入门。 Python的变量和运算符 Python的变量定义非常简单,可以直接用等号赋值,且一个变量可以保存任意类型的数据,例如: # 定义整型变…

    其他 2023年3月28日
    00
  • vue开发树形结构组件(组件递归)

    下面是“vue开发树形结构组件(组件递归)”的完整攻略: 什么是树形结构? 树形结构是由树根、树干、树枝和叶子节点组成的数据结构。它是一种非线性数据结构,具有天然的层次关系,常见的应用场景有网站菜单、文件目录、组织结构等。 树形结构组件递归 在Vue中,组件递归是一种处理树形结构的经典方式。组件递归通过在组件内部使用自身来实现对嵌套数据的处理,这种方式可以用…

    other 2023年6月27日
    00
  • 小程序日历控件使用方法详解

    小程序日历控件使用方法详解 一、引入组件 首先,我们需要在 app.json 文件中引入日历组件: { "usingComponents": { "calendar": "/components/uni-calendar/uni-calendar" } } 二、基本使用 在要使用日历的页面中,加入以…

    other 2023年6月26日
    00
  • Mysql中的嵌套子查询问题

    MySQL中的嵌套子查询问题攻略 嵌套子查询是MySQL中一种强大的查询技术,它允许在一个查询中嵌套另一个查询。这种技术可以帮助我们解决复杂的查询需求,提供更灵活和精确的结果。在本攻略中,我将详细介绍MySQL中嵌套子查询的使用方法,并提供两个示例说明。 1. 嵌套子查询的基本语法 嵌套子查询的基本语法如下: SELECT column1, column2,…

    other 2023年7月28日
    00
  • C++链表实现通讯录设计

    本文将详细讲解如何使用C++语言实现一个基本的通讯录系统,该系统使用链表数据结构来保存联系人信息,并能够实现基本的增、删、查、改功能。本文的目标读者是具有一定C++基础的初学者。 实现思路 我们使用链表这种数据结构来存储联系人信息,每个节点表示一个联系人,可以存储该联系人的姓名、电话、住址等信息。每个节点不仅保存着联系人信息,还保存着指向前一个节点和后一个节…

    other 2023年6月27日
    00
合作推广
合作推广
分享本页
返回顶部