Reflected client actions from a different computer

Question

I'm working on my new blog, for now the server side is NodeJS(using expressjs), I host the server on my computer.

For rapid development I'm using GulpJS.

Before I explain the weird thing. Let me say that both ports(3000 and 80 are open).

• Gulp version: 3.9.0
• NodeJS version: 0.10.35
• Browser-sync: 2.7.12

This is my index.js, I use node index.js to start the server.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.set('base', '/public');
app.get('/', function(req, res) {

    res.sendfile('index.html');

});

var server = app.listen(80, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app istening at http://%s:%s', host, port);
});

Now this is the important part from gulpfile.js I use(I removed most tasks for simplicity):

var sync = require("browser-sync").create();
gulp.task('browser-sync', function() {
    sync.init({
        proxy: "http://localhost:80",
        browser: "chrome",
        port: 3000
    });
});

So after I work a while on the my blog I decided to show it to a friend, while the NodeJS server is running and Gulp is watching over some html, js and sass files, I send my domain.ml:3000 to my friend, the domain points to my external IP and the port 3000 is due to the proxy defined via the gulpfile.js.

The weird thing I can't explain:

While my friend played with the website his actions were reflected to me, meaning we both visited domain.ml:3000 and when he clicked a link with src attribute set to #, on my side the url changed to domain.ml:3000/#, I also have a link that when clicked opens a tab(the transition is made by some js+css transitions) and again when the tab opens on his side it also opens on my side.

I'm thinking it's something with the browser-sync proxy but I can't explain nor understand this behavior, if anyone can help me figure it I'll be very thankful, have a nice day.

Answer 1

That's basically what browser-sync is meant to do. You can sync browsers to test the same app simultaneously. That will change once you make a gulp build and serve that build, instead of your 'dev version'.

Answer 2

This is the deal, browser-sync is sending the hash url via your proxy to your server (as you click links with '#') that fragment has a somewhat different treatment.

The server on port 80 is now a puppet replaying all URLS from your browser-sync session, you are both connected on browser-sync port 3000, when one of you sends in a hash change, you both receive the new location as you server on port:80 now also has the new location.