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('<li><p>Name: ' + data.userName + ' is joined</p><li>');
        $logList.append('<li><p>CurrentNumber: ' + data.usersNumber + '</p></li>');
    }


    function addNewMessage(data,state) {
        if(state == 1) {
            $messageList.append(
            '<div class="aui-chat-item aui-chat-right"><div class="aui-chat-inner"><div class="aui-chat-name">' + data.userName +'</div><div class="aui-chat-content">'+data.message+'</div></div></div>');
        }else {
            $messageList.append(
            '<div class="aui-chat-item aui-chat-left"><div class="aui-chat-inner"><div class="aui-chat-name">' + data.userName +'</div><div class="aui-chat-content">'+data.message+'</div></div></div>');
        }
    }

    function newUserJoin(data) {
        $logList.empty();
        $logList.append('<li><p>Name: ' + data.userName + ' is joined</p></li>');
        $logList.append('<li><p>CurrentNumber: ' + data.usersNumber + '</p></li>');
    }

    function userLeft(data) {
        $logList.empty();
        $logList.append('<li><p>User: ' + data.userName + ' has left</p><li>');
        $logList.append('<li><p>CurrentNumber: ' + data.usersNumber + '</p></li>');
    }

    //當用戶點擊發送消息時的事件
    $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:

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.2.0.css">
    <style type="text/css" media="screen">
        * {
            font-family: 'Microsoft Yahei';
        }
        .header {
            position: fixed;
        }
        .content {
            padding-top: 2rem;/*有頂部固定導航條時設置*/ padding-bottom: 5rem;/*有底部固定導航條時設置*/
        }
        .chatPage {
            display: none;
        }
        .logPage {
            background-color:#00FFFF;
            border-radius: .2rem;
        }
        .messageInputBar {
            display: none;
        }
            .chatItem {

            }
    </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav header">Chatting Room</header>
        <div class="aui-content-padded content">
            <section class="logPage">
                <div class="">
                    <ul class="logList"></ul>
                </div>
            </section>
            <div class="chatPage aui-content">
                <section class="aui-chat messageList">
                </section>
            </div>
            <div class="loginPage">
                <div>Please input your name</div>
                <div class="aui-row">
                    <div class="aui-col-xs-9">
                        <input type="text" placeholder="Username" class="usernameInput">
                    </div>
                    <div class="aui-col-xs-3">
                        <div class="aui-btn aui-btn-primary addUser">Login</div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="messageInputBar aui-bar aui-bar-tab aui-padded-l-15">
            <div class="aui-bar-tab-item">
                <input type="text" placeholder="Message" class="messageInput">
            </div>
            <div class="aui-bar-tab-item">
                <div class="aui-btn aui-btn-primary sendMessage">Send</div>
            </div>
        </footer>
    </body>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="./js/main.js"></script>
</html>

(4) 使用aui視圖框架

github倉庫連接
聊天室連接