Saltar al contenido
Consejos

Plantilla de aplicación de chat anónimo público Bootstrap

Pasando al frontend, añadamos una nueva carpeta llamada public . Esta carpeta contendrá nuestra página y los archivos de JavaScript. Añadamos un nuevo archivo llamado style.css con el contenido que se muestra a continuación, que contendrá nuestra definición de estilo para la página.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960@importurl("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");. chat{lista: ninguno;margen:0;acolchado:0;}.chat li{margin-bajo:10px;acolchado-bajo:5px;borde-bajo:1px punteado #B3A9A9;}.chat li.izquierda.chat-body{margin-izquierda:60px;}.chat li.derecha.chat-body{margin-derecha:60px;}. chat li .chat-body p{margin:0;color:#777777;}.panel.slidedown.glyphicon, .chat.glyphicon{margin-derecha:5px;}.body-panel{overflow-y: scroll;height:250px;}::-webkit-scrollbar-track{-webkit-box-shadow: inset 006pxrgba(0,0,0,0. 3);color-de-fondo:#F5F5F5;}::-webkit-barra-de-pantalla{ancho:12px;color-de-fondo:#F5F5F5;}::-webkit-barra-de-pantalla{-webkit-caja-sombra: inset 006pxrgba(0,0,0,.3);color-de-fondo:#555;}

css

Plantilla de aplicación de chat anónimo público Bootstrap
Plantilla de aplicación de chat anónimo público Bootstrap

Añade otro archivo llamado index.html con el siguiente marcado.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<!DOCTYPE html;<html;www. doktype.com;! -- ¡Último CSS compilado y minificado --;<linkintegrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u "crossorigin="anonymous"--;<! -- Tema opcional --;<linkintegrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooP2bWYgmgJQIXwl/Sp "crossorigin="anonymous"><scriptsrc="https://code. jquery.com/jquery-2.2.4.min.js "integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script><!-- Último JavaScript compilado y minificado --;<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3. 7/js/bootstrap.min.js "integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa "crossorigin="anonymous"</script &gt &gt &gt &gt >scriptsrc="https://js.pusher.com/4.0/pusher.min.js">/script ]<scriptsrc="index. js"²;/script²;²;/cabeza²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ Refrescar</aunque no se puede hacer nada más; Disponible</aña;/li>>;li>;a&;a&;span&&;/span&;a&;a&&;a&;t;; ...lejos</span; Away</a&&&li&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&; Firme la salida</a textarearows="3"</textarea,||botón span="Send</button,|||span,|||div;;|div;|||div;;|||scripttype="text/template"|;li clearfix"|;span pull-left"|;img src="http: //placehold. it/50/55C1E7/fff&text=U" alt="User Avatar"/C1E7/fff&text=U" alt="User Avatar"/C1E7/spandj;div clearfix"/p scripttype="text/template"³;³;li;³;div clearfix"³;p³;{{{body}}</p³;³;/div³;³;³;/li;³;/script³;³;³³³³³³³³³³³³³³³³³³³³³">pre>
html


Estoy usando una plantilla de bootsnipp que ha sido ligeramente modificada para mostrar sólo el nombre y el mensaje.



Añade un nuevo archivo llamado index.js con el siguiente contenido. Recuerda añadir los detalles de la aplicación Pusher:




1234567891011121314151617181920212223242526$(document).ready(function(){var pusher =newPusher($0027APP_SECRET$0027,{ cluster:$0027APP_CLUSTER$0027, encrypted:false});let channel = pusher. subscribe($0027public-chat$0027); channel.bind($0027message-added$0027, onMessageAdded);$($0027#btn-chat$0027).click(function(){const message =$("#message"). val();$("#message").val("");$(".chat").append(template);//enviar mensaje $.post("http://localhost:5000/message",{ mensaje });});functiononMessageAdded(data){let template =$("#new-message").html(); template = template.replace("{{body}}", data.message);$(".chat").append(template);}});
javascript

Con el código de este archivo, obtenemos el mensaje para enviar desde la página, y luego llamamos al servidor con el mensaje. Después de eso, nos conectamos con Pusher creando un nuevo objeto Pusher con el App Secret y el Cluster que fijaste anteriormente.

Nos suscribimos a un canal y a un evento llamado "Mensaje-Añadido". El canal es un canal público, así que puede ser nombrado de la manera que quieras. He elegido ponerle el prefijo "público" a la mía, pero es mi propia convención, ya que no hay reglas para un canal público. Sin embargo, los canales privados son prefijados con privado y los canales de presencia son prefijados con presencia. Lea más sobre los canales y los tipos de canales aquí.

Nos vinculamos al evento de clic del botón de chat de la página, luego recuperamos el mensaje del cuadro de texto de la página y lo enviamos al servidor con el nombre de usuario. Con todo lo que tenemos configurado, podemos ejecutar el inicio de la aplicación ejecutando npm start. Aquí hay un vistazo de cómo funciona en mi ordenador.