socket, javascript, jquery [转帖]

昨天晚上花了一小时,体验了下快速极限编程,使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器,socket.io果然对于简单而强大 
Shell代码  
zengke:mchat$ date  
Mon Nov 28 22:46:02 CST 2011  
...  
zengke:mchat$ date  
Mon Nov 28 23:40:30 CST 2011  

服务器端代码 node.js 
Javascript代码  
var express = require('express');  
  
var app = express.createServer();  
var io = require('socket.io').listen(app);  
  
app.configure(function () {  
        app.use(express.bodyParser());  
        app.use(express.methodOverride());  
        app.use(express.logger());  
        app.use(express.bodyParser());  
        app.use(express.cookieParser());  
        app.use(express.session({  
                    secret: "skjghskdjfhbqigohqdioukd",  
                        }));  
    });  
  
var conns = {};  
io.sockets.on('connection', function (socket) {  
        var cid = socket.id;  
        for(var ccid in conns) {  
            var soc = conns[ccid];  
            soc.emit('join', {cid: socket.id});  
        }  
        conns[cid] = socket;  
  
        socket.on('disconnect', function () {  
                delete conns[cid];  
                for(var cid in conns) {  
                    var soc = conns[cid];  
                    soc.emit('quit', {cid: cid});  
                }  
            });  
  
        socket.on('say', function (data) {  
                data.cid = cid;  
                for(var ccid in conns) {  
                    var soc = conns[ccid];  
                    soc.emit('broadcast', data);  
                }  
            });  
    });  
app.get('/', function (req, res) {  
        res.sendfile(__dirname + '/public/index.html');  
    });  
app.use('/public', express.static(__dirname + '/public'));  
  
app.listen(3000);  
console.log('daemon start on http://localhost:3000');  


浏览器端javascript 
Javascript代码  
var socket = io.connect("http://localhost");  
  
socket.on('quit', function (data) {  
        status('Client ' + data.cid + ' quits!');  
    });  
  
socket.on('join', function (data) {  
        status('Client ' + data.cid + ' joins!');  
    });  
  
socket.on('broadcast', function (data) {  
        $('#thread').append($('<div>').html('client ' + data.cid + ' says:<br/>' + data.w));  
    });  
  
function say() {  
    var words = $('#text').val();  
    if($.trim(words)) {  
        socket.emit('say', {w: words});  
        $('#text').val('');  
    }  
}  
  
function status(w) {  
    $('#status').html(w);  
}  
  
function initialize() {  
    $(document).delegate('textarea', 'keydown', function (evt) {  
            //console.info(evt.keyCode);  
            if(evt.keyCode == 13 && evt.ctrlKey) {  
                $('#send').focus().click();  
            }  
        });  
}  


页面HTML代码 
Html代码  
<html>  
  <head>  
    <script src="/public/jquery-1.7.min.js"></script>  
    <script src="/socket.io/socket.io.js"></script>  
    <script src="/public/mchat.js"></script>  
    <style type="text/css">  
      #content { width: 600px; margin: 0 auto; }  
      textarea { width: 400px; height: 40px;}  
    </style>  
    <script>  
      $(document).ready(function() {  
         initialize();  
      });  
    </script>  
  </head>  
  <body>  
    <div id="content">  
      <h1>Micro Chat</h1>  
      <div id="status"></div>  
      <div id="thread">  
      </div>  
      <div>  
        <textarea id="text" name="text"></textarea>  
      </div>  
      <div>  
        <button id="send" onclick="say();">Send</button>  
      </div>  
    </div>  
  </body>  
</html>  

你可能感兴趣的:(JavaScript,jquery,socket)