chat cx have a user name
parent
b0732b1c04
commit
d878b9a52b
@ -1 +1 @@
|
|||||||
.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:initial;transform:initial}.disabled{background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#444;background-color:#210912}footer{vertical-align:bottom;padding:1.5em;color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}
|
.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:initial;transform:initial}.container{-webkit-transition:background-color 2s color 1s;-moz-transition:background-color 2s color 1s;transition:background-color 2s color 1s}.disabled{color:#999;background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#444;background-color:#210912}footer{vertical-align:bottom;padding:1.5em;color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}
|
||||||
@ -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) {
|
||||||
|
|
||||||
function addULI(uname, cxids)
|
|
||||||
{
|
|
||||||
$('<li class="user"><button><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</button></li>')
|
$('<li class="user"><button><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</button></li>')
|
||||||
.data("name", uname)
|
.data('name', uname)
|
||||||
.data("cxids", cxids)
|
.data('cxids', cxids)
|
||||||
.css('cursor', 'pointer')
|
.css('cursor', 'pointer')
|
||||||
.click(function () { setPrivate(this); })
|
.click(function () { setPrivate(this); })
|
||||||
.appendTo('#userlist')
|
.appendTo('#userlist')
|
||||||
}
|
}
|
||||||
|
|
||||||
function getUsers () {
|
function getUsers () {
|
||||||
$('#userlist').empty();
|
$('#userlist').empty()
|
||||||
$('#to').empty();
|
$('#to').empty()
|
||||||
$.get("/api/chat/users").done(
|
$.get('/api/chat/users').done(
|
||||||
function (users) {
|
function (users) {
|
||||||
$.each(users, function () {
|
$.each(users, function () {
|
||||||
var user = this;
|
var user = this
|
||||||
var existent = $('#userlist li').filterByData("name", user.UserName);
|
var existent = $('#userlist li').filterByData('name', user.UserName)
|
||||||
if (existent.length > 0) existent.remove();
|
if (existent.length > 0) existent.remove()
|
||||||
var cxids = [];
|
var cxids = []
|
||||||
$.each(user.Connections, function () {
|
$.each(user.Connections, function () {
|
||||||
cxids.push(this.ConnectionId);
|
cxids.push(this.ConnectionId)
|
||||||
});
|
})
|
||||||
addULI(user.UserName, cxids)
|
addULI(user.UserName, cxids)
|
||||||
});
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
}
|
}
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function onCx () {
|
function onCx () {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
getUsers();
|
getUsers()
|
||||||
}, 120),
|
}, 120),
|
||||||
$('#targets').removeClass('disabled')
|
$('#chatview').removeClass('disabled')
|
||||||
};
|
$('#sendmessage').prop('disabled',false);
|
||||||
|
$('#sendpv').prop('disabled',false);
|
||||||
|
}
|
||||||
function onDisCx () {
|
function onDisCx () {
|
||||||
$('#targets').addClass('disabled');
|
$('#chatview').addClass('disabled');
|
||||||
};
|
$('#sendmessage').prop('disabled',true);
|
||||||
|
$('#sendpv').prop('disabled',true);
|
||||||
|
|
||||||
|
}
|
||||||
// This optional function html-encodes messages for display in the page.
|
// This optional function html-encodes messages for display in the page.
|
||||||
function htmlEncode (value) {
|
function htmlEncode (value) {
|
||||||
var encodedValue = $('<div />').text(value).html();
|
var encodedValue = $('<div />').text(value).html()
|
||||||
return encodedValue;
|
return encodedValue
|
||||||
}
|
}
|
||||||
|
|
||||||
var setPrivate = function (li) {
|
var setPrivate = function (li) {
|
||||||
$("#sendmessagebox").addClass("hidden");
|
$('#sendmessagebox').addClass('hidden')
|
||||||
$("#sendpvbox").removeClass("hidden");
|
$('#sendpvbox').removeClass('hidden')
|
||||||
pvuis = { CXs: $(li).data("cxids"), UserName: $(li).data("name") };
|
pvuis = { CXs: $(li).data('cxids'), UserName: $(li).data('name') }
|
||||||
$('#sendpvdest').html(pvuis.UserName)
|
$('#sendpvdest').html(pvuis.UserName)
|
||||||
$('#pv').focus();
|
$('#pv').focus()
|
||||||
}
|
}
|
||||||
var setPublic = function () {
|
var setPublic = function () {
|
||||||
$("#sendmessagebox").removeClass("hidden");
|
$('#sendmessagebox').removeClass('hidden')
|
||||||
$("#sendpvbox").addClass("hidden");
|
$('#sendpvbox').addClass('hidden')
|
||||||
$('#message').focus();
|
$('#message').focus()
|
||||||
}
|
}
|
||||||
$('#pubChan').css('cursor', 'pointer');
|
$('#pubChan').css('cursor', 'pointer')
|
||||||
$('#pubChan').click(setPublic);
|
$('#pubChan').click(setPublic)
|
||||||
setPublic();
|
setPublic()
|
||||||
// Reference the auto-generated proxy for the hub.
|
// Reference the auto-generated proxy for the hub.
|
||||||
var chat = $.connection.chatHub;
|
var chat = $.connection.chatHub
|
||||||
// Create a function that the hub can call back to display messages.
|
// Create a function that the hub can call back to display messages.
|
||||||
chat.client.addMessage = function (name, message) {
|
chat.client.addMessage = function (name, message) {
|
||||||
// Add the message to the page.
|
// Add the message to the page.
|
||||||
$('#discussion').append('<li class="discussion"><strong>' + htmlEncode(name)
|
$('#discussion').append('<li class="discussion"><strong>' + htmlEncode(name)
|
||||||
+ '</strong>: ' + htmlEncode(message) + '</li>')
|
+ '</strong>: ' + htmlEncode(message) + '</li>')
|
||||||
};
|
}
|
||||||
chat.client.addPV = function (name, message) {
|
chat.client.addPV = function (name, message) {
|
||||||
if (!$("#mute").prop('checked'))
|
if (!$('#mute').prop('checked')) {
|
||||||
{
|
audio.play()
|
||||||
audio.play();
|
|
||||||
}
|
}
|
||||||
// Add the pv to the page.
|
// Add the pv to the page.
|
||||||
$('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
|
$('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
|
||||||
+ '</strong>: ' + htmlEncode(message) + '</li>')
|
+ '</strong>: ' + htmlEncode(message) + '</li>')
|
||||||
};
|
}
|
||||||
$.fn.filterByData = function (prop, val) {
|
$.fn.filterByData = function (prop, val) {
|
||||||
return this.filter(
|
return this.filter(
|
||||||
function () { return $(this).data(prop) == val; }
|
function () { return $(this).data(prop) == val; }
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
var onUserDisconnected = function (cxid) {
|
var onUserDisconnected = function (cxid) {
|
||||||
$('#userlist li').filter(function () {
|
$('#userlist li').filter(function () {
|
||||||
var nids = $(this).data("cxids").filter(function () {
|
var nids = $(this).data('cxids').filter(function () {
|
||||||
return $(this) !== cxid
|
return $(this) !== cxid
|
||||||
});
|
})
|
||||||
if (nids.Length == 0) $(this).remove();
|
if (nids.Length == 0) $(this).remove()
|
||||||
else $(this).data("cxids", nids)
|
else $(this).data('cxids', nids)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
var onUserConnected = function (cxid, username) {
|
var onUserConnected = function (cxid, username) {
|
||||||
var connected = $('#userlist li').filterByData("name", username);
|
var connected = $('#userlist li').filterByData('name', username)
|
||||||
if (connected.length > 0) {
|
if (connected.length > 0) {
|
||||||
var ids = connected.data("cxids");
|
var ids = connected.data('cxids')
|
||||||
ids.push(cxid);
|
ids.push(cxid)
|
||||||
connected.data("cxids", ids)
|
connected.data('cxids', ids)
|
||||||
} else {
|
} else {
|
||||||
addULI(username, [cxid])
|
addULI(username, [cxid])
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
chat.client.notify = function (tag, message, data) {
|
chat.client.notify = function (tag, message, data) {
|
||||||
if (data) {
|
if (data) {
|
||||||
// Add the pv to the page.
|
// Add the pv to the page.
|
||||||
|
|
||||||
if (tag === 'connected') {
|
if (tag === 'connected') {
|
||||||
onUserConnected(message, data);
|
onUserConnected(message, data)
|
||||||
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||||
+ '</i> ' + htmlEncode(data) + '</li>')
|
+ '</i> ' + htmlEncode(data) + '</li>')
|
||||||
}
|
}
|
||||||
else if (tag === 'disconnected') {
|
else if (tag === 'disconnected') {
|
||||||
onUserDisconnected(message, data);
|
onUserDisconnected(message, data)
|
||||||
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||||
+ '</i> ' + htmlEncode(data) + '</li>')
|
+ '</i> ' + htmlEncode(data) + '</li>')
|
||||||
}
|
}else {
|
||||||
else {
|
|
||||||
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
|
||||||
+ '</i> ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '</li>')
|
+ '</i> ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '</li>')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
var sendMessage = function () {
|
var sendMessage = function () {
|
||||||
chat.server.send($('#displayname').val(), $('#message').val());
|
chat.server.send($('#displayname').val(), $('#message').val())
|
||||||
// Clear text box and reset focus for next comment.
|
// Clear text box and reset focus for next comment.
|
||||||
$('#message').val('')
|
$('#message').val('')
|
||||||
};
|
}
|
||||||
|
|
||||||
var sendPV = function () {
|
var sendPV = function () {
|
||||||
var msg = $('#pv').val();
|
var msg = $('#pv').val()
|
||||||
// Call the Send method on the hub.
|
// Call the Send method on the hub.
|
||||||
$.each(pvuis.CXs, function () {
|
$.each(pvuis.CXs, function () {
|
||||||
chat.server.sendPV(this, msg);
|
chat.server.sendPV(this, msg)
|
||||||
});
|
})
|
||||||
$('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName)
|
$('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName)
|
||||||
+ '<< ' + htmlEncode(msg) +'</li>');
|
+ '<< ' + htmlEncode(msg) + '</li>')
|
||||||
// Clear text box and reset focus for next comment.
|
// Clear text box and reset focus for next comment.
|
||||||
$('#pv').val('');
|
$('#pv').val('')
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start the connection.
|
// Start the connection.
|
||||||
$.connection.hub.start().done(function () {
|
$.connection.hub.start().done(function () {
|
||||||
onCx();
|
onCx()
|
||||||
$('#sendmessage').click(function () {
|
$('#sendmessage').click(function () {
|
||||||
// Call the Send method on the hub.
|
// Call the Send method on the hub.
|
||||||
sendMessage();
|
sendMessage()
|
||||||
$('#message').focus();
|
$('#message').focus()
|
||||||
});
|
})
|
||||||
$("#message").keydown(function (event) {
|
$('#message').keydown(function (event) {
|
||||||
if (event.which == 13) {
|
if (event.which == 13) {
|
||||||
sendMessage()
|
sendMessage()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
$("#pv").keydown(function (event) {
|
$('#pv').keydown(function (event) {
|
||||||
if (event.which == 13) {
|
if (event.which == 13) {
|
||||||
sendPV()
|
sendPV()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
$('#sendpv').click(function () {
|
$('#sendpv').click(function () {
|
||||||
// Call the Send method on the hub.
|
// Call the Send method on the hub.
|
||||||
sendPV();
|
sendPV()
|
||||||
$("#sendpv").focus()
|
$('#sendpv').focus()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
$.connection.hub.disconnected(function () {
|
$.connection.hub.disconnected(function () {
|
||||||
onDisCx();
|
onDisCx()
|
||||||
});
|
setTimeout(function () {
|
||||||
|
$.connection.hub.start().done(function () {
|
||||||
$(window).unload(function () { chat.server.abort(); });
|
$('#mySignalRConnectionIdHidden').val($.connection.hub.id)
|
||||||
|
onCx()
|
||||||
|
}, 30000); // Re-start connection after 30 seconds
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
};
|
$(window).unload(function () { chat.server.abort(); })
|
||||||
chatinit(this);
|
})(jQuery);
|
||||||
@ -0,0 +1 @@
|
|||||||
|
+function(n){function s(s,e){n('<li class="user"><button><img src="/Avatars/'+s+'.xs.png"> '+s+"</button></li>").data("name",s).data("cxids",e).css("cursor","pointer").click(function(){d(this)}).appendTo("#userlist")}function e(){n("#userlist").empty(),n("#to").empty(),n.get("/api/chat/users").done(function(e){n.each(e,function(){var e=this,i=n("#userlist li").filterByData("name",e.UserName);i.length>0&&i.remove();var t=[];n.each(e.Connections,function(){t.push(this.ConnectionId)}),s(e.UserName,t)})})}function i(){setTimeout(function(){e()},120),n("#chatview").removeClass("disabled"),n("#sendmessage").prop("disabled",!1),n("#sendpv").prop("disabled",!1)}function t(){n("#chatview").addClass("disabled"),n("#sendmessage").prop("disabled",!0),n("#sendpv").prop("disabled",!0)}function a(s){var e=n("<div />").text(s).html();return e}var o,c=new Audio("/sounds/bell.mp3"),d=function(s){n("#sendmessagebox").addClass("hidden"),n("#sendpvbox").removeClass("hidden"),o={CXs:n(s).data("cxids"),UserName:n(s).data("name")},n("#sendpvdest").html(o.UserName),n("#pv").focus()},u=function(){n("#sendmessagebox").removeClass("hidden"),n("#sendpvbox").addClass("hidden"),n("#message").focus()};n("#pubChan").css("cursor","pointer"),n("#pubChan").click(u),u();var l=n.connection.chatHub;l.client.addMessage=function(s,e){n("#discussion").append('<li class="discussion"><strong>'+a(s)+"</strong>: "+a(e)+"</li>")},l.client.addPV=function(s,e){n("#mute").prop("checked")||c.play(),n("#discussion").append('<li class="pv"><strong>'+a(s)+"</strong>: "+a(e)+"</li>")},n.fn.filterByData=function(s,e){return this.filter(function(){return n(this).data(s)==e})};var r=function(s){n("#userlist li").filter(function(){var e=n(this).data("cxids").filter(function(){return n(this)!==s});0==e.Length?n(this).remove():n(this).data("cxids",e)})},f=function(e,i){var t=n("#userlist li").filterByData("name",i);if(t.length>0){var a=t.data("cxids");a.push(e),t.data("cxids",a)}else s(i,[e])};l.client.notify=function(s,e,i){i&&("connected"===s?(f(e,i),n("#discussion").append('<li class="notif"><i>'+a(s)+"</i> "+a(i)+"</li>")):"disconnected"===s?(r(e,i),n("#discussion").append('<li class="notif"><i>'+a(s)+"</i> "+a(i)+"</li>")):n("#discussion").append('<li class="notif"><i>'+a(s)+"</i> "+a(e)+" : "+a(i)+"</li>"))};var p=function(){l.server.send(n("#displayname").val(),n("#message").val()),n("#message").val("")},v=function(){var s=n("#pv").val();n.each(o.CXs,function(){l.server.sendPV(this,s)}),n("#discussion").append('<li class="pv">'+a(o.UserName)+"<< "+a(s)+"</li>"),n("#pv").val("")};n.connection.hub.start().done(function(){i(),n("#sendmessage").click(function(){p(),n("#message").focus()}),n("#message").keydown(function(n){13==n.which&&p()}),n("#pv").keydown(function(n){13==n.which&&v()}),n("#sendpv").click(function(){v(),n("#sendpv").focus()})}),n.connection.hub.disconnected(function(){t(),setTimeout(function(){n.connection.hub.start().done(function(){n("#mySignalRConnectionIdHidden").val(n.connection.hub.id),i()},3e4)})}),n(window).unload(function(){l.server.abort()})}(jQuery);
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"diagnosticMessages": false,
|
||||||
|
"methodDisplay": "classAndMethod",
|
||||||
|
"parallelizeTestCollections": true
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue