Tuesday 9 September 2014

Qlik Sense Desktop under the hood

OK, so you've been playing with Qlik Sense Desktop for a little while now, it's all pretty neat and you're getting increasingly curious about how it works under the hood. Let's see how you might go about investigating that.
  1. Launch Qlik Sense Desktop.
  2. Hit Ctrl-Shift-RightClick in the desktop client. You should now see a context menu with two interesting menu options i.e. "View source" and "Show DevTools".
  3. Select View source and notice that the source markup looks an awful lot like HTML5.
  4. Select "Show DevTools" and notice a typical browser deveveloper tools window opens in a new tab. In other words the presentation layer of Qlik Sense Desktop is actually a local web application. 
  5. So if this is a web application it should talking to a server process probably over HTTP. A good way to see this in action by using a HTTP Debug Proxy such as Fiddler. Download and install Fiddler in order to carry on with the next steps.
  6. Close Qlik Sense Desktop.
  7. Launch Fiddler.
  8. Relaunch Qlik Sense Desktop.
  9. You should now see a flurry of activity in Fiddler as shown below. You can select any line and view the HTTP requests and responses to and from the host (in this case "localhost") in Fiddler's Inspectors tab. The first call for /hub requests the HTML template or master page for the Qlik Sense app, subsequent calls are for CSS stylesheets, JavaScript and TTF font resources as you'd expect. But then you notice an intriguing "Tunnel to " HTTP request (see Fiddler line 8 in the screenshot below) which is followed by a request for "http://localhost:port/app/%3Ftransient%3D" returning with HTTP status code 101. 
    Fiddler capturing Qlik Sense Desktop HTTP traffic
  10. Select the request for "http://localhost:port/app/%3Ftransient%3D" and inspect the request/response in Fiddler's Inspectors tab (see screenshot below). Notice that the Qlik Sense Desktop client has requested a protocol switch from HTTP to the websocket protocol.
    Protocol switch request
  11. OK, we've just switched protocol but Fiddler only seems to be showing HTTP traffic... Fear not as a clever developer has already sorted that problem out at the CodeProject. Follow the steps carefully in that article to configure Fiddler to show websocket traffic in an intuitive fashion.
  12. Now close Qlik Sense Desktop and Fiddler.
  13. Relaunch Fiddler.
  14. Relaunch Qlik Sense.
  15. Now, in Fiddler you should see a large number of requests for the "fakewebsocket" host (see screenshot below). As you can see in the URL column these requests are distinguished between "Client" and "Server". In fact the "Client" requests represent the web socket requests from the Qlik Sense Desktop client and the "Server" requests represent the web socket responses from the local Qlik Sense server. 
    Websocket traffic in Fiddler
  16. Now as part of your exploration of all this websocket chatter, select the request for "http://fakewebsocket/WSSession23.Client.9". In the Fiddler inspector tab select "Raw" to view the entire request and notice that the body of the request looks very much like JSON. Therefore you may as well select the JSON option instead of Raw to display a nicely formatted view of the data. As you can see the Qlik Sense Desktop client is requesting a list of documents by invoking the method "GetDocList".
    GetDocList request
  17. Now let's look into the response from the server by selecting the request for "http://fakewebsocket/WSSession23.Server.10" and notice that the server has indeed responded with a list of documents which appear to be the applications you've previously created in Qlik Sense Desktop.
    GetDocList response

Cool, that was fun and interesting. So, how could we harness this newfound knowledge to create new and exciting things? That will be the subject of a future post. Thanks a lot for reading.

No comments:

Post a Comment