一小时的极限编程, 关于socket.io

最新推荐文章于 2024-10-01 20:12:28 发布

zksuperisaac

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量125

点赞数

文章标签： socket.io javascript nodejs 极限编程. ViewUI

本文链接：https://blog.csdn.net/zksuperisaac/article/details/84091188

版权

昨天晚上花了一小时，体验了下快速极限编程，使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器，socket.io果然对于简单而强大


zengke:mchat$ date
Mon Nov 28 22:46:02 CST 2011
...
zengke:mchat$ date
Mon 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[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


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" onclick="say();">Send</button>
      </div>
    </div>
  </body>
</html>