Chat fácil con solo html y websocket – chatSocketAchex, este plugin es es el vivo ejemplo del uso de websocket de forma efectiva , el plugin esta realizado con la ayuda de un servidor websocket achex.ca que es un servidor gratuito, este plugin tiene la funcionalidad de trabajar con jquery implementando un widget encontrado en bootsnipp.com que es el siguiente: http://bootsnipp.com/snippets/featured/chat-widget , este plugin tiene la facilidad de implementar un componente que muestra a las personas conectadas en el cuarto actual.
Demostración: http://oscaruhp.github.io/chatSocketAchex/
1.- Para la implementación tenemos que incluir primero los enalces del plugin, jquery, bootstrap y los css del chat
<!-- Bootstrap and JQuery --> <script src="jquery.min.js"> </script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Plugin --> <link rel="stylesheet" type="text/css" href="chatSocketAchex.css"> <script src="chatSocketAchex.js"></script>
2.- Posteriormente a eso necesitamos incluir también los elementos donde queremos que se muestre nuestro chat, por ejemplo un div.
<div id="Elchat"></div>
3.- Como tercer paso tenemos que configurar la salida el cuarto de conversación por ejemplo en este caso se usa RoomDeveloteca puedes ponerle miroom o lo que gustes:
$('#Elchat').ChatSocket( {"Room"<span class="token punctuation">:</span><span class="token string">"RoomDeveloteca"</span><span class="token punctuation">, "</span>pass"<span class="token punctuation">:</span><span class="token string">"1234"</span><span class="token punctuation">,}</span>);
4.- Algunas opciones que tienes disponibles son entendibles:
{
Room:"RoomDeveloteca", // important - room or user
pass:"1234", // important - pass of room or user
lblTitulChat:" Chat Develoteca.com ", //Chat Name
lblCampoEntrada:"Menssage",
lblEnviar:"Send",
textoAyuda:"Develoteca", // Help button
Nombre:"Anónimo", // default Name.
urlImg:"http://placehold.it/50/55C1E7/fff&text=U", // Avatar chat
btnEntrar:"btnEntrar",
btnEnviar:"btnEnviar",
lblBtnEnviar:"Enviar",
lblTxtEntrar:"txtEntrar",
lblTxtEnviar:"txtMensaje",
lblBtnEntrar:"Enter", // Joined button
idDialogo:"DialogoEntrada",
classChat:"", // add class chat
idOnline:"ListaOnline", // id control users joined
lblUsuariosOnline:"Users joined", // text users online
lblEntradaNombre:"Name:",
panelColor:"success"
}
The post Chat fácil con solo html y websocket – chatSocketAchex appeared first on Develoteca.