Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace socket.io with SockJS as discussed in #229 #302

Merged
merged 7 commits into from
Nov 24, 2015
Merged

Replace socket.io with SockJS as discussed in #229 #302

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7dcd41d
Replace socket.io with SockJS as discussed in #229
SpaceK33z Oct 24, 2015
1bc9212
Use timeout instead of interval for reconnecting socket.
SpaceK33z Oct 24, 2015
67ff2d5
Add socket handlers.
SpaceK33z Oct 24, 2015
a5ddf82
Prevent emitting socket event when socket is not ready yet.
SpaceK33z Nov 5, 2015
75bca73
Use prototype for the sockWrite function.
SpaceK33z Nov 18, 2015
2dd3058
Allow multiple socket connections.
SpaceK33z Nov 20, 2015
0ac3e15
Remove unnecessary onopen callback.
SpaceK33z Nov 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 65 additions & 56 deletions client/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var url = require('url');
var io = require("socket.io-client");
var SockJS = require("sockjs-client");
var stripAnsi = require('strip-ansi');
var scriptElements = document.getElementsByTagName("script");

Expand All @@ -8,70 +8,79 @@ var urlParts = url.parse(typeof __resourceQuery === "string" && __resourceQuery
scriptElements[scriptElements.length-1].getAttribute("src").replace(/\/[^\/]+$/, "")
);

io = io.connect(
url.format({
protocol: urlParts.protocol,
auth: urlParts.auth,
hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
port: urlParts.port
}), {
path: urlParts.path === '/' ? null : urlParts.path
}
);

var sock = null;
var hot = false;
var initial = true;
var currentHash = "";

io.on("hot", function() {
hot = true;
console.log("[WDS] Hot Module Replacement enabled.");
});

io.on("invalid", function() {
console.log("[WDS] App updated. Recompiling...");
});

io.on("hash", function(hash) {
currentHash = hash;
});

io.on("still-ok", function() {
console.log("[WDS] Nothing changed.")
});
var onSocketMsg = {
hot: function() {
hot = true;
console.log("[WDS] Hot Module Replacement enabled.");
},
invalid: function() {
console.log("[WDS] App updated. Recompiling...");
},
hash: function(hash) {
currentHash = hash;
},
"still-ok": function() {
console.log("[WDS] Nothing changed.")
},
ok: function() {
if(initial) return initial = false;
reloadApp();
},
warnings: function(warnings) {
console.log("[WDS] Warnings while compiling.");
for(var i = 0; i < warnings.length; i++)
console.warn(stripAnsi(warnings[i]));
if(initial) return initial = false;
reloadApp();
},
errors: function(errors) {
console.log("[WDS] Errors while compiling.");
for(var i = 0; i < errors.length; i++)
console.error(stripAnsi(errors[i]));
if(initial) return initial = false;
reloadApp();
},
"proxy-error": function(errors) {
console.log("[WDS] Proxy error.");
for(var i = 0; i < errors.length; i++)
console.error(stripAnsi(errors[i]));
if(initial) return initial = false;
reloadApp();
}
};

io.on("ok", function() {
if(initial) return initial = false;
reloadApp();
});
var newConnection = function() {
sock = new SockJS(url.format({
protocol: urlParts.protocol,
auth: urlParts.auth,
hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
port: urlParts.port,
pathname: urlParts.path === '/' ? "/sockjs-node" : urlParts.path
}));

io.on("warnings", function(warnings) {
console.log("[WDS] Warnings while compiling.");
for(var i = 0; i < warnings.length; i++)
console.warn(stripAnsi(warnings[i]));
if(initial) return initial = false;
reloadApp();
});
sock.onclose = function() {
console.error("[WDS] Disconnected!");

io.on("errors", function(errors) {
console.log("[WDS] Errors while compiling.");
for(var i = 0; i < errors.length; i++)
console.error(stripAnsi(errors[i]));
if(initial) return initial = false;
reloadApp();
});
// Try to reconnect.
sock = null;
setTimeout(function () {
newConnection();
}, 2000);
};

io.on("proxy-error", function(errors) {
console.log("[WDS] Proxy error.");
for(var i = 0; i < errors.length; i++)
console.error(stripAnsi(errors[i]));
if(initial) return initial = false;
reloadApp();
});
sock.onmessage = function(e) {
// This assumes that all data sent via the websocket is JSON.
var msg = JSON.parse(e.data);
onSocketMsg[msg.type](msg.data);
};
};

io.on("disconnect", function() {
console.error("[WDS] Disconnected!");
});
newConnection();

function reloadApp() {
if(hot) {
Expand Down
146 changes: 84 additions & 62 deletions client/live.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,105 @@
var $ = require("jquery");
var io = require("socket.io-client");
var SockJS = require("sockjs-client");
var stripAnsi = require('strip-ansi');
require("./style.css");

var sock = null;
var hot = false;
var currentHash = "";

var newConnection = function(handlers) {
sock = new SockJS('/sockjs-node');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wanted to flag that this breaks certain usage that relied on the previous /socket.io path. They now have to be /sockjs-node. Should this have been a major version bump, according to semver?


sock.onclose = function() {
handlers.close();

// Try to reconnect.
sock = null;
setTimeout(function () {
newConnection(handlers);
}, 2000);
};

sock.onopen = function() {
// This callback also fires on a reconnect.
handlers.ok();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does a connect fires an ok? This should come from the server.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On a normal open ok comes from the server. However, when the socket gets disconnected and reconnected again, it does not fire an ok. So the only way I found to work around this is to call the ok function when the socket connection is opened.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reconnected again, it does not fire an ok

Why not? On the server it sendStats on connection. Doesn't that work?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I had a bug in lib/Server.js. I have deleted these lines now :).

};

sock.onmessage = function(e) {
// This assumes that all data sent via the websocket is JSON.
var msg = JSON.parse(e.data);
handlers[msg.type](msg.data);
};
};

$(function() {
var body = $("body").html(require("./page.jade")());
var status = $("#status");
var okness = $("#okness");
var $errors = $("#errors");
var iframe = $("#iframe");
var header = $(".header");
var hot = false;
var currentHash = "";

var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;

status.text("Connecting to socket.io server...");
status.text("Connecting to sockjs server...");
$errors.hide(); iframe.hide();
header.css({borderColor: "#96b5b4"});
io = io.connect();

io.on("hot", function() {
hot = true;
iframe.attr("src", contentPage + window.location.hash);
});

io.on("invalid", function() {
okness.text("");
status.text("App updated. Recompiling...");
header.css({borderColor: "#96b5b4"});
$errors.hide(); if(!hot) iframe.hide();
});

io.on("hash", function(hash) {
currentHash = hash;
});

io.on("still-ok", function() {
okness.text("");
status.text("App ready.");
header.css({borderColor: ""});
$errors.hide(); if(!hot) iframe.show();
});

io.on("ok", function() {
okness.text("");
$errors.hide();
reloadApp();
});

io.on("warnings", function(warnings) {
okness.text("Warnings while compiling.");
$errors.hide();
reloadApp();
});

io.on("errors", function(errors) {
status.text("App updated with errors. No reload!");
okness.text("Errors while compiling.");
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
});

io.on("proxy-error", function(errors) {
status.text("Could not proxy to content base target!");
okness.text("Proxy error.");
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
});
var onSocketMsg = {
hot: function() {
hot = true;
iframe.attr("src", contentPage + window.location.hash);
},
invalid: function() {
okness.text("");
status.text("App updated. Recompiling...");
header.css({borderColor: "#96b5b4"});
$errors.hide(); if(!hot) iframe.hide();
},
hash: function(hash) {
currentHash = hash;
},
"still-ok": function() {
okness.text("");
status.text("App ready.");
header.css({borderColor: ""});
$errors.hide(); if(!hot) iframe.show();
},
ok: function() {
okness.text("");
$errors.hide();
reloadApp();
},
warnings: function(warnings) {
okness.text("Warnings while compiling.");
$errors.hide();
reloadApp();
},
errors: function(errors) {
status.text("App updated with errors. No reload!");
okness.text("Errors while compiling.");
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
},
"proxy-error": function(errors) {
status.text("Could not proxy to content base target!");
okness.text("Proxy error.");
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
},
close: function() {
status.text("");
okness.text("Disconnected.");
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
}
};

io.on("disconnect", function() {
status.text("");
okness.text("Disconnected.");
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
header.css({borderColor: "#ebcb8b"});
$errors.show(); iframe.hide();
});
newConnection(onSocketMsg);

iframe.load(function() {
status.text("App ready.");
Expand Down
Loading