Merge pull request #1 from ApidriuC/Develop

Update Develop, Fix Bugs
ApidriuC · Jun 25, 2022 · f02c03c · f02c03c
2 parents b33932b + c2b9e89
commit f02c03c
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 115 deletions.
diff --git a/SignalRChat/ChatHub.cs b/SignalRChat/ChatHub.cs
@@ -10,72 +10,78 @@ namespace SignalRChat
  public class ChatHub : Hub
  {
  #region Data Members
-
+ //Lista de Usuarios Conectados
  static List<UserDetail> ConnectedUsers = new List<UserDetail>();
+ //Lista de Mensajes Enviados
  static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
 
  #endregion
 
  #region Methods
 
+ //Conexión de Usuarios
  public void Connect(string userName)
  {
  var id = Context.ConnectionId;
 
-
+ //Un contador que me asigna los ID's al usuario nuevo sin que se repitan
  if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
  {
+ //Añade al usuario al ID generado en la lista de Usuarios
  ConnectedUsers.Add(new UserDetail { ConnectionId = id, UserName = userName });
 
- // send to caller
+ //Conecta ese nuevo usuario al Chat
  Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);
 
- // send to all except caller client
+ //Envio a todos, excepto al usuario nuevo
  Clients.AllExcept(id).onNewUserConnected(id, userName);
 
  }
 
  }
-
+ //Envio de Mensajes
  public void SendMessageToAll(string userName, string message)
  {
- // store last 100 messages in cache
+ //Llama a la funcion que me almacena los mensajes en el Cache 
  AddMessageinCache(userName, message);
 
- // Broad cast message
+ //Envia el mensaje a todos los usuarios del chat
  Clients.All.messageReceived(userName, message);
  }
 
-
 
+ //Desconexión de Usuarios
  public override System.Threading.Tasks.Task OnDisconnected()
  {
+ //Me recorre los Usuarios y verifica la conexión de ellos
  var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
+ //Si la conexión es null, quiere decir que cerró la ventana
  if (item != null)
  {
+ //Me remueve el usuario
  ConnectedUsers.Remove(item);
 
  var id = Context.ConnectionId;
  Clients.All.onUserDisconnected(id, item.UserName);
 
  }
-
+ //Retorno de la función
  return base.OnDisconnected();
  }
 
- 
+
  #endregion
 
  #region
-
+ //Funcion para almacenar mensajes en el cache
  private void AddMessageinCache(string userName, string message)
  {
+ //A la lista añadimos el mensaje que envió el usuario
  CurrentMessage.Add(new MessageDetail { UserName = userName, Message = message });
-
- if (CurrentMessage.Count > 100)
+ //Al cargar la pagina el historial va a contener los ultimos mensajes, ese valor se declara acá
+ if (CurrentMessage.Count > 5)
  CurrentMessage.RemoveAt(0);
  }
-
  #endregion
  }
 

diff --git a/SignalRChat/Common/MessageDetail.cs b/SignalRChat/Common/MessageDetail.cs
@@ -5,11 +5,12 @@
 
 namespace SignalRChat.Common
 {
+ //Lista de Mensajes
  public class MessageDetail
  {
-
+ //Usuario
  public string UserName { get; set; }
-
+ //Mensaje del Usuario
  public string Message { get; set; }
 
  }

diff --git a/SignalRChat/Common/UserDetail.cs b/SignalRChat/Common/UserDetail.cs
@@ -5,9 +5,12 @@
 
 namespace SignalRChat.Common
 {
+ //Lista de Usuarios
  public class UserDetail
  {
+ //ID Usuario
  public string ConnectionId { get; set; }
+ //Nombre Usuario
  public string UserName { get; set; }
  }
 }
diff --git a/SignalRChat/Css/ChatStyle.css b/SignalRChat/Css/ChatStyle.css
diff --git a/SignalRChat/Css/Site.css b/SignalRChat/Css/Site.css
@@ -142,6 +142,7 @@
  margin-top: 5%;
  color: #fff;
  font-family: "open_sanslight";
+ font-weight: bold;
  }
 
 .middleR {
@@ -225,9 +226,22 @@
  height: 96%;
  left: 2%;
  position: absolute;
- overflow: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
 }
 
+ .chat::-webkit-scrollbar {
+ -webkit-appearance: none;
+ }
+
+ .chat::-webkit-scrollbar:vertical {
+ width: 5px;
+ height: auto;
+ background-color: #ccc;
+ border: 2px solid #f1f2f3;
+ border-radius: 10px;
+ }
+
 #icono {
  width: 1em;
  height: 1em;

diff --git a/SignalRChat/SignalRChat.csproj b/SignalRChat/SignalRChat.csproj
@@ -80,7 +80,6 @@
  <Reference Include="System.Xml.Linq" />
  </ItemGroup>
  <ItemGroup>
- <Content Include="Css\ChatStyle.css" />
  <Content Include="Css\JQueryUI\themes\base\images\ui-bg_flat_0_aaaaaa_40x100.png" />
  <Content Include="Css\JQueryUI\themes\base\images\ui-bg_flat_75_ffffff_40x100.png" />
  <Content Include="Css\JQueryUI\themes\base\images\ui-bg_glass_55_fbf9ee_1x400.png" />

diff --git a/SignalRChat/index.html b/SignalRChat/index.html
@@ -2,14 +2,15 @@
 <html>
 <head>
  <title></title>
- <link href="Css/Site.css" rel="stylesheet" type="text/css">
- <link type="text/css" rel="stylesheet" href="Css/ChatStyle.css?v=Random()" />
-
+ <!-- Referencia CSS -->
+ <link href="Css/Site.css?v=random()" rel="stylesheet" type="text/css">
 
+ <!-- Scripts Jquery versión antigua -->
  <script src="/Scripts/jquery-1.8.2.min.js"></script>
 
  <!-- Referencias del SignalR -->
  <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
+ <!-- Creación del llamado de la biblioteca dinámica -->
  <script src="/signalr/hubs"></script>
 
  <script type="text/javascript">
@@ -63,6 +64,25 @@
  break;
  }
  }
+ //Envio del TextArea con la tecla Enter
+ //Cuando el documento esta pintado, escucha
+ $(document).ready(function () {
+ //Escucha la tecla que se va presionar en el Input
+ $('#inputMessage').keydown(function (event) {
+ //Escucha el evento 13 que es la tecla enter
+ if (event.which == 13) {
+ //Realiza el envio si hay un mensaje en el input
+ var msg = $("#inputMessage").val();
+ if (msg.length > 0) {
+ var userName = $('#hdUserName').val();
+ chatHub.server.sendMessageToAll(userName, msg);
+ $("#inputMessage").val('');
+ //Volvemos a la posición inicial el Input
+ event.preventDefault();
+ }
+ }
+ });
+ });
 
  //Asignación del mensaje al input y el enviado del mensaje al botón
  $('#enviarButton').click(function enviar() {
@@ -126,7 +146,7 @@
  code = $('<div class="loginUser">' + name + "</div>");
  }
  else {
- //Si no, toma el id del hub
+ //Si la etiqueta del id es diferente al hub, toma el id del hub
  code = $('<a id="' + id + '" class="user" >' + name + '<a>');
  }
 
@@ -144,6 +164,7 @@
 
 </head>
 <body>
+ <!-- Header de la Pagina -->
  <div id="headerPage">
  <nav id="contenedor" class="navBar">
  <div class="logoNavLeft">
@@ -155,38 +176,40 @@
  </div>
  </nav>
  </div>
+ <!-- Contenedor del Middle -->
  <div id="contentMiddle">
  <div class="fondoPage"></div>
-
+ <!-- Contenedor de la parte izquierda (Animación) -->
  <div id="MiddleLeft" class="MiddleLeft widthNormal">
  <div id="contenedor">
  <lottie-player id="lottie" src="Images/94789-chat-animation.json" background="transparent" speed="1" loop autoplay></lottie-player>
  </div>
  </div>
-
+ <!-- Contenedor de la parte derecha (Chat Modal) -->
  <div id="MiddleRight" class="MiddleRight hidePanel">
  <div id="contenedor">
  <div id="chat">
+ <!-- Header del Chat -->
  <div class="chatHeader">
  <p class="text">SYC PRACTICANTES</p>
  </div>
  <div class="middleR">
  <div class="contenidoChat">
+ <!-- Chat Ventana -->
  <div class="chat">
- <!-- Chat -->
  <div class="content">
  <div id="divChatWindow" class="chatWindow">
  </div>
  </div>
  </div>
- <!-- Guardado del ID y el Nombre para asignación por html -->
+ <!-- Guardado del ID y el Nombre para asignación por html hacia el HUB -->
  <input id="hdId" type="hidden" />
  <input id="hdUserName" type="hidden" />
-
- <!-- fin chat -->
+ <!-- Fin ventana del chat -->
  </div>
  </div>
  </div>
+ <!-- Pie del chat (Input y botón de envio) -->
  <div class="footerR">
  <div class="Input">
  <textarea id="inputMessage" class="inputChat" placeholder="Escriba su mensaje..."></textarea>
@@ -206,11 +229,9 @@
  </div>
  <div>
  </div>
-
+ <!-- Scripts Creados para las funciones -->
  <script src="Scripts/Random.js"></script>
  <script src="Scripts/Animation.js"></script>
  <script src="Scripts/OcultarModal.js"></script>
-
-
 </body>
 </html>