106 lines
3.8 KiB
HTML
106 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<h1 id="transportName">Unknown Transport</h1>
|
|
|
|
<h2>Controls</h2>
|
|
<div>
|
|
<button id="connectButton" type="button">Connect</button>
|
|
<button id="disconnectButton" type="button" disabled>Disconnect</button>
|
|
<button id="clearButton" type="button">Clear</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button id="observableButton" name="observable" type="button" disabled>From Observable</button>
|
|
<button id="channelButton" name="channel" type="button" disabled>From Channel</button>
|
|
</div>
|
|
|
|
<h2>Results</h2>
|
|
<ul id="resultsList"></ul>
|
|
|
|
<ul id="messages"></ul>
|
|
<script src="lib/signalr-client/signalr-client.js"></script>
|
|
<script src="utils.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
let resultsList = document.getElementById('resultsList');
|
|
let channelButton = document.getElementById('channelButton');
|
|
let observableButton = document.getElementById('observableButton');
|
|
let clearButton = document.getElementById('clearButton');
|
|
|
|
let connectButton = document.getElementById('connectButton');
|
|
let disconnectButton = document.getElementById('disconnectButton');
|
|
|
|
let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
|
|
|
|
let invocationCounter = 0;
|
|
|
|
document.getElementById('transportName').innerHTML = signalR.TransportType[transportType];
|
|
|
|
let url = `http://${document.location.host}/streaming`
|
|
let connection = null;
|
|
|
|
click('clearButton', function () {
|
|
resultsList.innerHTML = '';
|
|
});
|
|
|
|
click('disconnectButton', function () {
|
|
connection.stop();
|
|
});
|
|
|
|
click('connectButton', function () {
|
|
connection = new signalR.HubConnection(url, 'formatType=json&format=text');
|
|
|
|
connection.onClosed = function () {
|
|
channelButton.disabled = true;
|
|
observableButton.disabled = true;
|
|
connectButton.disabled = false;
|
|
disconnectButton.disabled = true;
|
|
|
|
addLine('resultsList', 'disconnected', 'green');
|
|
};
|
|
|
|
connection.start(transportType)
|
|
.then(function () {
|
|
channelButton.disabled = false;
|
|
observableButton.disabled = false;
|
|
connectButton.disabled = true;
|
|
disconnectButton.disabled = false;
|
|
addLine('resultsList', 'connected', 'green');
|
|
});
|
|
});
|
|
|
|
click('observableButton', function () {
|
|
run('ObservableCounter')
|
|
});
|
|
|
|
click('channelButton', function () {
|
|
run('ChannelCounter')
|
|
});
|
|
|
|
function run(method) {
|
|
let id = invocationCounter;
|
|
invocationCounter += 1;
|
|
addLine('resultsList', `running ${method}(${id}) ...`);
|
|
connection.stream(method, 10, (Math.random() * 5) * 200).subscribe({
|
|
closed: false,
|
|
next: function (item) {
|
|
addLine('resultsList', `${method}(${id}): ${item}`);
|
|
},
|
|
error: function (err) {
|
|
addLine('resultsList', `${method}(${id}): ${err}`, 'red');
|
|
},
|
|
complete: function () {
|
|
addLine('resultsList', `${method}(${id}): complete`, 'green');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|