98 lines
2.8 KiB
Plaintext
98 lines
2.8 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Chat";
|
|
}
|
|
|
|
<div id="chat-area">
|
|
<ul id="messages"></ul>
|
|
<ul id="users">
|
|
<li><b>Users online</b></li>
|
|
</ul>
|
|
<div class="clear">
|
|
</div>
|
|
<form id="sendmessage" action="#">
|
|
<input type="text" id="new-message" />
|
|
<input type="submit" id="send" value="Send" class="send" />
|
|
</form>
|
|
</div>
|
|
<script src="lib/signalr-client/signalr-client.js"></script>
|
|
<script>
|
|
let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
|
|
let connection = new signalR.HubConnection(`http://${document.location.host}/chat`, 'formatType=json&format=text');
|
|
|
|
connection.on('Send', message => appendLine(message));
|
|
connection.onClosed = e => {
|
|
if (e) {
|
|
appendLine('Connection closed with error: ' + e, 'red');
|
|
}
|
|
else {
|
|
appendLine('Disconnected', 'green');
|
|
}
|
|
};
|
|
|
|
connection.on('SetUsersOnline', function (usersOnline) {
|
|
for (var user in usersOnline) {
|
|
addUserOnline(user, usersOnline[user]);
|
|
}
|
|
});
|
|
|
|
connection.on('OnConnected', function (id, userName) {
|
|
addUserOnline(id, userName);
|
|
appendLine('User ' + userName + ' joined the chat');
|
|
});
|
|
|
|
connection.on('OnDisconnected', function (id, userName) {
|
|
appendLine('User ' + userName + ' left the chat');
|
|
document.getElementById(id).outerHTML = '';
|
|
});
|
|
|
|
connection.on('Send', function (userName, message) {
|
|
var nameElement = document.createElement('b');
|
|
nameElement.innerText = userName + ':';
|
|
|
|
var msgElement = document.createElement('span');
|
|
msgElement.innerText = ' ' + message;
|
|
|
|
var child = document.createElement('li');
|
|
child.appendChild(nameElement);
|
|
child.appendChild(msgElement);
|
|
document.getElementById('messages').appendChild(child);
|
|
});
|
|
|
|
connection.start(transportType).catch(err => appendLine(err, 'red'));
|
|
|
|
document.getElementById('sendmessage').addEventListener('submit', event => {
|
|
let data = document.getElementById('new-message').value;
|
|
connection.invoke('Send', data).catch(err => appendLine(err, 'red'));
|
|
event.preventDefault();
|
|
});
|
|
|
|
function appendLine(line, color) {
|
|
let child = document.createElement('li');
|
|
if (color) {
|
|
child.style.color = color;
|
|
}
|
|
child.innerText = line;
|
|
document.getElementById('messages').appendChild(child);
|
|
}
|
|
|
|
function addUserOnline(id, userName) {
|
|
var user = document.createElement('li');
|
|
user.innerText = userName;
|
|
user.id = id;
|
|
document.getElementById('users').appendChild(user);
|
|
}
|
|
|
|
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, " "));
|
|
});
|
|
|
|
</script>
|