LiveReload snippet will not be injected into HTML when using query params in URL about grunt-contrib-connect

[okonet]

I've following version in package.json:

...
"grunt-contrib-connect": "~0.5",
"connect": "~2.9.0",
"grunt-connect-proxy": "~0.1.6"
...

[okonet]

I've tried out and figured out that using query params in the URL is preventing the grunt-contrib-connect from injecting the LR snippet into HTML

[andineck]

I don't think this has something to do with connect-livereload. Anyway, I would first make sure to take the latest version. I just noticed that grunt-contrib-connect should be version 0.6.0.

[okonet]

I've the latest version, still doesn't work.

[vladikoff]

Hey @okonet, sorry for the slow response. I decided to look into this bug.
I have added a test to make sure the snippet is there .
See https://github.com/gruntjs/grunt-contrib-connect/blob/master/test/connect_test.js#L146

You will notice that the request is made using

 headers: {
        accept: 'text/html',
      },

without the snippet doesn't get added. I also tested this in Firefox and Chrome. Hope this helps.

[okonet]

Hey @vladikoff,

this is the headers from the request I make to my connect server:

Request URL:http://localhost:9000/?service=testscript&test=playing-a-game.json
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,de;q=0.6,ru;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:9000
If-Modified-Since:Fri, 28 Mar 2014 15:23:41 GMT
If-None-Match:"10569-1396020221000"
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36
Query String Parametersview sourceview URL encoded
service:testscript
test:playing-a-game.json
Response Headersview source
Accept-Ranges:bytes
Cache-Control:public, max-age=0
Connection:keep-alive
Date:Fri, 28 Mar 2014 15:27:19 GMT
ETag:"10569-1396020221000"
Last-Modified:Fri, 28 Mar 2014 15:23:41 GMT

I can see the text/html accept header there, but not sure if it should be the only one. The second question is: if so, how do I change this in my Gruntfile?

[vishwanatharondekar]

Adding my bits here.
Observed that liveReload snipped doesn't get included when gzip is used.
The problem always reproduces when I turn gzip on using compression https://github.com/expressjs/compression as middleware.

[andineck]

@vishwanatharondekar have you tried changing the order of the middleware so that connect-livereload is called before compression?

[vishwanatharondekar]

Well. It did work but compression stopped working.

   middleware: function (connect) {
        return [
          connect.static(appConfig.app),
          compression(),
        ];
   }

When I put the compression middleware after connect.static as mentioned in above code. liveReload appeared but compression didnt work.

Any specific reason for this behavior.

[andineck]

Uuups, yes there is a reason for this behaviour. the connect-livereload middleware rewrites res.write, res.writeHead and res.end and stores the original versions.

    var writeHead = res.writeHead;
    var write = res.write;
    var end = res.end;

When the middleware is loaded. When these functions are called at runtime connect-livereload detects if the livereload script needs to be inserted, otherwise, the "old" stored function versions will be called.

Therefore any other middleware that rewrites these functions after the connect-livereload middleware will be reverted at runtime, which is ugly and an open issue of connect-livereload. Unfortunately, I still haven't found a way to fix this.