143 lines
4.3 KiB
HTML
143 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
</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>
|
|
|
|
|
|
<h4>To Everybody</h4>
|
|
<form class="form-inline">
|
|
<div class="input-append">
|
|
<input type="text" id="message-text" placeholder="Type a message, name or group" />
|
|
<input type="button" id="broadcast" class="btn" value="Broadcast" />
|
|
<input type="button" id="broadcast-exceptme" class="btn" value="Broadcast (All Except Me)" />
|
|
<input type="button" id="join" class="btn" value="Enter Name" />
|
|
<input type="button" id="join-group" class="btn" value="Join Group" />
|
|
<input type="button" id="leave-group" class="btn" value="Leave Group" />
|
|
</div>
|
|
</form>
|
|
|
|
<h4>To Me</h4>
|
|
<form class="form-inline">
|
|
<div class="input-append">
|
|
<input type="text" id="me-message-text" placeholder="Type a message" />
|
|
<input type="button" id="send" class="btn" value="Send to me" />
|
|
</div>
|
|
</form>
|
|
|
|
<h4>Private Message</h4>
|
|
<form class="form-inline">
|
|
<div class="input-prepend input-append">
|
|
<input type="text" name="private-message" id="private-message-text" placeholder="Type a message" />
|
|
<input type="text" name="user" id="target" placeholder="Type a user or group name" />
|
|
|
|
<input type="button" id="privatemsg" class="btn" value="Send to user" />
|
|
<input type="button" id="groupmsg" class="btn" value="Send to group" />
|
|
</div>
|
|
</form>
|
|
|
|
<ul id="message-list"></ul>
|
|
</body>
|
|
</html>
|
|
<script src="lib/signalr-client/signalr-client.js"></script>
|
|
<script src="utils.js"></script>
|
|
<script>
|
|
var isConnected = false;
|
|
function invoke(connection, method, ...args) {
|
|
if (!isConnected) {
|
|
return;
|
|
}
|
|
var argsArray = Array.prototype.slice.call(arguments);
|
|
connection.invoke.apply(connection, argsArray.slice(1))
|
|
.then(result => {
|
|
console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
|
|
|
|
if (result) {
|
|
addLine('message-list', result);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
addLine('message-list', err, 'red');
|
|
});
|
|
}
|
|
|
|
function getText(id) {
|
|
return document.getElementById(id).value;
|
|
}
|
|
|
|
let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
|
|
|
|
document.getElementById('head1').innerHTML = signalR.TransportType[transportType];
|
|
|
|
let connection = new signalR.HubConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
|
|
connection.on('Send', msg => {
|
|
addLine('message-list', msg);
|
|
});
|
|
|
|
connection.onClosed = e => {
|
|
if (e) {
|
|
addLine('message-list', 'Connection closed with error: ' + e, 'red');
|
|
}
|
|
else {
|
|
addLine('message-list', 'Disconnected', 'green');
|
|
}
|
|
}
|
|
|
|
click('connect', event => {
|
|
connection.start(transportType)
|
|
.then(() => {
|
|
isConnected = true;
|
|
addLine('message-list', 'Connected successfully', 'green');
|
|
})
|
|
.catch(err => {
|
|
addLine('message-list', err, 'red');
|
|
});
|
|
});
|
|
|
|
click('disconnect', event => {
|
|
connection.stop()
|
|
.then(() => {
|
|
isConnected = false;
|
|
});
|
|
});
|
|
|
|
click('broadcast', event => {
|
|
let data = getText('message-text');
|
|
invoke(connection, 'Send', data);
|
|
});
|
|
|
|
click('join-group', event => {
|
|
let groupName = getText('message-text');
|
|
invoke(connection, 'JoinGroup', groupName);
|
|
});
|
|
|
|
click('leave-group', event => {
|
|
let groupName = getText('message-text');
|
|
invoke(connection, 'LeaveGroup', groupName);
|
|
});
|
|
|
|
click('groupmsg', event => {
|
|
let groupName = getText('target');
|
|
let message = getText('private-message-text');
|
|
invoke(connection, 'SendToGroup', groupName, message);
|
|
});
|
|
|
|
click('send', event => {
|
|
let data = getText('me-message-text');
|
|
invoke(connection, 'Echo', data);
|
|
});
|
|
|
|
</script>
|