Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (79 sloc) 3.73 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TheFragebogen: websocket example</title>
<link rel="stylesheet" type="text/css" href="example.css">
<script src="../thefragebogen.js"></script>
<style>
.websocketConnecting {
background-color: gray;
width: 5em;
height: 5em;
margin: auto;
margin-bottom: 2em;
}
.websocketConnected {
background-color: yellow;
width: 5em;
height: 5em;
margin: auto;
margin-bottom: 2em;
}
.websocketReady {
background-color: green;
width: 5em;
height: 5em;
margin: auto;
margin-bottom: 2em;
}
.websocketReconnecting {
background-color: #FF00FF;
width: 5em;
height: 5em;
margin: auto;
margin-bottom: 2em;
}
</style>
<script>
var screens = [];
screens.push(new ScreenUIElements(
new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"),
new UIElementHTML(undefined, "This demo shows how to communicate via Websockets."),
new UIElementHTML(undefined, "On the next screen', a message to a WebSocket server is send."),
new UIElementHTML(undefined, "The questionnaire will be waiting until a correct reply is received ('HelloWorld', delay 2.5s)."),
new UIElementHTML(undefined, "<i>Important:</i> The websocket echo server must be running on localhost:8080."),
new UIElementHTML(undefined, "Please start the server <code>node examples/example_websockets_nodejs_server_echo.js</code>."),
new UIElementHTML(undefined, "NOTE: Server requires <code>npm install ws</code>.")
));
screens.push(new ScreenUIElements(
new UIElementHTML(undefined, "<h1>QuestionnaireItemWaitWebsocket</h1>"),
new UIElementHTML(undefined, "On connect, a message is send and reply is delayed by 2.5s."),
new UIElementHTML(undefined, "This div shows the current connection state with it's background color:"),
new UIElementHTML(undefined, "<span style='background-color: gray'>gray</span>: connecting<br><span style='background-color: yellow'>yellow</span>: connected and message send<br><span style='background-color: green'>green</span>: got expected reply<br><span style='background-color: #FF00FF'>magenta</span>: lost connection and trying to reconnect"),
new QuestionnaireItemWaitWebsocket("websocket", "ws://localhost:8080", "HelloWorld", "HelloWorld")
));
var screen = new ScreenUIElements(new UIElementHTML(undefined, "The End."));
screen.setPaginateUI(null);
screens.push(screen);
var screenController = new ScreenController(screens);
</script>
<script>
//Having the start()-function in an extra script-tag makes sure that it will be executed even if there are errors in the script-tag configuring TheFragebogen.
function start() {
document.body.innerHTML += "TheFragebogen loaded.";
if (typeof(screenController) === "undefined") {
document.body.innerHTML += "<br><i>Something went wrong:</i> Please check that thefragebogen.js was loaded and that the configuration is ok.";
return;
}
screenController.init(document.body);
screenController.start();
}
</script>
</head>
<body onload="start()">
<p>
TheFragebogen will be shown here.<br> If something fails while starting, an error message will be shown here.
</p>
</body>
</html>
You can’t perform that action at this time.