Chat en tu navegador con node.js y Faye

July 12, 2011

Siguiendo con los posts sobre faye, vamos a realizar un ejemplo práctico y muy vistoso, vamos a realizar un sencillo pero funcional chat web en este post.

Lo primero es crear el servidor node: Solo tenemos que incluir la extensión de faye para node

1
var Faye = require('./faye/faye-node.js'); var fayeServer = new Faye.NodeAdapter({  mount:    '/'}); fayeServer.listen(8888);

A este fichero lo llamaremos node.js, ahora desde bash lanzamos el servidor que acabamos de crear: $ node node.js
Y ya tenemos nuestro “servidor de chat” corriendo, preparado para funcionar En el lado cliente creamos un sencillo html y un script para gestionar el chat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript" src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script">https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></scri...</a> type="text/javascript" src="faye/faye-browser-min.js"></script> <script type="text/javascript">// <![CDATA[
$(function() {
var client = new Faye.Client('<a href="http://localhost:8888/'">http://localhost:8888/'</a>);
var nick = "";

client.subscribe('/chat', function(message) {
$("#chat").append("<div><strong>"+message.nick+"</strong>: "+message.text+"</div>")

});

$(".nick form").submit(function() {
nick=$(".nick input[name=nick]").val();
$(".nick").hide();
$(".chatMessage").show();
return false;
})

$(".chatMessage form").submit(function() {
text = $(".chatMessage input[name=message]").val();
client.publish('/chat', {
nick : nick,
text: text
});
return false;
})
});

></script>

<div class="nick">
<form action="#" enctype="multipart/form-data" method="POST">
<label>Tu nick:</label>&nbsp; <input name="nick" type="text" />
<input type="submit" value="Entrar al chat!!" />
</form>
</div>

<div class="chatMessage" style="display: none;">
<form action="#" enctype="multipart/form-data" method="POST">
<label>Tu mensaje:</label>&nbsp; <input name="message" type="text" />
<input type="submit" value="Enviar" />
</form>
</div>

To show the comments is mandatory accept cookie policy.

Front-end and back-end developer.
#formula1, good conversations and small details lover.