146 lines
4.6 KiB
HTML
146 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>WavTest</title>
|
|||
|
|
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="Scripts/jplayer/jquery.jplayer.js" type="text/javascript"></script>
|
|||
|
|
<script src="Scripts/jplayer/jquery.jplayer.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(function () {
|
|||
|
|
$('#jplayer1').jPlayer({
|
|||
|
|
ready: function () {
|
|||
|
|
$(this).jPlayer('setMedia', { mp3: '/Sounds/sos.wav' }).jPlayer('repeat');
|
|||
|
|
},
|
|||
|
|
swfPath: '/Scripts/jplayer/',
|
|||
|
|
supplied: 'mp3'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<button onclick="$('#jplayer1').jPlayer('play')">
|
|||
|
|
播放</button>
|
|||
|
|
<button onclick="$('#jplayer1').jPlayer('pause')">
|
|||
|
|
暂停</button>
|
|||
|
|
<div id="jplayer1">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* this demo uses EMQX Public MQTT Broker (https://www.emqx.com/en/mqtt/public-mqtt5-broker), here are the details:
|
|||
|
|
*
|
|||
|
|
* Broker host: broker.emqx.io
|
|||
|
|
* WebSocket port: 8083
|
|||
|
|
* WebSocket over TLS/SSL port: 8084
|
|||
|
|
*/
|
|||
|
|
const clientId = 'mqttjs_' + Math.random().toString(16).substring(2, 8)
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* choose which protocol to use for connection here
|
|||
|
|
*
|
|||
|
|
* /mqtt: MQTT-WebSocket uniformly uses /path as the connection path,
|
|||
|
|
* which should be specified when connecting, and the path used on EMQX is /mqtt.
|
|||
|
|
*
|
|||
|
|
* for more details about "mqtt.connect" method & options,
|
|||
|
|
* please refer to https://github.com/mqttjs/MQTT.js#mqttconnecturl-options
|
|||
|
|
*/
|
|||
|
|
// const connectUrl = 'ws://broker.emqx.io:8083/mqtt'
|
|||
|
|
const connectUrl = 'wss://gua.blv-oa.com:8084/mqtt'
|
|||
|
|
|
|||
|
|
const options = {
|
|||
|
|
keepalive: 60,
|
|||
|
|
clientId: clientId,
|
|||
|
|
clean: true,
|
|||
|
|
connectTimeout: 3000,
|
|||
|
|
/**
|
|||
|
|
* By default, EMQX allows clients to connect without authentication.
|
|||
|
|
* https://docs.emqx.com/en/enterprise/v4.4/advanced/auth.html#anonymous-login
|
|||
|
|
*/
|
|||
|
|
username: 'blwws',
|
|||
|
|
password: 'E!9~3~H=M.&2STW',
|
|||
|
|
reconnectPeriod: 1000,
|
|||
|
|
// for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
|
|||
|
|
}
|
|||
|
|
const topic = '/WebSocket/mqtt'
|
|||
|
|
const payload = 'WebSocket mqtt test'
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#qos
|
|||
|
|
const qos = 0
|
|||
|
|
|
|||
|
|
console.log('connecting mqtt client')
|
|||
|
|
const client = mqtt.connect(connectUrl, options)
|
|||
|
|
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#event-error
|
|||
|
|
client.on('error', (err) => {
|
|||
|
|
console.log('Connection error: ', err)
|
|||
|
|
client.end()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#event-reconnect
|
|||
|
|
client.on('reconnect', () => {
|
|||
|
|
console.log('Reconnecting...')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#event-connect
|
|||
|
|
client.on('connect', () => {
|
|||
|
|
console.log('Client connected:' + clientId)
|
|||
|
|
|
|||
|
|
// subscribe topic
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
|
|||
|
|
client.subscribe(topic, { qos }, (error) => {
|
|||
|
|
if (error) {
|
|||
|
|
console.log('Subscribe error:', error)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
console.log(`Subscribe to topic ${topic}`)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// publish message
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
|
|||
|
|
client.publish(topic, payload, { qos }, (error) => {
|
|||
|
|
if (error) {
|
|||
|
|
console.error(error)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// https://github.com/mqttjs/MQTT.js#event-message
|
|||
|
|
client.on('message', (topic, payload) => {
|
|||
|
|
console.log(
|
|||
|
|
'Received Message: ' + payload.toString() + '\nOn topic: ' + topic
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* If you need to unsubscribe from a topic, you can use the following code.
|
|||
|
|
*/
|
|||
|
|
// // unsubscribe topic
|
|||
|
|
// // https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
|
|||
|
|
// client.unsubscribe(topic, { qos }, (error) => {
|
|||
|
|
// if (error) {
|
|||
|
|
// console.log('unsubscribe error:', error)
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// console.log(`unsubscribed topic: ${topic}`)
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* If you need to disconnect, you can use the following code.
|
|||
|
|
*/
|
|||
|
|
// if (client.connected) {
|
|||
|
|
// try {
|
|||
|
|
// // disconnect
|
|||
|
|
// // https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
|
|||
|
|
// client.end(false, () => {
|
|||
|
|
// console.log('disconnected successfully')
|
|||
|
|
// })
|
|||
|
|
// } catch (error) {
|
|||
|
|
// console.log('disconnect error:', error)
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|