node、express、jade和socket.io搭建實時聊天框架

nodejs版本v0.10.28

 "socket.io"  "version": "1.0.4"

在項目目錄下運行

npm install socket.io 安裝socket.io

npm start 啓動項目。

效果圖：

app.js代碼以下：

 1 var express = require('express');
 2 var http = require('http');
 3 var path = require('path');
 4 var routes = require('./routes/index');
 5 var app = express();
 6 var server = http.createServer(app);
 7 var io = require('socket.io').listen(server);
 8 var catchPhrases = ['why i oughta','nyuk nyuk nyuk','poifect!','spread out!','say a few syllables!','soitenly!'];
 9 
10 // view engine setup
11 app.set('views', path.join(__dirname, 'views'));
12 app.set('view engine', 'jade');
13 app.set('veiw options',{layout:true});
14 
15 app.use('/', routes);
16 
17 app.get('/stooges/chat',function(req,res,next){
18     res.render('chat');
19 });
20 
21 io.sockets.on('connection',function(socket){
22     var sendChat = function(title,text){
23         socket.emit('chat',{title:title,contents:text});
24     };
25     setInterval(function(){
26         var randomIndex = Math.floor(Math.random()*catchPhrases.length);
27         sendChat('stooge',catchPhrases[randomIndex]);
28     },5000);
29     sendChat('Welcome to stooge chat','the stooges are on the line');
30     socket.on('chat',function(data){
31         sendChat('you',data.text);
32     });
33 });
34 
35 
36 /// catch 404 and forward to error handler
37 app.use(function(req, res, next) {
38     var err = new Error('Not Found');
39     err.status = 404;
40     next(err);
41 });
42 
43 /// error handlers
44 // development error handler
45 // will print stacktrace
46 if (app.get('env') === 'development') {
47     app.use(function(err, req, res, next) {
48         res.status(err.status || 500);
49         res.render('error', {
50             message: err.message,
51             error: err
52         });
53     });
54 }
55 
56 // production error handler
57 // no stacktraces leaked to user
58 app.use(function(err, req, res, next) {
59     res.status(err.status || 500);
60     res.render('error', {
61         message: err.message,
62         error: {}
63     });
64 });
65 
66 server.listen(8080);

chat.jade代碼以下：

 1 extends layout
 2 head
 3     block scripts
 4         script(type='text/javascript',src='/socket.io/socket.io.js')
 5         script(type='text/javascript').
 6             var socket = io.connect('http://localhost:8080');
 7             socket.on('chat',function(data){
 8                 document.getElementById('chat').innerHTML = '<p><b>' + data.title + '</b>:' + data.contents + '</p>';
 9                 }
10             );
11             var submitChat = function(form){
12                 socket.emit('chat',{text:form.chat.value});
13                 return false;
14             };    
15         
16 body
17     block content
18         div#chat
19 
20         form(onsubmit='return submitChat(this);')
21             input#chat(name = 'chat',type='text')
22             input(type='submit',value='Send chat')