一.要点分析

(1) 对于socket.io，它是基于事件响应的socket,可以进行长时间的消息传递。其服务端使用的方法主要不过就是两个,on()和emit()

io.on('connetcion',function(socket) {    socket.on('event',function(data) {        /*执行相应的方法*/        //通知客户端执行事件        socket.emit('new event',{data:'mydata'});    });});

(2)搭建好服务器端后就进行客户端连接

//引入socketvar socket = io();socket.on('event',function(data) {    /*执行事件*/        //通知服务器端执行事件    socket.emit('new event',{data:'mydata'});});

(3)接下来就是对视图的搭建

二.源代码和注释分析

(1) app.js:

//引入express框架var express = require('express');var app = express();//服务端创建var server = require('http').createServer(app);//使用socket.io进行通信var io = require('socket.io')(server);var port = process.env.POST || 8000;//服务开启server.listen(port,function() {    console.log("The chatting room is running at port: " + port);});//使用静态文件目录app.use(express.static(__dirname + '/public'));//当前进入聊天室的人数var usersNumber = 0;//客户端通过socket链接服务端io.on('connection',function(socket) {    //默认没有用户进入    var addUser = false;        //客户端发送新的消息    socket.on('new message',function(data) {        //广播所有在线客户端新消息的产生        socket.broadcast.emit('new message',{            userName: socket.userName,            message: data        });    });    //客户端发送有用户加入的消息    socket.on('add user',function(userName) {        if(addUser) return;        socket.userName = userName;        usersNumber++;        addUser=true;        //向客户端发送登陆成功        socket.emit('login',{            userName: socket.userName,            usersNumber:usersNumber        });        //广播有新用户加入        socket.broadcast.emit('new user join',{            userName:socket.userName,            usersNumber:usersNumber        });    });    //客户端断开链接    socket.on('disconnect',function() {        if(addUser) {            usersNumber--;            //通知所有客户端有用户离开            socket.broadcast.emit('user left',{                userName:socket.userName,                usersNumber:usersNumber            });        }    });});

(2) main.js:

$(function(){    //创建socket与服务端链接    var socket = io();    //通过jquery获取dom节点    var $logPage = $('.logPage');    var $logList = $('.logList');    var $chatPage = $('.chatPage');    var $messageContent = $('.messageContent');    var $messageList = $('.messageList');    var $messageInput = $('.messageInput');    var $usernameInput = $('.usernameInput');    var $sendMessage = $('.sendMessage');    var $addUser = $('.addUser');    var $loginPage = $('.loginPage');    var $messageInputBar = $('.messageInputBar');    //默认当前登陆输入框为焦点状态    var $currentInput = $usernameInput.focus();    //用于记录当前的用户名    var userName;    var connect = false;    //监听服务器是否有新的消息产生，有的话就显示消息到列表    socket.on('new message',function(data) {        //在列表框中添加消息，类型为收取的消息        addNewMessage(data,2);    });    //监听服务器是否登陆成功，成功就显示成功登陆    socket.on('login',function(data) {        userLogin(data);    });    //监听服务器是否有新的用户加入，有的话就显示    socket.on('new user join',function(data) {        newUserJoin(data);    });    //监听服务器是否有用户离开    socket.on('user left',function(data){        userLeft(data);    });    function userLogin(data) {        //登陆成功，输出信息        connect = true;        $logList.empty();        $logList.append('
Name: ' + data.userName + ' is joined
');        $logList.append('
CurrentNumber: ' + data.usersNumber + '
');    }    function addNewMessage(data,state) {        if(state == 1) {            $messageList.append(            '
    
     
      
       ' + data.userName +'
      
      
       '+data.message+'
      
     
    
');        }else {            $messageList.append(            '
    
     
      
       ' + data.userName +'
      
      
       '+data.message+'
      
     
    
');        }    }    function newUserJoin(data) {        $logList.empty();        $logList.append('
Name: ' + data.userName + ' is joined
');        $logList.append('
CurrentNumber: ' + data.usersNumber + '
');    }    function userLeft(data) {        $logList.empty();        $logList.append('
User: ' + data.userName + ' has left
');        $logList.append('
CurrentNumber: ' + data.usersNumber + '
');    }    //当用户点击发送消息时的事件    $sendMessage.click(function(event) {        /* Act on the event */        var message = $messageInput.val();        if (message && connect) {      $messageInput.val('');      addNewMessage({        userName: userName,        message: message      },1);      socket.emit('new message', message);    }    });        //当用户点击登陆事件    $addUser.click(function(event) {        /* Act on the event */        userName = $usernameInput.val().trim();        if (userName) {      $loginPage.fadeOut();      $chatPage.show();      $messageInputBar.show();      $loginPage.off('click');      $currentInput = $messageInput.focus();      socket.emit('add user', userName);    }    });});

(3) index.html:

        
        
        
        
                        
    
     Chatting Room
    
        
    
            
     
                
      
                    
       
                
      
            
     
            
     
                
      
                
      
            
     
            
     
                
      
       Please input your name
      
                
      
                    
       
                        
                            
       
                    
       
                        
        
         Login
        
                    
       
                
      
            
     
        
    
        
                    

(4) 使用aui视图框架