유니앱, 위챗 애플릿에서 MQTT 사용 문제

최근 유니앱이 위챗 프로그램으로 포장된 프로젝트에서 처음으로 MQTT를 사용했다.사용은 비교적 간단하지만 그래도 약간의 문제에 부딪혔다.여기 기록해.
공식 문서:MQTT Github
공식 MQTT 테스트 도구:MQTTX . 테스트 도구 사용 설명
MQTT의 js 파일:mqtt.min.js
이전 주의 사항:
(1)MQTT.js는 JavaScript로 작성된 MQTT 프로토콜의 클라이언트 라이브러리로 Node에 사용할 수 있습니다.js와 브라우저.노드에서.js단은 전역 설치를 통해 명령행 연결을 사용할 수 있으며 MQTT, MQTT TLS 인증서 연결도 지원한다.특히 MQTT.js는 또한 위챗 애플릿에 대해 비교적 좋은 지원을 가지고 있다.
(2) MQTT는 세 가지 방식으로 연결할 수 있다. TCP 직접 연결, TLS와 웹소켓이다. 그러나 자바스크립트는 TCP를 사용하여 ws즉 웹소켓으로만 연결할 수 있다.따라서 서버가 TCP에 직접 연결되면 클라이언트가 연결되지 않을 것입니다. Error in connectionestablishment 오류가 발생합니다.그래서 클라이언트 프로토콜은 ws, wss, wxs(위챗)만 가능합니다
(3) WebSocket은 단일 TCP 연결에서 전이중 통신을 하는 프로토콜입니다.통신 프로토콜로서 ws(비암호화), wss(SSL암호화)를 프로토콜 표지로 사용합니다.MQTT.js 클라이언트는 다양한 프로토콜을 지원하고 연결 주소는 프로토콜 유형을 표시해야 한다.
(4) ws: 암호화되지 않은 WebSocket 연결은 일반적으로 8083 포트를 사용합니다.sss: 암호화된 WebSocket 연결은 일반적으로 8084 포트를 사용합니다.mqtt: 암호화되지 않은 TCP 연결은 일반적으로 1883 포트를 사용합니다.mqtts: TCP 연결을 암호화합니다.
코드 붙이기:

import $mqtt from './mqtt.min.js';

const mqttOptions = {
  keepalive: 30,
  clean: false, 
  connectTimeout: 5000, // Timeout
  clientId: uni.getStorageSync('clientId'),
  // username: 'test',
  // password: 'test',
}

const connectUrl = `${mqttHost}:${mqttPort}/mqtt`;

// #ifdef H5
var client = $mqtt.connect('wss://' + connectUrl, mqttOptions);
// #endif

// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
// #endif

client.on('connect', () => {
  console.log('connect')
　　//  ， 
  client.subscribe('test', (err) => {
    if (!err) {
      client.publish('test', '{}')
    }
  })
});
//  
client.on('reconnect', (msg) => {
  console.log('reconnect', msg)
});
//  
client.on('error', () => {
  console.log('error')
});
//  
client.on('end', () => {
  console.log('end')
});
//  
client.on('offline', (msg) => {
  console.log('offline',msg)
});
//      
client.on('message', (topic, message) => {
  //  arrayBuffer 
  let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));//  
 　uni.$emit('sendTopicMsg',encodedString);
　　 console.log(encodedString)
})

//  mqtt 
uni.$on('closeMqtt',() => {
  client.end(true); //  
})

설명:
(1) 설정 항목의 keepalive는 심장 박동 시간을 가리킨다.초 단위.클라이언트로부터 메시지를 받을 수 있는 최대 간격을 정의합니다.0(으)로 설정할 수 있습니다. 클라이언트가 자동으로 분리되지 않는 한 계속 열려 있음을 나타냅니다.
(2)clean은false로 설정됩니다. 클라이언트가 오프라인 상태가 될 때 서버는 클라이언트가 끊어진 후에 클라이언트의 구독 상태를 계속 저장/유지해야 합니다.즉true일 때 연결이 끊기면 서비스 측은 링크 상태의 데이터와 내용을 정리합니다.false일 때, 서버는 메시지를 보내는 동안 링크가 끊어져서 보내는 데 실패한 메시지를 저장합니다.이렇게 연결하면 자동으로 구독하는 클라이언트로 전송됩니다.
(3) 연결에 사용자 이름과 비밀번호를 검증해야 할 경우username과password 필드를 추가해야 합니다.
(4) 위챗 애플릿이 사용하는 프로토콜은 암호화되지 않으면 wss이고 암호화되면 wxs이다.웹 사이드, 일반적으로 암호화하지 않으면 wx, 암호화하면 wss.
(5) 전방에서 받은 메시지는arrayBuffer 형식입니다. 문자열 형식으로 바꿔야 합니다. 중국어가 있으면 문자열로 바꾸면 혼란스러울 수 있습니다.let decodeString = decodeURIComponent (escape (encodedString)) 를 사용하여 중국어 부호를 피할 수 있습니다.아니면 인터넷에서 중국어로 자리를 옮기는 방법으로 해결한다.
(6) clientId는 Math를 사용합니다.random().toString(36).substr (3, 사용자 정의 길이) 는 사용자 정의 길이의 유일한 id를 생성합니다.
무료 테스트 MQTT 메시지 링크: o (____)o
프로토콜
주소
포트
경로
인증서
mqtt
broker.hivemq.com
8000
없다
없다
mqtt
broker.emqx.io
1883
없다
없다
ws
test.mosquitto.org
8080
/mqtt
없다
wss
test.mosquitto.org
8081
/mqtt
CA signed server
(1) CA signed server 이것은 MQTTX 테스트 도구에서 SSL/TLS를 true로 선택하면 바로 선택할 수 있습니다.
(2) 테스트를 할 때 먼저 내용을 기입하고 링크를 연결할 때 구독을 추가하면 Topic은 메시지를 보낼 Topic을 잠시 기입합니다. 그러면 모의 서버가 메시지를 보낼 때 MQTTX에서도 방금 보낸 내용을 받을 수 있습니다. 이렇게 하면 연결됩니다.
개발 과정에서 발생한 문제:
(1)failed: Connection closed before receiving a handshake response 오류가 발생했습니다.서비스 측의 mqtt 프로토콜과 클라이언트의 프로토콜이 다르다는 것을 설명한다. 예를 들어python은 tcp 기반의 mqtt를 사용하고 js는 웹socket 기반의 mqtt를 사용하며 악수를 할 수 없다.이 문제가 발생한 것은 서비스 측이 1883이라는 포트를 사용했고 클라이언트도 이 포트를 사용했기 때문에 이 문제를 초래한 것이다.정확한 것은 클라이언트 (js) 는 8083 포트 (암호화되지 않음) 를 사용해야 한다는 것이다.
(2) 처음에 제가 심박수 시간을 3초로 설정했는데 위챗 개발자 도구나 H5단에 있을 때 문제가 없습니다.그러나 애플릿 디버깅에서 애플릿이 백엔드로 전환되면 5s도 안 되면 자동으로 끊어지고 애플릿으로 전환되어 다시 연결될 때까지 계속 연결됩니다.그리고 때로는 끊기고 다시 연결할 때도 있다.자동 접속이 끊긴 원인에 대해 애플릿 홈페이지에서 설명한 바와 같다5s 이상 네트 끊기 설명 두 번째 네트워크 요청-사용 제한에서 알 수 있듯이 작은 프로그램의 메커니즘은 백엔드로 전환된 후 네트워크의 처리를 제한한다.그래서 심장 박동 시간을 30s로 바꾸고 mqtt 30초 후에 자동으로 다시 연결합니다.그러나 이렇게 하면 체험이 조금만 좋아지기 위해 5s를 전환하면 링크를 끊고 다시 잘라서 다시 연결을 요청하는 문제가 발생하지 않는다.하지만 심장 박동 시간을 0으로 바꿀 수 있다는 것은 계속 연결되어 있다는 것을 의미한다.
요약:
(1) 상기 mqtt에 대한 이해도 반밖에 모르지만 이곳의 심장 박동 시간은 TCP/IP의 심장 박동 메커니즘과 같은지 아직 이해하지 못했다.심장 박동 시간을 초과하면 클라이언트가 오프라인 상태가 되지 않거나 오프라인을 해결할 수 있는 더 좋은 방법이 있습니까?
(2) 또한 많은 기능을 사용하지 못했다. 예를 들어 윌버킷 로고는 클라이언트가 연결을 끊는 설정 항목을 처리하는 데 사용된다.
(3) 이 프로젝트는 모두 Qos0을 사용한다는 소식 때문에 Qos1, Qos2와 차이가 무엇인지 모른다.
유니앱, 위챗 어플리케이션에서 MQTT를 사용한 이 글은 여기까지 소개되었습니다. 더 많은 위챗 어플리케이션 MQTT에 관한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!