曾经在幽幽暗暗反反复复中追问，才知道平平淡淡从从容容才是真，听着歌曲，写博客，感觉就来了。

今天我们主要看一下Socket.IO实时通讯，先看一下界面。

.row
 .col-md-9
  .panel.panel-primary
   .panel-heading
    h3.panel-title(style='font-size:13px;') Chat Message
   .panel-body#div_msgbody(style='min-height:590px;max-height:590px;overflow:auto;max-width:750px;')
    #div_msg.panel-content(style='word-wrap:break-word;word-break: break-word;')
   .panel-footer
    #div_footer(style='height:36px;line-height:36px')    
     .row
      .col-md-8(style='color:#3f51b5;font-weight:bold') Chat History:
        input#chat_history
      .col-md-4.right-align-text 
       a#link_clear(href='javascript:void(0)') Clear
  .row
   .col-md-10
    input#txt_msg.form-control(type='text' style='height:40px;resize:none' maxlength=200 placeholder='Input message here.')
   .col-md-2.right-align-text
    button#btn_send.k-button.k-primary(type='button' style='height:40px;width:100%')
     span.glyphicon.glyphicon-send
     span(style='margin-left:5px') Send
 .col-md-3
  .panel.panel-primary
   .panel-heading
    h3.panel-title(style='font-size:13px;') Members
   .panel-body.panel-inner-height(style='overflow:auto;')
    #div_users.panel-content(style='word-break: break-word;')
   .panel-footer
    .left-margin-10 
     span.text-color#total Member Count:0
 
#chat_historyWindow(style='display:none')
  #chat_historyContent.panel-content(style='word-wrap:break-word;word-break: break-word;')
span#notify
 
 
block scripts
 script(type='text/javascript' src='/javascripts/local/other/chat.js')

这就是聊天界面，左边是聊天内容，右边是参加聊天的用户。要实现这个聊天，之前我们在博客中提到了SingalR，可以用于ASP.NET，WinForm以及WPF。今天我们要使用Node.js平台上的Socket.IO.js。首先要在项目中引用这个扩展包。

安装好之后，在Package.json中就会自动加入这个包，管理起来。

"dependencies": {
    "array-splice": "^0.1.1",
    "body-parser": "~1.8.4",
    "busboy": "^0.2.12",
    "cassandra-driver": "^3.0.0",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "express": "~4.9.8",
    "express-session": "1.12.1",
    "gridfs-stream": "^1.1.1",
    "jade": "^1.11.0",
    "log4js": "^0.6.29",
    "mongoose": "~4.2.3",
    "morgan": "^1.6.1",
    "request": "^2.67.0",
    "serve-favicon": "~2.1.3",
    "socket.io": "^1.3.7",
    "string.prototype.endswith": "^0.2.0",
    "string.prototype.startswith": "^0.2.0"
  }

我在这里还使用的是老版本，哈哈，OK，老版本新版本都能用。我们进入主题，在第一篇环境搭建中，我就说了我们的启动入口是www文件。

在www文件中，我们初始化了SocketIO的一些东西。

var chatUserCount = 0;
var chatUsers = {};
var server = app.listen(app.get('port'), function() {
    debug('Express server listening on port ' + server.address().port);
});
 
var io = require('socket.io')(server);
 
io.on('connection', function (socket) {
    socket.on('joinchat', function (obj) {
        console.log('a user connected:'+obj.UserName);
        socket.name = obj.UserName;
        if (!chatUsers.hasOwnProperty(obj.UserName)) {
            chatUsers[obj.UserName] = obj;
            chatUserCount++;
        }
 
    io.emit('joinchat', { chatUsers: chatUsers ,chatUserCount: chatUserCount,joinedUser: obj});
    });
     
    socket.on('leftchat', function () {
            console.log('a user left');
            if (chatUsers.hasOwnProperty(socket.name)) {
                var obj = chatUsers[socket.name];
                delete chatUsers[socket.name];
                chatUserCount--;
         
                io.emit('leftchat', { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });
            }
        });
 
    socket.on('disconnect', function () {
         if (chatUsers.hasOwnProperty(socket.name)) {
            var obj = chatUsers[socket.name];
            delete chatUsers[socket.name];
            chatUserCount--;
 
            io.emit('leftchat', { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });
        }
    });
 
    socket.on('message', function (obj) {
        io.emit('message', obj);
    });
 
    socket.on('error', function(exception) {
    console.log('SOCKET ERROR');
    socket.destroy();
    });
});

在这里当客户端有用户进入聊天时，就会发射joinchat事件，后台就会触发joinchat事件。当客户端和服务端建立连接时，服务端就会发射广播joinchat，所有连接的客户端都会收到这个广播，悄无声息刷新界面。当客户端用户失去连接（关闭浏览器）时，就会自动发射disconnect事件，服务端就会触发disconnect事件，并将结果广播到各个客户端，客户端自动刷新页面。当用户unload该页面时，会触发leftchat。当客户端发信息时，就会触发message事件，将该用户的消息发送到其他人。这个聊天界面的过程就是这样，很简单。

接下来我们来看一下客户端代码。

var popupNotification = $("#notify").kendoNotification({
    autoHideAfter: 2000,
    height: 60,
    stacking: "down"
}).data("kendoNotification");
 
var socket = io();
var loginUser = sessionStorage.getItem("LoginUser");
if (loginUser == null) {
  window.location.href = "/";
  return;
}
var userObj = eval("(" + loginUser + ")");
     
sessionStorage.removeItem('chatUser');
socket.emit("joinchat", userObj);
socket.on('joinchat', function (data) {
    if (!sessionStorage.getItem('chatUser')) {
        sessionStorage.setItem('chatUser', JSON.stringify({ "user": [] }));
    }
     
    var usersObj = JSON.parse(sessionStorage.getItem('chatUser'));
    if (usersObj.user.indexOf(data.joinedUser.UserID) == -1) {
        usersObj.user.push(data.joinedUser.UserID);
        sessionStorage.setItem('chatUser', JSON.stringify(usersObj));
        setchartdetail(data);
         
        if (data.joinedUser.UserID != userObj.UserID) {
            popupNotification.show('<span style="color:red">' + data.joinedUser.FullName + ' joined in.</span>', 'info');
        }
    }
});
 
socket.on('leftchat', function (data) {
    var usersObj = JSON.parse(sessionStorage.getItem('chatUser'));
    var index = usersObj.user.indexOf(data.leftUser.UserID);
     
    usersObj.user.splice(index, 1);
    sessionStorage.setItem('chatUser', JSON.stringify(usersObj));
    setchartdetail(data);
    popupNotification.show('<span style="color:red">' + data.leftUser.FullName + ' left.</span>', 'warning');
});

当用户进入这个页面时，我们发射joinchat，并将当前登录用户信息发送到服务端，服务端再将该用户信息以及计算好的用户总数广播到各个客户端。注意这里我们为了提醒用户，用到了kendoNotification，效果如下，当有人进入或者离开时，会出现popup提示。

当用户离开时，如上，当用户进入时，如下

OK，接下来我们看一下最主要的部分，聊天。

$("#btn_send").click(function () {
    sendmsg();
})
 
$("#txt_msg").keydown(function (e) {
    if (e.keyCode == 13) {
        sendmsg();
    }
});
 
function sendmsg() {
    var msg = $.trim($("#txt_msg").val());
    if (msg) {
        var msgObj = { user: userObj, msg: msg };
        socket.emit("message", msgObj);
    }
     
    $("#txt_msg").val("");
}

上面就是点击SEND按钮或者文本框回车发送消息的代码，后台接到message广播给客户端。

socket.on('message', function (data) {
    var msgObj = data;
     
    var userAvatar = '/images/userlogin.png';
     
    if (msgObj.user.UserName == userObj.UserName) {
        $("#div_msg").append("<div class='row-margin'>" 
        + "<img src='" + userAvatar + "' style='height:40px;width:40px;right:-660px;position:relative'/>" 
        + "<span style='right:-530px;position:relative'>" + msgObj.user.FullName + "</span>" 
        + "<div class='demo clearfix fr'>" 
        + "<span class='triangle'></span>" 
        + "<div class='article' style='word'>" + msgObj.msg 
        + "</div></div></div>");
         
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');
        });
    }
    else {
        $("#div_msg").append("<div class='row-margin'>" 
        + "<img src='" + userAvatar + "' style='height:40px;width:40px;position:relative'/>" 
        + "<span style='left:10px;position:relative'>" + msgObj.user.FullName + "</span>" 
        + "<div class='demo clearfix'>" 
        + "<span class='triangle'></span>" 
        + "<div class='article'>" + msgObj.msg 
        + "</div></div></div>");
         
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');
        });
    }
     
    var objDiv = document.getElementById("div_msgbody");
    objDiv.scrollTop = objDiv.scrollHeight;
});

其实这里不过是一个拼message的过程，如果发送者是本人，则消息靠右显示，否则靠左显示。看看James和lilei的聊天。

看到了吧，聊天聊的很Happy。OK，上面大家是不是看到了一段类似sql的代码，不错，就是将聊天信息存到本地WebSQL sqlite数据库。

db.transaction(function (tx) {
            tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');
        });

在使用之前我们需要首先连接数据库创建表。

var db = openDatabase('ChatHistory', '2.0', 'chat records', 10 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS ChatRecords (id INTEGER PRIMARY KEY AUTOINCREMENT,userId TEXT NOT NULL DEFAULT "",sendUserId TEXT NOT NULL DEFAULT "",fullname TEXT NOT NULL DEFAULT "",content TEXT NOT NULL DEFAULT "",indate DATETIME default CURRENT_TIMESTAMP)');
});

确实和sqlSever的语法有点像，我们看一下存储到本地webSQL的聊天记录，google Chrome，按F12

看到了吧，聊天记录已经被存储下来，由于我是一台机器，一个浏览器开两个tab页，所以这里的聊天记录就是两份，一个是发送人的，一个是接收人的。大家注意这里还有张表，sqlite_sequence，我们的主键id定义为自增列，所以这张表存储的是我们的自增列(id)的最大值。

最大是54，和我们表ChatRecords中的最大值相等。

OK，本篇文章到这里就要和大家说再见了，下节我们会讲拦截器，log4js，服务端自动编译刷新。学习Node.js 请加群：548635112