toggle-sonoff.html

## toggle-sonoff.html
<!-- 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>