MQTT+STM32+ESP8266-01s硬件传递的JSON数据到前端和后端出现中文乱码问题

news2025/1/16 15:56:32

最近在做一个关于MQTT相关毕设项目,数据传输过程中出现了中文乱码问题,大致就是硬件发送的JSON主题数据中包含中文(如下图1所示),软件后端和软件前端接受该主题数据后出现了中文乱码,出现乱码一般都是硬件传递到后端和前端的编码不一致导致的,所以前端和后端接受该JSON数据的时候设置一下编码即可,其中后端接收到的中文乱码如下图2,前端接受到的乱码如下图3所示。

硬件发送的JSON主题数据

在这里插入图片描述

后端出现中文乱码
前端出现中文乱码

在这里插入图片描述

后端的解决办法就是在MQTT接收方法中设置一下编码格式,如下图所示:

在这里插入图片描述

设置后后端中文乱码问题得到解决,如下图所示:

在这里插入图片描述

前端我是采用的MQTT.js,所以在client.on(“message”, (topic, message, packet) => {} 中设置一下messsage的编码格式，详细步骤如下:

首先,需要在utils文件中创建一个encode.js文件,代码如下:

import {
    TextEncoder,
    TextDecoder
  } from 'text-encoding'
  
  /**
   * 编码
   * @param {*} str 需要编码的字符串
   * @param {*} encoding 编码类型(gb2312,utf-8)
   * @returns unit8Array类型的对象
   */
  export function encode(str, encoding) {
    let encode = new TextEncoder(encoding, {
      NONSTANDARD_allowLegacyEncoding: true
    })
    let uint8Array = encode.encode(str);
    return uint8Array;
  }
  
  
  /**
   * 解码
   * @param {*} uint8Array 需要解码的unit8Array类型的对象
   * @param {*} encoding 解码类型(gb2312,utf-8)
   * @returns 解码出来的字符串
   */
  export function decode(uint8Array, encoding) {
    let decode = new TextDecoder(encoding);
    return decode.decode(uint8Array)
  }