2022年1月

websocket客户端连接需要用到一个js库:mqtt.js

GitHub地址:https://github.com/mqttjs/MQTT.js

下面填写配置连接MQTT的信息

//MQTT连接的配置
options: {
  protocolVersion:4, //MQTT连接协议版本
  clientId: 'miniTest',
  clean: false,
  password: '123456',
  username: 'socketer',
  reconnectPeriod: 10000, //10000毫秒,两次重新连接之间的间隔
  connectTimeout: 30 * 1000, //1000毫秒,两次重新连接之间的间隔
  resubscribe: false //如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
}

连接MQTT实例

  onClick_connect: function() {

    var that = this;
    //开始连接
    this.data.client = mqtt.connect(host, this.data.options);
    this.data.client.on('connect', function(connack) {
      wx.showToast({
        title: '连接成功'
      })
    })


    //服务器下发消息的回调
    that.data.client.on("message", function(topic, payload) {
      console.log(" 收到 topic:" + topic + " , payload :" + payload)
      wx.showModal({
        content: " 收到topic:[" + topic + "], payload :[" + payload + "]",
        showCancel: false,
      });
    })


    //服务器连接异常的回调
    that.data.client.on("error", function(error) {
      console.log(" 服务器 error 的回调" + error)

    })

    //服务器重连连接异常的回调
    that.data.client.on("reconnect", function() {
      console.log(" 服务器 reconnect的回调")

    })


    //服务器连接异常的回调
    that.data.client.on("offline", function(errr) {
      console.log(" 服务器offline的回调")

    })


  },

订阅主题(单个)

  onClick_SubOne: function() {
    if (this.data.client && this.data.client.connected) {
      //仅订阅单个主题
      this.data.client.subscribe('Topic0', function(err, granted) {
        if (!err) {
          wx.showToast({
            title: '订阅主题成功'
          })
        } else {
          wx.showToast({
            title: '订阅主题失败',
            icon: 'fail',
            duration: 2000
          })
        }
      })
    } else {
      wx.showToast({
        title: '请先连接服务器',
        icon: 'none',
        duration: 2000
      })
    }
  },

订阅主题(多个)

  onClick_SubMany: function() {
    if (this.data.client && this.data.client.connected) {
      //仅订阅多个主题
      this.data.client.subscribe({
        'Topic1': {
          qos: 0
        },
        'Topic2': {
          qos: 1
        }
      }, function(err, granted) {
        if (!err) {
          wx.showToast({
            title: '订阅多主题成功'
          })
        } else {
          wx.showToast({
            title: '订阅多主题失败',
            icon: 'fail',
            duration: 2000
          })
        }
      })
    } else {
      wx.showToast({
        title: '请先连接服务器',
        icon: 'none',
        duration: 2000
      })
    }
  },

发布消息

  onClick_PubMsg: function() {
    if (this.data.client && this.data.client.connected) {
      this.data.client.publish('Topic0', 'i am a boy');
      wx.showToast({
        title: '发布成功'
      })
    } else {
      wx.showToast({
        title: '请先连接服务器',
        icon: 'none',
        duration: 2000
      })
    }
  },

取消订阅(单个)

  onClick_unSubOne: function() {
    if (this.data.client && this.data.client.connected) {
      this.data.client.unsubscribe('Topic1');
    } else {
      wx.showToast({
        title: '请先连接服务器',
        icon: 'none',
        duration: 2000
      })
    }
  },

取消订阅(多个)

  onClick_unSubMany: function() {
    if (this.data.client && this.data.client.connected) {
      this.data.client.unsubscribe(['Topic1', 'Topic2']);
    } else {
      wx.showToast({
        title: '请先连接服务器',
        icon: 'none',
        duration: 2000
      })
    }
  },

资料参考:半颗心脏 https://github.com/xuhongv/WeChatMiniEsp8266

本实例的mosquitto文件位于/etc/mosquitto

1.打开配置文件编辑,关于用户认证的方式和读取的配置都在这个文件中进行配置。

vi /etc/mosquitto/mosquitto.conf

【i】编辑模式

#允许匿名 我这里是将#注释去掉 将ture改为false
allow_anonymous  false

#password_file 这个位置将#注释 密码文件为pwfile

password_file /etc/mosquitto/pwfile

#acl_file 这个位置将#注释 然后权限文件为acl

acl_file /etc/mosquitto/acl

2.创建pwfile文件

命令:通过以下命令可以创建pwfile文件 并输入相应的密码,见下图

mosquitto_passwd -c /etc/mosquitto/pwfile admin

27.png

3.查看pwfile文件,可看到admin:xxxx的文件 则可说明创建成功并可用。

cat pwfile

288.png

4.alc文件的创建 基于mosquitto下有个aclfile.example的示例文件。这里就复制一份重命名。

命令如下:

cp aclfile.example acl

5.查看alc文件 可见里面有相应的配置说明及注释

cat alc

3003.png

一、mosquito.conf开启相应的端口和协议

本示例的目录:mosquito.conf位于/etc/mosquito/mosquito.conf下。

命令:

vi /etc/mosquito/mosquito.conf

【i】 进入编辑模式

添加以下代码,如果有则把#注释去掉

#MQTT协议
port 1883
protocol mqtt
#websockets协议
listener 8083 
protocol websockets
#如果需要查看websockets日志还可以加入以下面,上面有提过。
log_type websockets
websockets_log_level 0

【ESC】退出编辑模式
输入:wq 保存退出

△这里是很关键的一步。

二、Nginx 配置socket转发

本实例是基于Lnmp下的nginx来进行配置,示例网站为iot.xx.com

我要实现是
iot.xx.com/mqtt 进行转发。

我的vhost配置文件在/usr/local/nginx/conf/vhost/iot.xx.com.conf

server{
}

在这上面添加以下代码

map $http_upgrade $connection_upgrade{
    default upgrade;
    '' close;
}

没有添加以上代码,下面引用时候就会报$connection_upgrade错误

然后在server{}里面包含位置添加转发代码

#socket转发
location /mqtt {
        proxy_pass http://127.0.0.1:8083/;
        proxy_http_version 1.1;
        proxy_redirect off;
        proxy_buffering off;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Host $host;
        proxy_set_header Http-Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
}

在这里我踩了不少坑。都无法进行访问。搜索百度也无法解决。最后在一篇攻略中受到启发。并记录下来。

重启服务Nginx

lnmp nginx reload

OK 完成以上几步就可以轻松进行测试了。

这里推荐两个socket在线测试平台

A、jsons http://www.jsons.cn/websocket/
B、yunjson http://www.yunjson.com/websocket/
046.png

本人实例:mosquito的安装目录位于centos的 /etc/mosquitto 目录中。mosquitto.conf为配置文件。

摘自CNBLOGS《mosquitto 常用命令》

1.启动服务

mosquitto -c /etc/mosquitto/mosquitto.conf -d #后台启动服务

2.停止服务

A、查询当前mosquito进程

ps -aux | grep mosquitto

B、杀死进程

kill -9  18248 (该进程ID根据A查询所得 别生搬硬套)

C、重启服务

mosquitto -c  /etc/mosquitto/mosquitto.conf  -d 

mosquito启动命令详解

mosquitto [-c config file] [ -d | --daemon ] [-p port number] [-v]

-c 后面跟的是启动mosquitto可以调整的参数,比如是否开启基本认证,端口是什么,SSL单向和双向的认证配置等等。
-d 表示MQTT mosquitto将在后台运行。
-p 代表当前的mosquitto服务实例启动以后,其监听端口号,这个配置的覆盖[-c config file] 指定的配置文件中的端口
-v 代码调试模式(verbose)可以输出更多的信息

mosquitto_pub 命令参数说明

-d 打印debug信息
-f 将指定文件的内容作为发送消息的内容
-h 指定要连接的域名 默认为localhost
-i 指定要给哪个clientId的用户发送消息
-I 指定给哪个clientId前缀的用户发送消息
-m 消息内容
-n 发送一个空(null)消息
-p 连接端口号
-q 指定QoS的值(0,1,2)
-t 指定topic
-u 指定broker访问用户
-P 指定broker访问密码
-V 指定MQTT协议版本
--will-payload 指定一个消息,该消息当客户端与broker意外断开连接时发出。该参数需要与--will-topic一起使用
--will-qos Will的QoS值。该参数需要与--will-topic一起使用
--will-retain 指定Will消息被当做一个retain消息(即消息被广播后,该消息被保留起来)。该参数需要与--will-topic一起使用
--will-topic 用户发送Will消息的topic

mosquitto_sub 命令参数说明

-c 设定‘clean session’为无效状态,这样一直保持订阅状态,即便是已经失去连接,如果再次连接仍旧能够接收的断开期间发送的消息。
-d 打印debug信息
-h 指定要连接的域名 默认为localhost
-i 指定clientId
-I 指定clientId前缀
-k keepalive 每隔一段时间,发PING消息通知broker,仍处于连接状态。 默认为60秒。
-q 指定希望接收到QoS为什么的消息 默认QoS为0
-R 不显示陈旧的消息
-t 订阅topic
-v 打印消息
--will-payload 指定一个消息,该消息当客户端与broker意外断开连接时发出。该参数需要与--will-topic一起使用
--will-qos Will的QoS值。该参数需要与--will-topic一起使用
--will-retain 指定Will消息被当做一个retain消息(即消息被广播后,该消息被保留起来)。该参数需要与--will-topic一起使用
--will-topic 用户发送Will消息的topic

上节咱们讲到《centos 7.5安装部署mosquitto》。那么怎么实现topic主题订阅和消息message发布呢。

使用MQTT.fx工具链接实现主题订阅和消息推送

移步官网mqtt.fx下载http://mqttfx.jensd.de/index.php/download

A、打开配置界面 配置连接信息

mqtt连接.png

B、新增连接信息实例

mqtt.fx连接实例.png

C、apply 确认后返回A的主界面进行连接。如果连接错误,则返回B重新配置信息

mqtt.fx连接成功.png

D、使用mqtt.fx进行主题订阅topic
mqtt订阅主题.png

E、使用mqtt.fx对应主题topic发送消息
mqtt.fx推送消息.png

最终通过putty登陆服务端会话 mosquitto_sub -t test1 查看当前订阅来访信息

346.png

1.yum install epel-release
001.png
2.yum search mosquitto

002.png

3.yum install mosquitto mosquitto-devel

按【Y】
003.png
4.service mosquitto start 启动mosquitto服务 报错

Redirecting to /bin/systemctl start mosquitto.service

  1. /bin/systemctl start mosquitto.service 这么启动

6.mosquitto_sub -t test1 创建一个主题

7.另外独立开启会话 mosquitto_pub -t test1 -m joyokim

8.最终效果出来了

005.png