chat cx have a user name

This commit is contained in:
2017-03-22 03:31:29 +01:00
parent b0732b1c04
commit d878b9a52b
17 changed files with 306 additions and 275 deletions

View File

@ -1,179 +1,184 @@
var chatinit = function() {
+(function ($) {
var pvuis
var pvuis;
var audio = new Audio('/sounds/bell.mp3');
var audio = new Audio('/sounds/bell.mp3')
function addULI(uname, cxids)
{
$('<li class="user"><button><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</button></li>')
.data("name", uname)
.data("cxids", cxids)
.css('cursor', 'pointer')
.click(function () { setPrivate(this); })
.appendTo('#userlist')
}
function addULI (uname, cxids) {
$('<li class="user"><button><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</button></li>')
.data('name', uname)
.data('cxids', cxids)
.css('cursor', 'pointer')
.click(function () { setPrivate(this); })
.appendTo('#userlist')
}
function getUsers() {
$('#userlist').empty();
$('#to').empty();
$.get("/api/chat/users").done(
function (users) {
$.each(users, function () {
var user = this;
var existent = $('#userlist li').filterByData("name", user.UserName);
if (existent.length > 0) existent.remove();
var cxids = [];
$.each(user.Connections, function () {
cxids.push(this.ConnectionId);
});
addULI(user.UserName,cxids)
});
}
);
};
function getUsers () {
$('#userlist').empty()
$('#to').empty()
$.get('/api/chat/users').done(
function (users) {
$.each(users, function () {
var user = this
var existent = $('#userlist li').filterByData('name', user.UserName)
if (existent.length > 0) existent.remove()
var cxids = []
$.each(user.Connections, function () {
cxids.push(this.ConnectionId)
})
addULI(user.UserName, cxids)
})
}
)
}
function onCx() {
setTimeout(function () {
getUsers();
},120),
$('#targets').removeClass('disabled')
};
function onDisCx () {
$('#targets').addClass('disabled');
};
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
function onCx () {
setTimeout(function () {
getUsers()
}, 120),
$('#chatview').removeClass('disabled')
$('#sendmessage').prop('disabled',false);
$('#sendpv').prop('disabled',false);
}
function onDisCx () {
$('#chatview').addClass('disabled');
$('#sendmessage').prop('disabled',true);
$('#sendpv').prop('disabled',true);
var setPrivate = function (li) {
$("#sendmessagebox").addClass("hidden");
$("#sendpvbox").removeClass("hidden");
pvuis = { CXs: $(li).data("cxids"), UserName: $(li).data("name") };
$('#sendpvdest').html(pvuis.UserName)
$('#pv').focus();
}
var setPublic = function () {
$("#sendmessagebox").removeClass("hidden");
$("#sendpvbox").addClass("hidden");
$('#message').focus();
}
$('#pubChan').css('cursor', 'pointer');
$('#pubChan').click(setPublic);
setPublic();
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addMessage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li class="discussion"><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>')
};
chat.client.addPV = function (name, message) {
if (!$("#mute").prop('checked'))
{
audio.play();
}
// Add the pv to the page.
$('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>')
};
$.fn.filterByData = function (prop, val) {
return this.filter(
function () { return $(this).data(prop) == val; }
);
}
}
// This optional function html-encodes messages for display in the page.
function htmlEncode (value) {
var encodedValue = $('<div />').text(value).html()
return encodedValue
}
var onUserDisconnected = function (cxid) {
$('#userlist li').filter(function () {
var nids = $(this).data("cxids").filter(function () {
return $(this) !== cxid
});
if (nids.Length == 0) $(this).remove();
else $(this).data("cxids", nids)
});
};
var onUserConnected = function (cxid, username) {
var connected = $('#userlist li').filterByData("name", username);
if (connected.length > 0) {
var ids = connected.data("cxids");
ids.push(cxid);
connected.data("cxids", ids)
} else {
addULI(username, [cxid])
}
};
chat.client.notify = function (tag, message, data) {
if (data) {
// Add the pv to the page.
var setPrivate = function (li) {
$('#sendmessagebox').addClass('hidden')
$('#sendpvbox').removeClass('hidden')
pvuis = { CXs: $(li).data('cxids'), UserName: $(li).data('name') }
$('#sendpvdest').html(pvuis.UserName)
$('#pv').focus()
}
var setPublic = function () {
$('#sendmessagebox').removeClass('hidden')
$('#sendpvbox').addClass('hidden')
$('#message').focus()
}
$('#pubChan').css('cursor', 'pointer')
$('#pubChan').click(setPublic)
setPublic()
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub
// Create a function that the hub can call back to display messages.
chat.client.addMessage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li class="discussion"><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>')
}
chat.client.addPV = function (name, message) {
if (!$('#mute').prop('checked')) {
audio.play()
}
// Add the pv to the page.
$('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>')
}
$.fn.filterByData = function (prop, val) {
return this.filter(
function () { return $(this).data(prop) == val; }
)
}
if (tag === 'connected') {
onUserConnected(message, data);
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(data) + '</li>')
}
else if (tag === 'disconnected') {
onUserDisconnected(message, data);
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(data) + '</li>')
}
else {
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '</li>')
}
}
};
var onUserDisconnected = function (cxid) {
$('#userlist li').filter(function () {
var nids = $(this).data('cxids').filter(function () {
return $(this) !== cxid
})
if (nids.Length == 0) $(this).remove()
else $(this).data('cxids', nids)
})
}
var onUserConnected = function (cxid, username) {
var connected = $('#userlist li').filterByData('name', username)
if (connected.length > 0) {
var ids = connected.data('cxids')
ids.push(cxid)
connected.data('cxids', ids)
} else {
addULI(username, [cxid])
}
}
chat.client.notify = function (tag, message, data) {
if (data) {
// Add the pv to the page.
var sendMessage = function () {
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('')
};
if (tag === 'connected') {
onUserConnected(message, data)
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(data) + '</li>')
}
else if (tag === 'disconnected') {
onUserDisconnected(message, data)
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(data) + '</li>')
}else {
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
+ '</i> ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '</li>')
}
}
}
var sendPV = function () {
var msg = $('#pv').val();
// Call the Send method on the hub.
$.each(pvuis.CXs, function () {
chat.server.sendPV(this, msg);
});
$('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName)
+ '<< ' + htmlEncode(msg) +'</li>');
// Clear text box and reset focus for next comment.
$('#pv').val('');
}
var sendMessage = function () {
chat.server.send($('#displayname').val(), $('#message').val())
// Clear text box and reset focus for next comment.
$('#message').val('')
}
// Start the connection.
$.connection.hub.start().done(function () {
onCx();
$('#sendmessage').click(function () {
// Call the Send method on the hub.
sendMessage();
$('#message').focus();
});
$("#message").keydown(function (event) {
if (event.which == 13) {
sendMessage()
}
});
$("#pv").keydown(function (event) {
if (event.which == 13) {
sendPV()
}
});
$('#sendpv').click(function () {
// Call the Send method on the hub.
sendPV();
$("#sendpv").focus()
});
});
var sendPV = function () {
var msg = $('#pv').val()
// Call the Send method on the hub.
$.each(pvuis.CXs, function () {
chat.server.sendPV(this, msg)
})
$('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName)
+ '<< ' + htmlEncode(msg) + '</li>')
// Clear text box and reset focus for next comment.
$('#pv').val('')
}
$.connection.hub.disconnected(function () {
onDisCx();
});
// Start the connection.
$.connection.hub.start().done(function () {
onCx()
$('#sendmessage').click(function () {
// Call the Send method on the hub.
sendMessage()
$('#message').focus()
})
$('#message').keydown(function (event) {
if (event.which == 13) {
sendMessage()
}
})
$('#pv').keydown(function (event) {
if (event.which == 13) {
sendPV()
}
})
$('#sendpv').click(function () {
// Call the Send method on the hub.
sendPV()
$('#sendpv').focus()
})
})
$(window).unload(function () { chat.server.abort(); });
$.connection.hub.disconnected(function () {
onDisCx()
setTimeout(function () {
$.connection.hub.start().done(function () {
$('#mySignalRConnectionIdHidden').val($.connection.hub.id)
onCx()
}, 30000); // Re-start connection after 30 seconds
})
})
};
chatinit(this);
$(window).unload(function () { chat.server.abort(); })
})(jQuery);