MQTT test project with Snap!
This is an advanced example showing connection to a broker.
Quick start :
- hit the green flag
- click on the dot to connect (becomes green)
- hit arrow keys to send messages to your dot: it will move accordingly
- click again on the dot to disconnect
When started, the project prepares the MQTT client. Then, click on the big dot on the stage. It will connect.
If you click a second time, it will disconnect.
Now, if you use your arrows, the dot wil move accordingly. The dot is not directly commanded by the move actions, but by replying to received messages from the MQTT broker.
If you have access to a different client, you can connect it to the same broker and publish the messages "right", "left", "up" or "down" to the topic "Hello" (attention: with capital H), the dot will move accordingly.
You can load the project on two different computers running Snap!. When you hit the arrow keys on the first computer, the dot on the second computer will follow.
Finally, don't forget to disconnect your client by clicking again on the dot.data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAAFnElEQVR4Xu3cf2jUdRzH8fdtU5haEhTZzG23mmVYpFiLULIg0dwfxSYsKDYoaol/RLQfYVBB4n5IFKRtEfiDQEsHRdbC/phkEMNfUaMfW223KatICHNLcD8uvsKiRVvn3fd7r/t877m/7z7v7z0/j/tu9727ReLxeNz4oYCoQASAovKMvVwAgECQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DswJg7PVX/nOni599CQHiAqEEOBrrtd8+OWS/d3Xa+RNfzJp44arVds0DD9l16ytsfnSpeDuyb3yoAI4M/GB99U/+L7qZttnDWNryji2I3pJ9EkSPOBQAJ+KTNtDcaGfbW33JuKS23qL12y0nkuPLeiwycwHnAV4c/NG+ee4x+/NUt6/7PG9lmd3+2ruWX3Szr+uy2PQCTgMcjfVZT80Guzj4UyD7ml90ky3f02nzi0sDWZ9FzZwF6J35vq5eHxi+KRwewjv2fsqZMKBni7MAT1beaxdOfhlQlunLLlhXbqvaP0rLrGwb4iTAgV3bbLD1xbTuVVHdqxbdvDWtM7NhmHMAvWt8x+/XXCa5u6vX5vH3oK/PC+cA9jbV2XD7Dl8jJLrY4to6K21oSfTm3C6BAk4B9F54dK/VviItO9rHC5IEYCV6E6cADr3VZP0tLyT62AK5XUn9dit8pjGQtbNxUacAnt60Jum32fzaXO/tuhUHj/m1XNav4xTAo9FIRmzY2oF4RhxHGA7CGYDnjnxgPU8/khHNvTOgdybkJ/UCzgD0PtMXe+Pl1B+xDyvc2rrbFlXW+LASSwAwCQMATCLaDHcBYBItAZhENAD6Fw2A/rV05gw48u1XdmLjCv8eeQorlXX1WX4xnxNMIeHfd3UGoHfEXIbxY8szaw2nAH73fLX92rFPWvD6impbtmOP9BjCNNwpgJnwVpz3paXFm54IkwHpY3EK4ER8wo6V5EmDrekft9xIrvQYwjTcKYBe+P7mRhtqa5bsQWFtg5U0NElmh3WocwC9j2SdevxBGzsTS+uezCkstpX7PuOjWD5Xdw6g9/iHPz5gvVse9TnF7MstfXO/FWysSuvMbBjmJEBvY3o2V9q5zo607NG1Gyps+a5DaZmVbUOcBei9IDld+7CNHDkc6J5dta7c7mz70HL5LwmBdHYWoFdjdGzUvt9SZRcCQujhu23n+5aflx9IfBZ1+IvpU5s3Pjl+GaHfv469X7vLdr7HJZeAnyVOnwH/2Wb48H6LtW61S0MDKSWbWxi14rptVlCe3hc5KR20w3cODUBvDy5NjtlwW6udPfC2jZ8ZvKJtyVtSZDdWPWUFtXU2N2fOFd2XGydfIFQApzLELW4/H9xtf3R/br907J21zqKKarv6nvvshsoai1hmfOck+e10756hBPjvbfAuXp8/Pv0/pS68azUXlTPAa1YAzIDOHMIMBQAIDWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFgCgND/DAYgBaQEASvMzHIAYkBYAoDQ/wwGIAWkBAErzMxyAGJAWAKA0P8MBiAFpAQBK8zMcgBiQFvgLrt7ct6240LwAAAAASUVORK5CYII=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFoCAYAAACPNyggAAAOhUlEQVR4Xu3VwQkAAAjEMN1/abewn7jAQRC64wgQIECAAIF3gX1fNEiAAAECBAiMAHsCAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQIHLFxAWmhEwHPAAAAAElFTkSuQmCCleftupdowngot message0Handle eventsconnecttopicmessagepayloadmessagetopicmessagepayloaderrorerrorarg2arg3reconnectarg1arg2arg3offlinearg1arg2arg3testtestvar mqttScript,
done = false;
mqttScript = document.createElement('script'),
mqttScript.onload = function () {
done = true;
console.log('MQTT is ready');
};
document.head.appendChild(mqttScript);
mqttScript.src = 'https://unpkg.com/mqtt/dist/mqtt.min.js';
return function () {return done; }brokermoquitto (ws)=ws://test.mosquitto.org:8080/mqtt
mosca (ws)=ws://test.mosca.io/
hivemq (ws)=ws://broker.hivemq.com:8000
mosca-localhost (ws)=ws://localhost:3000
codimeo MQTT ={
ws=ws://mqtt.codimeo.com:15675/ws
wss=wss://mqtt.codimeo.com:15676/ws
}oneventmessagecallbacksubscribetopicunsubscribetopicpublishtopicmessageis_connectedlog_clientlog_parent_spriteendforceoneventsubscribeunsubscribepublishis_connectedlog_clientlog_parent_spriteendmessageand the main body of the classmqtt-clientEnd MQTT Client with force True or False. Default : Falsemqtt-clientmessagetopicmqtt-clientmqtt clienttopicmqtt-clientjsonreturn JSON.parse(json)"end":"" }mqtt-clientevent#1#2#3your comment line hereHelloupcmd,publishretainfalseqos,0dupfalselength,9topic,Hellopayloadtype,Bufferdata117,112messageoneventsubscribeunsubscribepublishis_connectedlog_clientlog_parent_spriteendwss://mqtt.codimeo.com:15676/wsnullwss://mqtt.codimeo.com:15676/wsmessagecallbacktopictopictopicmessageforce0