Skip to content

Commit

Permalink
Merge pull request #302 from CodeYellowBV/sockjs
Browse files Browse the repository at this point in the history 
Replace socket.io with SockJS as discussed in #229
  • Loading branch information
@sokra
sokra committed Nov 24, 2015
2 parents 24b356e + 0ac3e15 commit 68242b3
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 139 deletions.
121 changes: 65 additions & 56 deletions client/index.js
View file
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
141 changes: 79 additions & 62 deletions client/live.js
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,100 @@
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');

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

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

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

0 comments on commit 68242b3

Please sign in to comment.