Vue.js，通常简称为 Vue，是一款流行的JavaScript前端框架，由尤雨溪（Evan You）及其团队开发和维护。Vue以其简单、灵活、高效的特点而备受开发者欢迎，它专注于实现UI层的构建和交互，为构建现代Web应用提供了有力的工具和资源。它以其数据双向绑定、组件化、响应式和轻量等特点而著称。搭配 Vue CLI 脚手架工具，使开发者更容易入门，大大降低了学习成本。此外，Vue 还配备了一个专用的状态管理模式 Vuex，可以帮助您集中管理应用程序的状态。

MQTT 是一种基于发布/订阅模式的轻量级物联网消息传输协议。它提供了一对多的消息分发和应用程序解耦的能力，拥有小型传输开销、协议数据交换的能力以及三种不同的消息服务质量等级，以满足不同的消息传递需求。

本文将重点介绍如何在 Vue 项目中使用 MQTT 来实现客户端与 MQTT 服务器之间的连接、订阅、消息收发和取消订阅等功能。

项目初始化

首先，我们需要创建一个新的 Vue 项目。您可以选择使用 Vue CLI 创建项目，也可以通过引入 Vue.js 创建项目。以下是使用 Vue CLI 创建项目的示例：

vue create vue-mqtt-test

接下来，我们需要安装 MQTT 客户端库。安装方式有多种选择，您可以通过命令行使用 npm 或 yarn 安装，也可以通过 CDN 引入。以下是通过命令行安装的示例：

npm install mqtt --save

或

yarn add mqtt

这将帮助我们轻松引入 MQTT 客户端库。

MQTT 的使用

连接 MQTT 服务器

在本文中，我们将使用由 EMQX 提供的免费公共 MQTT 服务器。以下是服务器连接信息：

  • Broker: broker.emqx.io
  • TCP 端口: 1883
  • WebSocket 端口: 8083
  • WebSocket Secure 端口: 8084

接下来是连接关键代码示例：

<script>
import mqtt from "mqtt";

export default {
  data() {
    return {
      connection: {
        protocol: "ws",
        host: "broker.emqx.io",
        port: 8083,
        endpoint: "/mqtt",
        clean: true,
        connectTimeout: 30 * 1000,
        reconnectPeriod: 4000,
        clientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8),
        username: "emqx_test",
        password: "emqx_test",
      },
      // ... 其他数据
    };
  },
  methods: {
    initData() {
      // 初始化数据
    },
    handleOnReConnect() {
      // 处理重新连接
    },
    createConnection() {
      // 创建连接
    },
  },
};
</script>

订阅主题

在 MQTT 中，订阅主题是一项常见的操作。下面是订阅主题的示例代码：

methods: {
  // ... 其他方法

  doSubscribe() {
    const { topic, qos } = this.subscription;
    this.client.subscribe(topic, { qos }, (error, res) => {
      if (error) {
        console.log('Subscribe to topics error', error);
        return;
      }
      this.subscribeSuccess = true;
      console.log('Subscribe to topics res', res);
    });
  },
  // ... 其他方法
},

取消订阅

取消订阅也是一项重要的操作。以下是取消订阅的示例代码：

methods: {
  // ... 其他方法

  doUnSubscribe() {
    const { topic } = this.subscription;
    this.client.unsubscribe(topic, error => {
      if (error) {
        console.log('Unsubscribe error', error);
      }
    });
  },
  // ... 其他方法
},

消息发布

发布消息是与 MQTT 服务器进行通信的关键操作之一。以下是发布消息的示例代码：

methods: {
  // ... 其他方法

  doPublish() {
    const { topic, qos, payload } = this.publish;
    this.client.publish(topic, payload, { qos }, error => {
      if (error) {
        console.log('Publish error', error);
      }
    });
  },
  // ... 其他方法
},

断开连接

最后，当不再需要连接 MQTT 服务器时，应该执行断开连接操作。以下是断开连接的示例代码：

methods: {
  // ... 其他方法

  destroyConnection() {
    if (this.client.connected) {
      try {
        this.client.end(false, () => {
          this.initData();
          console.log('Successfully disconnected!');
        });
      } catch (error) {
        console.log('Disconnect failed', error.toString());
      }
    }
  },
  // ... 其他方法
},

测试

我们已经使用 Vue 编写了一个简单的浏览器应用，该应用具备创建连接、订阅主题、收发消息、取消订阅和断开连接等功能。您可以在 GitHub 上找到完整的项目代码：GitHub 项目链接。

在测试过程中，您可以使用 MQTT 5.0 客户端工具 - MQTTX 作为另一个客户端来进行消息收发测试。

通过这个示例，我们演示了如何在 Vue 项目中创建 MQTT 连接，并模拟了客户端与 MQTT 服务器之间的订阅、消息发布和取消订阅等场景。

总结

Vue 是一款强大的前端框架，与 MQTT 协议结合使用可以实现各种有趣的应用。无论是浏览器端还是移动端，Vue 都可以帮助您开发出高效的

应用程序。希望本文能够帮助您更好地理解如何在 Vue 项目中使用 MQTT，以及如何利用这种组合来构建更多有趣和实用的物联网应用。

打赏微海报分享