Skip to content

Commit f02c03c

Browse files
authored
Merge pull request #1 from ApidriuC/Develop
Update Develop, Fix Bugs
2 parents b33932b + c2b9e89 commit f02c03c

File tree

7 files changed

+75
-115
lines changed

7 files changed

+75
-115
lines changed

SignalRChat/ChatHub.cs

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,72 +10,78 @@ namespace SignalRChat
1010
public class ChatHub : Hub
1111
{
1212
#region Data Members
13-
13+
//Lista de Usuarios Conectados
1414
static List<UserDetail> ConnectedUsers = new List<UserDetail>();
15+
//Lista de Mensajes Enviados
1516
static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
1617

1718
#endregion
1819

1920
#region Methods
2021

22+
//Conexión de Usuarios
2123
public void Connect(string userName)
2224
{
2325
var id = Context.ConnectionId;
2426

25-
27+
//Un contador que me asigna los ID's al usuario nuevo sin que se repitan
2628
if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
2729
{
30+
//Añade al usuario al ID generado en la lista de Usuarios
2831
ConnectedUsers.Add(new UserDetail { ConnectionId = id, UserName = userName });
2932

30-
// send to caller
33+
//Conecta ese nuevo usuario al Chat
3134
Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);
3235

33-
// send to all except caller client
36+
//Envio a todos, excepto al usuario nuevo
3437
Clients.AllExcept(id).onNewUserConnected(id, userName);
3538

3639
}
3740

3841
}
39-
42+
//Envio de Mensajes
4043
public void SendMessageToAll(string userName, string message)
4144
{
42-
// store last 100 messages in cache
45+
//Llama a la funcion que me almacena los mensajes en el Cache
4346
AddMessageinCache(userName, message);
4447

45-
// Broad cast message
48+
//Envia el mensaje a todos los usuarios del chat
4649
Clients.All.messageReceived(userName, message);
4750
}
4851

49-
5052

53+
//Desconexión de Usuarios
5154
public override System.Threading.Tasks.Task OnDisconnected()
5255
{
56+
//Me recorre los Usuarios y verifica la conexión de ellos
5357
var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
58+
//Si la conexión es null, quiere decir que cerró la ventana
5459
if (item != null)
5560
{
61+
//Me remueve el usuario
5662
ConnectedUsers.Remove(item);
5763

5864
var id = Context.ConnectionId;
5965
Clients.All.onUserDisconnected(id, item.UserName);
6066

6167
}
62-
68+
//Retorno de la función
6369
return base.OnDisconnected();
6470
}
6571

66-
72+
6773
#endregion
6874

6975
#region
70-
76+
//Funcion para almacenar mensajes en el cache
7177
private void AddMessageinCache(string userName, string message)
7278
{
79+
//A la lista añadimos el mensaje que envió el usuario
7380
CurrentMessage.Add(new MessageDetail { UserName = userName, Message = message });
74-
75-
if (CurrentMessage.Count > 100)
81+
//Al cargar la pagina el historial va a contener los ultimos mensajes, ese valor se declara acá
82+
if (CurrentMessage.Count > 5)
7683
CurrentMessage.RemoveAt(0);
7784
}
78-
7985
#endregion
8086
}
8187

SignalRChat/Common/MessageDetail.cs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
namespace SignalRChat.Common
77
{
8+
//Lista de Mensajes
89
public class MessageDetail
910
{
10-
11+
//Usuario
1112
public string UserName { get; set; }
12-
13+
//Mensaje del Usuario
1314
public string Message { get; set; }
1415

1516
}

SignalRChat/Common/UserDetail.cs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55

66
namespace SignalRChat.Common
77
{
8+
//Lista de Usuarios
89
public class UserDetail
910
{
11+
//ID Usuario
1012
public string ConnectionId { get; set; }
13+
//Nombre Usuario
1114
public string UserName { get; set; }
1215
}
1316
}

SignalRChat/Css/ChatStyle.css

Lines changed: 0 additions & 84 deletions
This file was deleted.

SignalRChat/Css/Site.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@
142142
margin-top: 5%;
143143
color: #fff;
144144
font-family: "open_sanslight";
145+
font-weight: bold;
145146
}
146147

147148
.middleR {
@@ -225,9 +226,22 @@
225226
height: 96%;
226227
left: 2%;
227228
position: absolute;
228-
overflow: auto;
229+
overflow-y: auto;
230+
overflow-x: hidden;
229231
}
230232

233+
.chat::-webkit-scrollbar {
234+
-webkit-appearance: none;
235+
}
236+
237+
.chat::-webkit-scrollbar:vertical {
238+
width: 5px;
239+
height: auto;
240+
background-color: #ccc;
241+
border: 2px solid #f1f2f3;
242+
border-radius: 10px;
243+
}
244+
231245
#icono {
232246
width: 1em;
233247
height: 1em;

SignalRChat/SignalRChat.csproj

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@
8080
<Reference Include="System.Xml.Linq" />
8181
</ItemGroup>
8282
<ItemGroup>
83-
<Content Include="Css\ChatStyle.css" />
8483
<Content Include="Css\JQueryUI\themes\base\images\ui-bg_flat_0_aaaaaa_40x100.png" />
8584
<Content Include="Css\JQueryUI\themes\base\images\ui-bg_flat_75_ffffff_40x100.png" />
8685
<Content Include="Css\JQueryUI\themes\base\images\ui-bg_glass_55_fbf9ee_1x400.png" />

SignalRChat/index.html

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html>
33
<head>
44
<title></title>
5-
<link href="Css/Site.css" rel="stylesheet" type="text/css">
6-
<link type="text/css" rel="stylesheet" href="Css/ChatStyle.css?v=Random()" />
7-
5+
<!-- Referencia CSS -->
6+
<link href="Css/Site.css?v=random()" rel="stylesheet" type="text/css">
87

8+
<!-- Scripts Jquery versión antigua -->
99
<script src="/Scripts/jquery-1.8.2.min.js"></script>
1010

1111
<!-- Referencias del SignalR -->
1212
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
13+
<!-- Creación del llamado de la biblioteca dinámica -->
1314
<script src="/signalr/hubs"></script>
1415

1516
<script type="text/javascript">
@@ -63,6 +64,25 @@
6364
break;
6465
}
6566
}
67+
//Envio del TextArea con la tecla Enter
68+
//Cuando el documento esta pintado, escucha
69+
$(document).ready(function () {
70+
//Escucha la tecla que se va presionar en el Input
71+
$('#inputMessage').keydown(function (event) {
72+
//Escucha el evento 13 que es la tecla enter
73+
if (event.which == 13) {
74+
//Realiza el envio si hay un mensaje en el input
75+
var msg = $("#inputMessage").val();
76+
if (msg.length > 0) {
77+
var userName = $('#hdUserName').val();
78+
chatHub.server.sendMessageToAll(userName, msg);
79+
$("#inputMessage").val('');
80+
//Volvemos a la posición inicial el Input
81+
event.preventDefault();
82+
}
83+
}
84+
});
85+
});
6686

6787
//Asignación del mensaje al input y el enviado del mensaje al botón
6888
$('#enviarButton').click(function enviar() {
@@ -126,7 +146,7 @@
126146
code = $('<div class="loginUser">' + name + "</div>");
127147
}
128148
else {
129-
//Si no, toma el id del hub
149+
//Si la etiqueta del id es diferente al hub, toma el id del hub
130150
code = $('<a id="' + id + '" class="user" >' + name + '<a>');
131151
}
132152

@@ -144,6 +164,7 @@
144164

145165
</head>
146166
<body>
167+
<!-- Header de la Pagina -->
147168
<div id="headerPage">
148169
<nav id="contenedor" class="navBar">
149170
<div class="logoNavLeft">
@@ -155,38 +176,40 @@
155176
</div>
156177
</nav>
157178
</div>
179+
<!-- Contenedor del Middle -->
158180
<div id="contentMiddle">
159181
<div class="fondoPage"></div>
160-
182+
<!-- Contenedor de la parte izquierda (Animación) -->
161183
<div id="MiddleLeft" class="MiddleLeft widthNormal">
162184
<div id="contenedor">
163185
<lottie-player id="lottie" src="Images/94789-chat-animation.json" background="transparent" speed="1" loop autoplay></lottie-player>
164186
</div>
165187
</div>
166-
188+
<!-- Contenedor de la parte derecha (Chat Modal) -->
167189
<div id="MiddleRight" class="MiddleRight hidePanel">
168190
<div id="contenedor">
169191
<div id="chat">
192+
<!-- Header del Chat -->
170193
<div class="chatHeader">
171194
<p class="text">SYC PRACTICANTES</p>
172195
</div>
173196
<div class="middleR">
174197
<div class="contenidoChat">
198+
<!-- Chat Ventana -->
175199
<div class="chat">
176-
<!-- Chat -->
177200
<div class="content">
178201
<div id="divChatWindow" class="chatWindow">
179202
</div>
180203
</div>
181204
</div>
182-
<!-- Guardado del ID y el Nombre para asignación por html -->
205+
<!-- Guardado del ID y el Nombre para asignación por html hacia el HUB -->
183206
<input id="hdId" type="hidden" />
184207
<input id="hdUserName" type="hidden" />
185-
186-
<!-- fin chat -->
208+
<!-- Fin ventana del chat -->
187209
</div>
188210
</div>
189211
</div>
212+
<!-- Pie del chat (Input y botón de envio) -->
190213
<div class="footerR">
191214
<div class="Input">
192215
<textarea id="inputMessage" class="inputChat" placeholder="Escriba su mensaje..."></textarea>
@@ -206,11 +229,9 @@
206229
</div>
207230
<div>
208231
</div>
209-
232+
<!-- Scripts Creados para las funciones -->
210233
<script src="Scripts/Random.js"></script>
211234
<script src="Scripts/Animation.js"></script>
212235
<script src="Scripts/OcultarModal.js"></script>
213-
214-
215236
</body>
216237
</html>

0 commit comments

Comments
 (0)