(1) 對(duì)于socket.io，它是基于事件響應(yīng)的socket,可以進(jìn)行長(zhǎng)時(shí)間的消息傳遞。其服務(wù)端使用的方法主要不過(guò)就是兩個(gè),on()和emit()

io.on("connetcion",function(socket) {
    socket.on("event",function(data) {
        /*執(zhí)行相應(yīng)的方法*/
        //通知客戶端執(zhí)行事件
        socket.emit("new event",{data:"mydata"});
    });
});

(2)搭建好服務(wù)器端后就進(jìn)行客戶端連接

//引入socket
var socket = io();

socket.on("event",function(data) {
    /*執(zhí)行事件*/    
    //通知服務(wù)器端執(zhí)行事件
    socket.emit("new event",{data:"mydata"});
});

(3)接下來(lái)就是對(duì)視圖的搭建

(1) app.js:

//引入express框架
var express = require("express");
var app = express();

//服務(wù)端創(chuàng)建
var server = require("http").createServer(app);
//使用socket.io進(jìn)行通信
var io = require("socket.io")(server);
var port = process.env.POST || 8000;

//服務(wù)開(kāi)啟
server.listen(port,function() {
    console.log("The chatting room is running at port: " + port);
});

//使用靜態(tài)文件目錄
app.use(express.static(__dirname + "/public"));

//當(dāng)前進(jìn)入聊天室的人數(shù)
var usersNumber = 0;

//客戶端通過(guò)socket鏈接服務(wù)端
io.on("connection",function(socket) {
    //默認(rèn)沒(méi)有用戶進(jìn)入
    var addUser = false;
    
    //客戶端發(fā)送新的消息
    socket.on("new message",function(data) {
        //廣播所有在線客戶端新消息的產(chǎn)生
        socket.broadcast.emit("new message",{
            userName: socket.userName,
            message: data
        });
    });
    //客戶端發(fā)送有用戶加入的消息
    socket.on("add user",function(userName) {
        if(addUser) return;
        socket.userName = userName;
        usersNumber++;
        addUser=true;
        //向客戶端發(fā)送登陸成功
        socket.emit("login",{
            userName: socket.userName,
            usersNumber:usersNumber
        });
        //廣播有新用戶加入
        socket.broadcast.emit("new user join",{
            userName:socket.userName,
            usersNumber:usersNumber
        });
    });
    //客戶端斷開(kāi)鏈接
    socket.on("disconnect",function() {
        if(addUser) {
            usersNumber--;
            //通知所有客戶端有用戶離開(kāi)
            socket.broadcast.emit("user left",{
                userName:socket.userName,
                usersNumber:usersNumber
            });
        }
    });
});

(2) main.js:

$(function(){
    //創(chuàng)建socket與服務(wù)端鏈接
    var socket = io();
    //通過(guò)jquery獲取dom節(jié)點(diǎn)
    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");

    //默認(rèn)當(dāng)前登陸輸入框?yàn)榻裹c(diǎn)狀態(tài)
    var $currentInput = $usernameInput.focus();

    //用于記錄當(dāng)前的用戶名
    var userName;
    var connect = false;

    //監(jiān)聽(tīng)服務(wù)器是否有新的消息產(chǎn)生，有的話就顯示消息到列表
    socket.on("new message",function(data) {
        //在列表框中添加消息，類(lèi)型為收取的消息
        addNewMessage(data,2);
    });

    //監(jiān)聽(tīng)服務(wù)器是否登陸成功，成功就顯示成功登陸
    socket.on("login",function(data) {
        userLogin(data);
    });

    //監(jiān)聽(tīng)服務(wù)器是否有新的用戶加入，有的話就顯示
    socket.on("new user join",function(data) {
        newUserJoin(data);
    });

    //監(jiān)聽(tīng)服務(wù)器是否有用戶離開(kāi)
    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 + "
");
    }

    //當(dāng)用戶點(diǎn)擊發(fā)送消息時(shí)的事件
    $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);
    }
    });    

    //當(dāng)用戶點(diǎn)擊登陸事件
    $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視圖框架

github倉(cāng)庫(kù)鏈接
聊天室鏈接