Using browserSync, the websocket connection does not initialize until after files have changed

Question

Essentially the problem is that BrowserSync isn't "syncing" until after I change a file for the first time, thus the first "refresh" doesn't come for free.

Background:

I'm setting up a very simple repository where we have a gulp process that generates static files to be served by browserSync. Gulp watches those files, and when they change causes browserSync to reload.

Even though the index page serves seemingly fine, the automatic refresh does not work until AFTER you've both changed a watched file for the first time and then refreshed the browser manually.

I've confirmed this by watching the network tab in Chrome's developer tools, and can see that on first load, there is no websocket present until I manually change a file. Then, after I refresh the browser I can see a proper websocket running. It doesn't matter how many times you refresh the page before you change a file, the websocket will simply not initialize.

I've asked in the BrowserSync slack, checked their issues and read the source code and still can't figure out why this is happening.

If needed I can update the question with the relevant parts of my various related files:

Dockerfile
docker-compose.yml
gulpfule.js

I created a screencast gif, but the whole thing is about 20mb - so I didn't upload it.

Thanks in advance for any help.

BrowserSync in terminal on first load:

Network tab on first load - no websocket:

After I change a file:

Network tab after first changed file - with websocket:

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Solved

I created a loader.html with a simple javascript that would do a pre-flight request against my local docker IP/port (3000) associated with my BrowserSync project. On the catch, I would just let it loop every 1000ms and on success, I would redirect.

This is where the problem was introduced.

I was doing the pre-flight request on the same IP/port that I was redirecting to, and for some reason the "websocket" was getting "cached" from my pre-flight check and then wouldn't re-initialize on the redirect or any subsequent refreshes.

My solution was to pre-flight check for BrowserSync's UI port which is 3001 not 3000. Once that was up, I could redirect to the IP:3000 without any problems.