Skip to content
This repository was archived by the owner on Apr 3, 2020. It is now read-only.

Commit 23aa7db

Browse files
hach-quehach-que
committed
Rework demo website
1 parent eaf4ad8 commit 23aa7db

File tree

4 files changed

+255
-80
lines changed

4 files changed

+255
-80
lines changed

‎netcode.io.demoserver/Program.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,18 @@ public static string SendResponse(HttpListenerRequest request, HttpListenerRespo
159159
}
160160
}
161161

162+
if (request.Url.AbsolutePath == "/basic")
163+
{
164+
response.ContentType = "text/html";
165+
166+
var asmPath = Assembly.GetExecutingAssembly().Location;
167+
var indexPath = Path.Combine(new FileInfo(asmPath).DirectoryName, "basic.htm");
168+
using (var reader = new StreamReader(indexPath))
169+
{
170+
return reader.ReadToEnd().Replace("__PROTOCOL__", isServerIpv4 ? "ipv4" : "ipv6");
171+
}
172+
}
173+
162174
if (request.Url.AbsolutePath == "/token")
163175
{
164176
response.ContentType = "text/plain";

‎netcode.io.demoserver/basic.htm‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>netcode.io from browser test!</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd" />
8+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
10+
<script type="text/javascript">
11+
function b64ToBuffer(b64) {
12+
var raw = window.atob(b64);
13+
var rawLength = raw.length;
14+
var array = new Uint8Array(new ArrayBuffer(rawLength));
15+
16+
for (i = 0; i < rawLength; i++) {
17+
array[i] = raw.charCodeAt(i);
18+
}
19+
return array;
20+
}
21+
22+
function str2ab(str) {
23+
var bufView = new Uint8Array(str.length);
24+
for (var i = 0, strLen = str.length; i < strLen; i++) {
25+
bufView[i] = str.charCodeAt(i);
26+
}
27+
return bufView;
28+
}
29+
30+
function ab2str(buf) {
31+
return new TextDecoder("ascii").decode(buf);
32+
}
33+
34+
var packetsSentCount = 0;
35+
var lastState = '';
36+
37+
function updateConnectionState(client) {
38+
client.getClientState(function (err, state) {
39+
if (err) {
40+
console.error(err);
41+
$("#netcode_client").text(err.toString());
42+
return;
43+
}
44+
45+
lastState = state;
46+
$("#netcode_connection").text(state);
47+
window.setTimeout(function () { updateConnectionState(client); }, 100);
48+
});
49+
}
50+
51+
$(function () {
52+
window.setTimeout(function() {
53+
if (window.netcode) {
54+
$("#netcode_presence").html("Checking native helper...");
55+
56+
window.netcode.isNativeHelperInstalled(function(err, isInstalled) {
57+
if (!isInstalled) {
58+
$("#netcode_presence").html("<b>Missing Helper</b> (<a href=\"https://github.com/RedpointGames/netcode.io-browser/releases/tag/latest\" target=\"_blank\">install the native helper</a>, reload page after install)");
59+
return;
60+
}
61+
62+
$("#netcode_presence").html("<b>Available!</b>");
63+
64+
$("#netcode_client").text("Creating...");
65+
window.netcode.createClient('__PROTOCOL__', function (err, client) {
66+
if (err) {
67+
console.error(err);
68+
$("#netcode_client").text(err.toString());
69+
return;
70+
}
71+
client.addEventListener("receive", function (clientId, buffer) {
72+
$("#packet_received").text(ab2str(buffer));
73+
});
74+
window.setTimeout(function () { updateConnectionState(client); }, 100);
75+
$("#netcode_client").text("Created, obtaining token...");
76+
$.get("/token", function (token) {
77+
$("#netcode_client").text("Obtained token, connecting...");
78+
var tokenBuffer = b64ToBuffer(token);
79+
client.connect(tokenBuffer, function (err) {
80+
if (err) {
81+
console.error(err);
82+
$("#netcode_client").text(err.toString());
83+
return;
84+
}
85+
86+
$("#netcode_client").text("Connected!");
87+
88+
window.setInterval(function () {
89+
if (lastState == 'connected') {
90+
var buf = str2ab("pkt " + packetsSentCount + "! " + (new Date().toUTCString()));
91+
packetsSentCount++;
92+
$("#packets_sent_count").text(packetsSentCount);
93+
client.send(buf, function () {
94+
// Do nothing
95+
});
96+
}
97+
}, 32);
98+
});
99+
});
100+
});
101+
});
102+
} else {
103+
$("#netcode_presence").html("<b>Not Installed</b> (");
104+
105+
if (chrome && chrome.webstore && chrome.webstore.install && chrome.app) {
106+
if (!chrome.app.isInstalled) {
107+
var presence = $("#netcode_presence");
108+
presence.append(
109+
$("<a></a>")
110+
.attr("href", "https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd")
111+
.attr("target", "_blank")
112+
.click(function(e) {
113+
chrome.webstore.install(
114+
"https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd",
115+
function() {
116+
// Reload after install.
117+
location.reload();
118+
},
119+
function() {
120+
e.preventDefault();
121+
});
122+
})
123+
.text("install the extension for your browser"));
124+
presence.append(", reload page after install)");
125+
}
126+
}
127+
}
128+
}, 500);
129+
});
130+
</script>
131+
</head>
132+
<body>
133+
<nav class="navbar navbar-default navbar-static-top">
134+
<div class="container">
135+
<div class="navbar-header">
136+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
137+
<span class="sr-only">Toggle navigation</span>
138+
<span class="icon-bar"></span>
139+
<span class="icon-bar"></span>
140+
<span class="icon-bar"></span>
141+
</button>
142+
<a class="navbar-brand" href="#">netcode.io</a>
143+
</div>
144+
<div id="navbar" class="navbar-collapse collapse">
145+
<ul class="nav navbar-nav">
146+
<li><a href="/">Home</a></li>
147+
<li class="active"><a href="/basic">Basic Test</a></li>
148+
</ul>
149+
</div>
150+
</div>
151+
</nav>
152+
<div class="container">
153+
<div class="row">
154+
<p>
155+
This page tests netcode.io support in your browser.
156+
</p>
157+
<p>
158+
Status of <code>window.netcode</code>: <span id="netcode_presence">...</span>
159+
</p>
160+
<p>
161+
Status of netcode client: <span id="netcode_client">...</span>
162+
</p>
163+
<p>
164+
Status of netcode connection: <span id="netcode_connection">...</span>
165+
</p>
166+
<p>
167+
Packets sent to server: <span id="packets_sent_count">...</span>
168+
</p>
169+
<p>
170+
Last packet received from server: <span id="packet_received">...</span>
171+
</p>
172+
</div>
173+
</div>
174+
</body>
175+
</html>

‎netcode.io.demoserver/index.htm‎

Lines changed: 65 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>netcode.io from browser test!</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
67
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd" />
78
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
810
<script type="text/javascript">
911
function b64ToBuffer(b64) {
1012
var raw = window.atob(b64);
@@ -49,77 +51,51 @@
4951
$(function () {
5052
window.setTimeout(function() {
5153
if (window.netcode) {
52-
$("#netcode_presence").html("Checking native helper...");
53-
5454
window.netcode.isNativeHelperInstalled(function(err, isInstalled) {
5555
if (!isInstalled) {
56-
$("#netcode_presence").html("<b>Missing Helper</b> (<a href=\"https://github.com/RedpointGames/netcode.io-browser/releases/tag/latest\" target=\"_blank\">install the native helper</a>, reload page after install)");
56+
$("#info").html(
57+
"<h1>Missing helper</h1>" +
58+
"<p>To complete the setup of netcode.io support, you need to " +
59+
"install the netcode helper. Click the button below to view the " +
60+
"releases page, where you can download the latest netcode helper " +
61+
"for your system.</p>" +
62+
"<p><a class=\"btn btn-lg btn-primary\" " +
63+
"href=\"https://github.com/RedpointGames/netcode.io-browser/releases/tag/latest\" " +
64+
"target=\"_blank\" role=\"button\">Download helper &raquo;</a>");
5765
return;
5866
}
5967

60-
$("#netcode_presence").html("<b>Available!</b>");
61-
62-
$("#netcode_client").text("Creating...");
63-
window.netcode.createClient('__PROTOCOL__', function (err, client) {
64-
if (err) {
65-
console.error(err);
66-
$("#netcode_client").text(err.toString());
67-
return;
68-
}
69-
client.addEventListener("receive", function (clientId, buffer) {
70-
$("#packet_received").text(ab2str(buffer));
71-
});
72-
window.setTimeout(function () { updateConnectionState(client); }, 100);
73-
$("#netcode_client").text("Created, obtaining token...");
74-
$.get("/token", function (token) {
75-
$("#netcode_client").text("Obtained token, connecting...");
76-
var tokenBuffer = b64ToBuffer(token);
77-
client.connect(tokenBuffer, function (err) {
78-
if (err) {
79-
console.error(err);
80-
$("#netcode_client").text(err.toString());
81-
return;
82-
}
83-
84-
$("#netcode_client").text("Connected!");
85-
86-
window.setInterval(function () {
87-
if (lastState == 'connected') {
88-
var buf = str2ab("pkt " + packetsSentCount + "! " + (new Date().toUTCString()));
89-
packetsSentCount++;
90-
$("#packets_sent_count").text(packetsSentCount);
91-
client.send(buf, function () {
92-
// Do nothing
93-
});
94-
}
95-
}, 32);
96-
});
97-
});
98-
});
68+
$("#info").html(
69+
"<h1>Congradulations!</h1>" +
70+
"<p>Your browser supports netcode.io, a better way to experience " +
71+
"multiplayer games on the web. To see netcode.io in action, try the " +
72+
"basic test on this website.</p> " +
73+
"<p><a class=\"btn btn-lg btn-success\" " +
74+
"href=\"/basic\" role=\"button\">Try demo &raquo;</a>");
9975
});
10076
} else {
101-
$("#netcode_presence").html("<b>Not Installed</b> (");
102-
77+
$("#info").html(
78+
"<h1>Missing extension</h1>" +
79+
"<p>To add support for netcode.io in your browser, you first need " +
80+
"to install the netcode.io extension.</p>" +
81+
"<p><a id=\"ext_install\" class=\"btn btn-lg btn-primary\" " +
82+
"href=\"https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd\" " +
83+
"target=\"_blank\" role=\"button\">Install extension &raquo;</a>");
84+
10385
if (chrome && chrome.webstore && chrome.webstore.install && chrome.app) {
10486
if (!chrome.app.isInstalled) {
105-
var presence = $("#netcode_presence");
106-
presence.append(
107-
$("<a></a>")
108-
.attr("href", "https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd")
109-
.attr("target", "_blank")
110-
.click(function(e) {
111-
chrome.webstore.install(
112-
"https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd",
113-
function() {
114-
// Reload after install.
115-
location.reload();
116-
},
117-
function() {
118-
e.preventDefault();
119-
});
120-
})
121-
.text("install the extension for your browser"));
122-
presence.append(", reload page after install)");
87+
var ext_install = $("#ext_install");
88+
ext_install.click(function (e) {
89+
chrome.webstore.install(
90+
"https://chrome.google.com/webstore/detail/hpecmifakhimhidjpcpjmihpacijicbd",
91+
function () {
92+
// Reload after install.
93+
location.reload();
94+
},
95+
function () {
96+
e.preventDefault();
97+
});
98+
});
12399
}
124100
}
125101
}
@@ -128,23 +104,32 @@
128104
</script>
129105
</head>
130106
<body>
131-
<p>
132-
This page tests netcode.io support in your browser.
133-
</p>
134-
<p>
135-
Status of <code>window.netcode</code>: <span id="netcode_presence">...</span>
136-
</p>
137-
<p>
138-
Status of netcode client: <span id="netcode_client">...</span>
139-
</p>
140-
<p>
141-
Status of netcode connection: <span id="netcode_connection">...</span>
142-
</p>
143-
<p>
144-
Packets sent to server: <span id="packets_sent_count">...</span>
145-
</p>
146-
<p>
147-
Last packet received from server: <span id="packet_received">...</span>
148-
</p>
107+
<nav class="navbar navbar-default navbar-static-top">
108+
<div class="container">
109+
<div class="navbar-header">
110+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
111+
<span class="sr-only">Toggle navigation</span>
112+
<span class="icon-bar"></span>
113+
<span class="icon-bar"></span>
114+
<span class="icon-bar"></span>
115+
</button>
116+
<a class="navbar-brand" href="#">netcode.io</a>
117+
</div>
118+
<div id="navbar" class="navbar-collapse collapse">
119+
<ul class="nav navbar-nav">
120+
<li class="active"><a href="/">Home</a></li>
121+
<li><a href="/basic">Basic Test</a></li>
122+
</ul>
123+
</div>
124+
</div>
125+
</nav>
126+
<div class="container">
127+
<div class="jumbotron" id="info">
128+
<h1>Hold on...</h1>
129+
<p>
130+
We're checking to see if your browser supports netcode.io...
131+
</p>
132+
</div>
133+
</div>
149134
</body>
150135
</html>

‎netcode.io.demoserver/netcode.io.demoserver.csproj‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@
5959
<None Include="packages.config" />
6060
</ItemGroup>
6161
<ItemGroup>
62+
<Content Include="basic.htm">
63+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
64+
</Content>
6265
<Content Include="index.htm">
6366
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
6467
</Content>

0 commit comments

Comments
 (0)