Skip to content

Commit 68242b3

Browse files
sokrasokra
committed
Merge pull request #302 from CodeYellowBV/sockjs
Replace socket.io with SockJS as discussed in #229
2 parents 24b356e + 0ac3e15 commit 68242b3

File tree

4 files changed

+193
-139
lines changed

4 files changed

+193
-139
lines changed

‎client/index.js

Lines changed: 65 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var url = require('url');
2-
var io = require("socket.io-client");
2+
var SockJS = require("sockjs-client");
33
var stripAnsi = require('strip-ansi');
44
var scriptElements = document.getElementsByTagName("script");
55

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

11-
io = io.connect(
12-
url.format({
13-
protocol: urlParts.protocol,
14-
auth: urlParts.auth,
15-
hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
16-
port: urlParts.port
17-
}), {
18-
path: urlParts.path === '/' ? null : urlParts.path
19-
}
20-
);
21-
11+
var sock = null;
2212
var hot = false;
2313
var initial = true;
2414
var currentHash = "";
2515

26-
io.on("hot", function() {
27-
hot = true;
28-
console.log("[WDS] Hot Module Replacement enabled.");
29-
});
30-
31-
io.on("invalid", function() {
32-
console.log("[WDS] App updated. Recompiling...");
33-
});
34-
35-
io.on("hash", function(hash) {
36-
currentHash = hash;
37-
});
38-
39-
io.on("still-ok", function() {
40-
console.log("[WDS] Nothing changed.")
41-
});
16+
var onSocketMsg = {
17+
hot: function() {
18+
hot = true;
19+
console.log("[WDS] Hot Module Replacement enabled.");
20+
},
21+
invalid: function() {
22+
console.log("[WDS] App updated. Recompiling...");
23+
},
24+
hash: function(hash) {
25+
currentHash = hash;
26+
},
27+
"still-ok": function() {
28+
console.log("[WDS] Nothing changed.")
29+
},
30+
ok: function() {
31+
if(initial) return initial = false;
32+
reloadApp();
33+
},
34+
warnings: function(warnings) {
35+
console.log("[WDS] Warnings while compiling.");
36+
for(var i = 0; i < warnings.length; i++)
37+
console.warn(stripAnsi(warnings[i]));
38+
if(initial) return initial = false;
39+
reloadApp();
40+
},
41+
errors: function(errors) {
42+
console.log("[WDS] Errors while compiling.");
43+
for(var i = 0; i < errors.length; i++)
44+
console.error(stripAnsi(errors[i]));
45+
if(initial) return initial = false;
46+
reloadApp();
47+
},
48+
"proxy-error": function(errors) {
49+
console.log("[WDS] Proxy error.");
50+
for(var i = 0; i < errors.length; i++)
51+
console.error(stripAnsi(errors[i]));
52+
if(initial) return initial = false;
53+
reloadApp();
54+
}
55+
};
4256

43-
io.on("ok", function() {
44-
if(initial) return initial = false;
45-
reloadApp();
46-
});
57+
var newConnection = function() {
58+
sock = new SockJS(url.format({
59+
protocol: urlParts.protocol,
60+
auth: urlParts.auth,
61+
hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
62+
port: urlParts.port,
63+
pathname: urlParts.path === '/' ? "/sockjs-node" : urlParts.path
64+
}));
4765

48-
io.on("warnings", function(warnings) {
49-
console.log("[WDS] Warnings while compiling.");
50-
for(var i = 0; i < warnings.length; i++)
51-
console.warn(stripAnsi(warnings[i]));
52-
if(initial) return initial = false;
53-
reloadApp();
54-
});
66+
sock.onclose = function() {
67+
console.error("[WDS] Disconnected!");
5568

56-
io.on("errors", function(errors) {
57-
console.log("[WDS] Errors while compiling.");
58-
for(var i = 0; i < errors.length; i++)
59-
console.error(stripAnsi(errors[i]));
60-
if(initial) return initial = false;
61-
reloadApp();
62-
});
69+
// Try to reconnect.
70+
sock = null;
71+
setTimeout(function () {
72+
newConnection();
73+
}, 2000);
74+
};
6375

64-
io.on("proxy-error", function(errors) {
65-
console.log("[WDS] Proxy error.");
66-
for(var i = 0; i < errors.length; i++)
67-
console.error(stripAnsi(errors[i]));
68-
if(initial) return initial = false;
69-
reloadApp();
70-
});
76+
sock.onmessage = function(e) {
77+
// This assumes that all data sent via the websocket is JSON.
78+
var msg = JSON.parse(e.data);
79+
onSocketMsg[msg.type](msg.data);
80+
};
81+
};
7182

72-
io.on("disconnect", function() {
73-
console.error("[WDS] Disconnected!");
74-
});
83+
newConnection();
7584

7685
function reloadApp() {
7786
if(hot) {

‎client/live.js

Lines changed: 79 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,100 @@
11
var $ = require("jquery");
2-
var io = require("socket.io-client");
2+
var SockJS = require("sockjs-client");
33
var stripAnsi = require('strip-ansi');
44
require("./style.css");
55

6+
var sock = null;
7+
var hot = false;
8+
var currentHash = "";
9+
10+
var newConnection = function(handlers) {
11+
sock = new SockJS('/sockjs-node');
12+
13+
sock.onclose = function() {
14+
handlers.close();
15+
16+
// Try to reconnect.
17+
sock = null;
18+
setTimeout(function () {
19+
newConnection(handlers);
20+
}, 2000);
21+
};
22+
23+
sock.onmessage = function(e) {
24+
// This assumes that all data sent via the websocket is JSON.
25+
var msg = JSON.parse(e.data);
26+
handlers[msg.type](msg.data);
27+
};
28+
};
29+
630
$(function() {
731
var body = $("body").html(require("./page.jade")());
832
var status = $("#status");
933
var okness = $("#okness");
1034
var $errors = $("#errors");
1135
var iframe = $("#iframe");
1236
var header = $(".header");
13-
var hot = false;
14-
var currentHash = "";
1537

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

18-
status.text("Connecting to socket.io server...");
40+
status.text("Connecting to sockjs server...");
1941
$errors.hide(); iframe.hide();
2042
header.css({borderColor: "#96b5b4"});
21-
io = io.connect();
22-
23-
io.on("hot", function() {
24-
hot = true;
25-
iframe.attr("src", contentPage + window.location.hash);
26-
});
2743

28-
io.on("invalid", function() {
29-
okness.text("");
30-
status.text("App updated. Recompiling...");
31-
header.css({borderColor: "#96b5b4"});
32-
$errors.hide(); if(!hot) iframe.hide();
33-
});
34-
35-
io.on("hash", function(hash) {
36-
currentHash = hash;
37-
});
38-
39-
io.on("still-ok", function() {
40-
okness.text("");
41-
status.text("App ready.");
42-
header.css({borderColor: ""});
43-
$errors.hide(); if(!hot) iframe.show();
44-
});
45-
46-
io.on("ok", function() {
47-
okness.text("");
48-
$errors.hide();
49-
reloadApp();
50-
});
51-
52-
io.on("warnings", function(warnings) {
53-
okness.text("Warnings while compiling.");
54-
$errors.hide();
55-
reloadApp();
56-
});
57-
58-
io.on("errors", function(errors) {
59-
status.text("App updated with errors. No reload!");
60-
okness.text("Errors while compiling.");
61-
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
62-
header.css({borderColor: "#ebcb8b"});
63-
$errors.show(); iframe.hide();
64-
});
65-
66-
io.on("proxy-error", function(errors) {
67-
status.text("Could not proxy to content base target!");
68-
okness.text("Proxy error.");
69-
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
70-
header.css({borderColor: "#ebcb8b"});
71-
$errors.show(); iframe.hide();
72-
});
44+
var onSocketMsg = {
45+
hot: function() {
46+
hot = true;
47+
iframe.attr("src", contentPage + window.location.hash);
48+
},
49+
invalid: function() {
50+
okness.text("");
51+
status.text("App updated. Recompiling...");
52+
header.css({borderColor: "#96b5b4"});
53+
$errors.hide(); if(!hot) iframe.hide();
54+
},
55+
hash: function(hash) {
56+
currentHash = hash;
57+
},
58+
"still-ok": function() {
59+
okness.text("");
60+
status.text("App ready.");
61+
header.css({borderColor: ""});
62+
$errors.hide(); if(!hot) iframe.show();
63+
},
64+
ok: function() {
65+
okness.text("");
66+
$errors.hide();
67+
reloadApp();
68+
},
69+
warnings: function(warnings) {
70+
okness.text("Warnings while compiling.");
71+
$errors.hide();
72+
reloadApp();
73+
},
74+
errors: function(errors) {
75+
status.text("App updated with errors. No reload!");
76+
okness.text("Errors while compiling.");
77+
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
78+
header.css({borderColor: "#ebcb8b"});
79+
$errors.show(); iframe.hide();
80+
},
81+
"proxy-error": function(errors) {
82+
status.text("Could not proxy to content base target!");
83+
okness.text("Proxy error.");
84+
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
85+
header.css({borderColor: "#ebcb8b"});
86+
$errors.show(); iframe.hide();
87+
},
88+
close: function() {
89+
status.text("");
90+
okness.text("Disconnected.");
91+
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
92+
header.css({borderColor: "#ebcb8b"});
93+
$errors.show(); iframe.hide();
94+
}
95+
};
7396

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

8299
iframe.load(function() {
83100
status.text("App ready.");

0 commit comments

Comments
 (0)