socket.io实现在线聊天页面

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

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

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

//引入socket
var 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视图框架

github仓库链接
聊天室链接