一小时的极限编程, 关于socket.io
昨天晚上花了一小时，体验了下快速极限编程，使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器，socket.io果然对于简单而强大zengke:mchat$ dateMon Nov 28 22:46:02 CST 2011...zengke:mchat$ dateMon Nov 28 23:40:30 CST 2011
服务器端代码 node.js
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; soc.emit('join', {cid: socket.id}); } conns = socket; socket.on('disconnect', function () { delete conns; for(var cid in conns) { var soc = conns; soc.emit('quit', {cid: cid}); } }); socket.on('say', function (data) { data.cid = cid; for(var ccid in conns) { var soc = conns; 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
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><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" >Send</button> </div> </div></body></html>
http://dl.iteye.com/upload/attachment/597311/9495680f-8df1-3d0a-8a1b-256d2f249b96.png
页:
[1]