Minimal example to interact with Sonoff S20 using MQTT and JavaScript
| <!-- Minimal example to interact with Sonoff S20 device with MQTT | |
| for a blog post (https://pagefault.blog) | |
| --> | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Sonoff example</title> | |
| <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <!-- Here is the interesting part --> | |
| <script > | |
| // Connect to MQTT broker | |
| // Note. this example uses web-sockets (port 1884) | |
| mqtt = new Paho.MQTT.Client("192.168.0.19", Number(1884), "sonoff-example-client"); | |
| mqtt.connect({onSuccess: function() { | |
| console.log("connected!"); | |
| }}); | |
| function toggleSonoff() { | |
| console.log("toggleSonoff"); | |
| // Send 'toggle' message to command topic | |
| message = new Paho.MQTT.Message("toggle"); | |
| message.destinationName = "cmnd/sonoff1/power"; | |
| mqtt.send(message); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row text-center span2"> | |
| <div class="page-header"> | |
| <h2>Sonoff example</h2> | |
| </div> | |
| <button type="submit" class="btn btn-primary btn-lg" onclick="toggleSonoff()">Toggle</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment