socket, javascript, jquery [转帖]

scholltop

浏览: 301256 次
性别:
来自: 武汉

最近访客更多访客>>

地方疙瘩人

kodo521

猫狸粽子

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

分享到：

在Rails中配置多个邮件服务器发邮件 | 字符串对象转换model对象

2012-06-29 18:33
浏览 932
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

socket, javascript, jquery [转帖]

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

socket, javascript, jquery [转帖]

评论

发表评论

相关推荐

基于html2canvas的长图分享

省地市联动js

一些常用的ui框架组合

连续点赞异步触发计数

jQuery.fn.extend(object)合并相同单元列

js解决搜索框传参数的一种方案

基于semantic既可以下拉框也可以文本框输入

ajax提交json数据返回文件流下载excell

rails全国订单发货热力图

ruby调用echart的柱状饼状图

Rials实现下拉框联动的两种实现方式

js动态生成的节点关联

扫码枪发商品快递时录入发货快递单号到对应产品订单明细

moment.js实现客户端显示本地时间

联动下拉框的两种实现方式

css浮动回到顶部按钮

jquery多处更新处理

JS类的建立和使用

文本搜索框下拉多选框效果

JS操作DOM元素属性和方法

最近访客更多访客>>