It’s time to connect the debug hub to the mirror. But in order to do so, I need to add some code to the smart mirror software to be able to accept calls from an external application.
I’ll do that by opening the project in my atom editor, and browsing to the server.js file. The smart mirror electron project uses a node js framework called “express” to do some simple routing tasks. I suggest you read up on routing here.
The essence of routing is recognizing an incoming request, doing some stuff, and optionally send some data back. Ok, that’s dumbing it down a bit, but that’s really all it does.
I will be sending a HTTP command to the magic mirror, but for this to work properly, I need to know the IP address and the port, the electron web server is running on. The IP is easy (for now) it’s just the local host address 127.0.0.1. The port is something that is passed on when the server is started. You can see the code below (in server.js).
Notice how the port is configured. If I look in the configuration file I see that it listens on port 8080.
OK, now to set up a simple routing in server.js.
By calling app.get, what really happens is, it adds a callback function to a specific path. What code below is saying is : if some one comes to the webserver and appends “/comm” to the address, you have to call this function. All the function does, is parse a parameter from the URL called “command” and stores it in a variable. The variable is being output to the console, and a response is sent back to the application that did the request.
That’s it. Really easy.
Let’s test this by starting up the mirror application, and opening a browser . The browser will be the calling application this time. Just type the IPaddress followed by the port and the /comm request, just as it was configured. You can pass parameters by adding a question mark and passing parameters in a “key=value” fashion. In the example below I will be sending the parameter called “command” with the value “hide”.
And this is what shows up in the browser :
In order to connect the debug hub, I will have to change the code of the debug hub to do the same thing as the browser just did. For this I’ll adjust home.html.
First I’ll add an Id to the 2 buttons.
The “ready” event handler of the document just links the click event of the buttons to the correct call of the sendNotification function.
Let’s test this. Make sure both the mirror and the debug hub are running, and press the hide or show button. This should happen :