109 lines
3.6 KiB
HTML
109 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<script src="js/signalr-client.js"></script>
|
|
<script>
|
|
function getParameterByName(name, url) {
|
|
if (!url) {
|
|
url = window.location.href;
|
|
}
|
|
name = name.replace(/[\[\]]/g, "\\$&");
|
|
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
var transports = getParameterByName('transport');
|
|
if (transports != null) {
|
|
transports = transports.split(',')
|
|
}
|
|
|
|
document.getElementById('head1').innerHTML = transports ? transports.join(', ') : "auto (WebSockets)";
|
|
|
|
let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
|
|
connection.on('Send', msg => {
|
|
addLine(msg); });
|
|
connection.connectionClosed = e => {
|
|
if (e) {
|
|
addLine('Connection closed with error: ' + e, 'red');
|
|
}
|
|
else {
|
|
addLine('Disconnected', 'green');
|
|
}
|
|
}
|
|
|
|
let isConnected = false;
|
|
let connectButton = document.getElementById('connect');
|
|
connectButton.addEventListener('click', () => {
|
|
connection.start(transports)
|
|
.then(() => {
|
|
isConnected = true;
|
|
addLine('Connected successfully', 'green');
|
|
})
|
|
.catch(err => {
|
|
addLine(err, 'red');
|
|
});
|
|
});
|
|
|
|
let disconnectButton = document.getElementById('disconnect');
|
|
disconnectButton.addEventListener('click', () => {
|
|
connection.stop();
|
|
isConnected = false;
|
|
});
|
|
|
|
document.getElementById('sendmessage').addEventListener('submit', event => {
|
|
let data = document.getElementById('data').value;
|
|
|
|
if (isConnected) {
|
|
connection.invoke('SocketsSample.Hubs.Chat.Send', data)
|
|
.then(result => {
|
|
console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
|
|
|
|
if (result != null) {
|
|
addLine(result);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
addLine(err, 'red');
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
});
|
|
});
|
|
|
|
function addLine(line, color) {
|
|
var child = document.createElement('li');
|
|
if (color) {
|
|
child.style.color = color;
|
|
}
|
|
child.innerText = line;
|
|
document.getElementById('messages').appendChild(child);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1 id="head1"></h1>
|
|
<div>
|
|
<select id="formatType">
|
|
<option value="json">json</option>
|
|
<option value="line">line</option>
|
|
</select>
|
|
|
|
<input type="button" id="connect" value="Connect" />
|
|
<input type="button" id="disconnect" value="Disconnect" />
|
|
</div>
|
|
|
|
<form id="sendmessage">
|
|
<input type="text" id="data" />
|
|
<input type="submit" value="Send" />
|
|
</form>
|
|
|
|
<ul id="messages"></ul>
|
|
</body>
|
|
</html> |