-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
164 lines (136 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Easemob MQTT Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<!-- paho-mqtt 文档 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html -->
<script type="text/javascript">
var host = '//xxxx.xxx.xxx' // 环信MQTT服务器地址 通过console后台[MQTT]->[服务概览]->[服务配置]下[连接地址]获取
var port = 80 // 协议服务端口 1883/1884/80/443 通过console后台[MQTT]->[服务概览]->[服务配置]下[连接端口]获取
var appId = 'appId' // appID 通过console后台[MQTT]->[服务概览]->[服务配置]下[AppID]获取
var appClientId = 'appClientId' // 开发者ID 通过console后台[应用概览]->[应用详情]->[开发者ID]下[ Client ID]获取
var appClientSecret = 'appClientSecret' // 开发者密钥 通过console后台[应用概览]->[应用详情]->[开发者ID]下[ ClientSecret]获取
var restApiUrl = 'restApiUrl'// 环信MQTT REST API地址 通过console后台[MQTT]->[服务概览]->[服务配置]下[REST API地址]获取
var topic = 't/t1' // 需要订阅或发送消息的topic名称
var useTLS = false // 是否走加密 HTTPS，如果走 HTTPS，设置为 true
var cleansession = true
var deviceId = 'deviceId' // 自定义deviceID
var clientId = deviceId + '@' + appId // deviceID@AppID
var reconnectTimeout = 2000 // 超时重连时间
var username = 'test' // 自定义用户名 长度不超过64位即可
var password = '' // 用户密码通过getUserToken方法获取
var mqtt
// 客户端获取应用Token
function getAppToken() {
var request = new XMLHttpRequest()
// 拼接token接口
var api = `${restApiUrl}/openapi/rm/app/token`
// Post请求
request.open('post', api)
// 设置Content-Type
request.setRequestHeader('Content-Type', 'application/json')
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
var res = JSON.parse(request.responseText)
// 从响应体中解析出appToken
var appToken = res.body.access_token
console.log('appToken:', appToken)
getUserToken(appToken)
} else {
throw new Error('请求失败，响应码为' + request.status)
}
}
}
var params = {
appClientId: appClientId,
appClientSecret: appClientSecret,
}
// 发送ajax请求
request.send(JSON.stringify(params))
}
// 获取用户Token
function getUserToken(appToken) {
var request = new XMLHttpRequest()
// 拼接token接口
var api = `${restApiUrl}/openapi/rm/user/token`
// Post请求
request.open('post', api)
// 设置Content-Type
request.setRequestHeader('Content-Type', 'application/json')
// 设置Authorization
request.setRequestHeader('Authorization', appToken)
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
var res = JSON.parse(request.responseText)
// 从响应体中解析出userToken
var userToken = res.body.access_token
console.log('userToken:', userToken)
password = userToken
// 连接MQTT
MQTTconnect()
} else {
throw new Error('请求失败，响应码为' + request.status)
}
}
}
var params = {
username: username,
expires_in: 86400, // 过期时间，单位为秒，默认为3天，如需调整，可提工单调整
cid: clientId
}
// 发送ajax请求
request.send(JSON.stringify(params))
}
getAppToken()
function MQTTconnect() {
mqtt = new Paho.MQTT.Client(
host,
port,
clientId
)
var options = {
timeout: 3,
onSuccess: onConnect,
mqttVersion: 4,
cleanSession: cleansession,
keepAliveInterval: 45,
onFailure: function (message) {
setTimeout(MQTTconnect, reconnectTimeout)
}
}
mqtt.onConnectionLost = onConnectionLost
mqtt.onMessageArrived = onMessageArrived
if (username != null) {
options.userName = username
options.password = password
options.useSSL = useTLS // 如果使用 HTTPS 加密则配置为 true
}
mqtt.connect(options)
}
function onConnect() {
console.log('connect success')
mqtt.subscribe(topic, { qos: 1 }) // 订阅消息
message = new Paho.MQTT.Message("Hello mqtt!!")//set body
message.destinationName = topic// set topic
mqtt.send(message)
console.log("send msg : " + topic + " " + message.payloadString)
// mqtt.unsubscribe(topic) // 取消订阅
}
function onConnectionLost(response) {
setTimeout(MQTTconnect, reconnectTimeout)
}
function onMessageArrived(message) {
var topic = message.destinationName
var payload = message.payloadString
console.log("recv msg : " + topic + " " + payload)
}
</script>
</head>
<body>
</body>
</html>