notazof
/
yavsc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chat sounds on pv

main
Paul Schneider 9 years ago
parent 1dd4f25860
commit c3537ebdb0
2 changed files with 127 additions and 127 deletions
Show Stats Download Patch File Download Diff File

254
Yavsc/Views/Home/Chat.cshtml
Unescape Escape View File

@ -1,8 +1,6 @@
@{ @{ ViewBag.Title = "Chat"; }
ViewBag.Title = "Chat"; <h2>Chat </h2>
} <label><input type="checkbox" id="mute" />Muet</label>
<h2>Chat</h2>
<style> <style>
.discussion { .discussion {
color: black; color: black;
@ -25,86 +23,85 @@
</style> </style>
<div class="container"> <div class="container">
<input type="hidden" id="displayname" /> <input type="hidden" id="displayname" />
<div style="float:right; background-color: grey; padding:1em; margin:1em;"> <div style="float:right; background-color: grey; padding:1em; margin:1em;">
<h3>Salons</h3> <h3>Salons</h3>
<ul><li id="pubChan">Public</li></ul> <ul>
<h3>Utilisateurs</h3> <li id="pubChan">Public</li>
<ul id="userlist" style="list-style:none; padding: 1em; margin:1em;"> </ul>
</ul> <h3>Utilisateurs</h3>
<ul id="userlist" style="list-style:none; padding: 1em; margin:1em;">
</ul>
</div>
<ul id="discussion">
</ul>
<div id="targets">
<div id="sendmessagebox">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="@SR[" Send "]" />
</div> </div>
<ul id="discussion">
</ul>
<div id="targets">
<div id="sendmessagebox">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="@SR["Send"]" />
</div>
@if (ViewBag.IsAuthenticated) { @if (ViewBag.IsAuthenticated) {
<div id="sendpvbox"> <div id="sendpvbox">
<input type="text" id="pv" /> <input type="text" id="pv" />
<button type="submit" id="sendpv">@SR["Send a private message"] @SR["to"] <div id="sendpvdest" /> </button> <button type="submit" id="sendpv">@SR["Send a private message"] @SR["to"] <div id="sendpvdest" /> </button>
</div> </div>
} }
<input type="hidden" id="mySignalRConnectionIdHidden" value="" /> <input type="hidden" id="mySignalRConnectionIdHidden" value="" />
</div> </div>
</div> </div>
@section scripts { @section scripts {
<!--Reference the autogenerated SignalR hub script. --> <!--Reference the autogenerated SignalR hub script. -->
<script src="~/api/signalr/hubs"></script> <script src="~/api/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.--> <!--SignalR script to update the chat page and send messages.-->
<script> <script>
$(function () { $(function () {
var pvuis; var pvuis;
var audio = new Audio('/sounds/bell.mp3');
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();
var getUsers = function() { var getUsers = function () {
console.log("Try and get user list ..."); $('#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);
console.log(user); if (existent.length > 0) existent.remove();
var existent = $('#userlist li').filterByData("name",user.UserName); var li = $('<li class="user"><img src="/Avatars/' + user.UserName + '.xs.png"> ' + htmlEncode(user.UserName) + '</li>');
if (existent.length>0) existent.remove();
var li = $('<li class="user"><img src="/Avatars/'+user.UserName+'.xs.png"> '+htmlEncode(user.UserName)+'</li>'); var cxids = [];
$.each(user.Connections, function () {
var cxids = []; cxids.push(this.ConnectionId);
$.each(user.Connections,function() { });
cxids.push(this.ConnectionId); $(li).data("name", user.UserName);
}); $(li).data("cxids", cxids);
$(li).data("name",user.UserName); $(li).css('cursor', 'pointer');
$(li).data("cxids",cxids); $(li).click(function () {
$(li).css('cursor','pointer'); setPrivate(this);
$(li).click(function(){
setPrivate(this);
});
li.appendTo('#userlist');
}); });
} li.appendTo('#userlist');
); });
}; }
);
};
// Reference the auto-generated proxy for the hub. // Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub; var chat = $.connection.chatHub;
@ -115,85 +112,81 @@
+ '</strong>: ' + htmlEncode(message) + '</li>'); + '</strong>: ' + htmlEncode(message) + '</li>');
}; };
chat.client.addPV = function (name, message) { chat.client.addPV = function (name, message) {
if (!$("#mute").prop('checked'))
{
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, username) { var onUserDisconnected = function (cxid, username) {
$('#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 {
var li = $('<li class="user"><img src="/Avatars/'+username+'.xs.png"> '+username+'</li>'); var li = $('<li class="user"><img src="/Avatars/' + username + '.xs.png"> ' + username + '</li>');
li.data("name",username); li.data("name", username);
li.data("cxids",[cxid]); li.data("cxids", [cxid]);
li.appendTo('#userlist'); li.appendTo('#userlist');
li.css('cursor','pointer'); li.css('cursor', 'pointer');
li.click(function(){ setPrivate(this); }); li.click(function () { setPrivate(this); });
} }
}; };
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('');
}
@if (!ViewBag.IsAuthenticated) {
// Get the user name and store it to prepend to messages.
<text>
$('#displayname').val(prompt('Enter your name:', ''));
</text>
} }
@ -203,40 +196,47 @@ $('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
// Call the Send method on the hub. // Call the Send method on the hub.
sendMessage().focus(); sendMessage().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().focus(); sendPV();
$("#sendpv").focus()
}); });
getUsers(); getUsers();
}); });
$("#btnDebug").click(getUsers); $("#btnDebug").click(getUsers);
$.connection.hub.disconnected(function () { $.connection.hub.disconnected(function () {
setTimeout(function () { setTimeout(function () {
$.connection.hub.start().done(function () { $.connection.hub.start().done(function () {
$("#mySignalRConnectionIdHidden").val($.connection.hub.id); $("#mySignalRConnectionIdHidden").val($.connection.hub.id);
}, 3000); // Re-start connection after 3 seconds }, 3000); // Re-start connection after 3 seconds
}); });
}); });
$( window ).unload(function() { chat.server.abort(); });
$(window).unload(function () { chat.server.abort(); });
}); });
// 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;
} }
</script> </script>
}
@if (!ViewBag.IsAuthenticated) { // Get the user name and store it to prepend to messages.
<script>
$('#displayname').val(prompt('Enter your name:', ''));
</script>
} }

BIN
Yavsc/wwwroot/sounds/bell.mp3
View File

Binary file not shown.
Write Preview
Loading…