node基于express的socket.io

前一段事件，我一个同学给他们公司用融云搭建了一套web及时通信系统，然后之前我的公司也用过环云来实现web及时通信，本人对web及时通信还是非常感兴趣的。私下读了融云和环信的开发文档，然后发现如果注册第三方貌似开发群聊就是个问题了（因为自己做个两个人聊天很简单，想做的在复杂些就要花钱了－ －orz），包括后期我想开发表情包，群聊，和消息加密等等。本着节省的原则尝试去看了一下socket.io，结果一发不可收拾。。。好了闲话少说，今天来分享一份关于socket.io的东西！！

注：本篇文章建议有node基础的同学看，最好有一些express的开发经验

首先我们搭建了一个express的项目，我直接用了express的默认jade，小伙伴们喜欢ejs就自己创建成ejs模版的项目！

之后我们引进socket，代码如下：

{
  "name": "jadeShop",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "dev": "supervisor ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.13.4",
    "mysql":"*",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0",
    "socket.io": "*"
  }
}

这个是我的package.json的配置，我安装了supervisor，，然后mysql(因为之前做过一段时间php开发所以本人还是比较喜欢mysql，如果喜欢nosql的小伙伴么，自己安装mongodb)和socket.io之后直接进入项目运行npm install自动加载包依赖。

我们加载了socket.io之后我们进入到app.js来建立socket.io的connect，代码如下

var users = {}
var server = http.createServer(app)
var io = require('socket.io').listen(server)

我们的users用来存所有的在线用户，第二行的app是express框架自动生成。之后我们的io就是socket的实力，我们可以调用io下的socket.on方法

代码如下：

io.sockets.on('connection', function (socket) {

}

这样每当我们在iterm上启动服务器那么socket.io就会自动连接，然后我们方法里面有一个回调函数，socket这个参数我们就可以去on自己想要的事件了，这里的事件是自定义名称，你可以叫a，也可以叫b，但是最好语意话一些！

我们来说一下我们用的几个基本方法，因为socket.io是消息推送，而不像ajax长轮询那样子。所以我们肯定是需要一个方法去坚挺客户端发送的方法，这里不管是服务端还是客户端其实都是一个原理，然后我们还需要一个方法去推送数据！

监听方法代码如下：

socket.on('online', function (data) {}

推送方法如下代码：

1.向所有人推送：

io.sockets.emit('online', {users: users, user: data.user})

2.向客户端某个人推送：

var clients = io.sockets.clients()
clients.forEach(function (client) {
    if (client.name === data.to) {
       client.emit('say', data)
    }
})

这里我们的clients就是所有在线用户，他是一个数组我们forEach来遍历这个数组，然后判断当我们的数组里面的某个人是你想发送的人，直接emit，这里也是一个回调函数。

3.向除了自己外的所有人推送：

socket.broadcast.emit('say', data)

好了基本上有这些方法我们就能做东西了，这些基本上就是服务端socket.io用的所有东西了。

太他妈太简单了，闲话少说，直接说客户端。

我们需要引入一些文件：

script(src='javascripts/layout/jquery.cookie.js')
script(src='/socket.io/socket.io.js')

注：我用的是jade模版，所以这么写

我们这里用到了jquery的cookie，这个看自己需求，也可以自己直接写原声js，然后我们引入socket.io我们就能用啦，是不是很简单？

然后我们来写客户端的代码：

var socket = window.io.connect() 
var from = window.$.cookie('user')

socket实例和node端基本上一个用法，from是我们从cookie取出来的登录用户。

客户端不需要服务端那样好多发送，所以直接emit就可以了哈哈

socket.emit('online', {user: from})
socket.on('online', function (data) {
  console.log(data)
})

现在代码写到这里，我们知道登陆页面，客户端就emit一个名字叫做online的方法，传的参数是user为cookie的登录用户。之后如果app.js中存在代码：

  socket.on('online', function (data) {
    socket.name = data.user
    if (!users[data.user]) {
      users[data.user] = data.user
    }
    io.sockets.emit('online', {users: users, user: data.user})
  })

我们就监听到了服务端online方法了，之后运行逻辑在emit，之后客户端在监听，基本上就能实现所有功能了，具体设计自己实现。

下面来展示自己的代码和效果（仅供参考）。

node的socket.io:

var users = {}
var server = http.createServer(app)
var io = require('socket.io').listen(server)
io.sockets.on('connection', function (socket) {
  socket.on('online', function (data) {
    socket.name = data.user
    if (!users[data.user]) {
      users[data.user] = data.user
    }
    io.sockets.emit('online', {users: users, user: data.user})
  })
  socket.on('say', function (data) {
    chatApi.insertChat(data, function (cont) {
      if (cont) {
        if (data.to === 'all') {
          socket.broadcast.emit('say', data)
        } else {
          var clients = io.sockets.clients()
          clients.forEach(function (client) {
            if (client.name === data.to) {
              client.emit('say', data)
            }
          })
        }
        chatApi.upDataChatList(data, function (conts) {
        })
      }
    })
  })
  socket.on('focus', function (data) {
    var clients = io.sockets.clients()
    clients.forEach(function (client) {
      if (client.name === data.to) {
        client.emit('focus', data)
      }
    })
  })
  socket.on('blur', function (data) {
    var clients = io.sockets.clients()
    clients.forEach(function (client) {
      if (client.name === data.to) {
        client.emit('blur', data)
      }
    })
  })
  socket.on('see', function (data) {
    chatApi.updateChat(data, function (conts) {
      console.log('conts--->', conts)
      var clients = io.sockets.clients()
      clients.forEach(function (client) {
        if (client.name === data.to) {
          client.emit('see', data)
        }
      })
    })
  })
  socket.on('disconnect', function () {
    if (users[socket.name]) {
      delete users[socket.name]
      socket.broadcast.emit('offline', {users: users, user: socket.name})
    }
  })
})

node连接mysql做的后台：

var mysql = require('mysql')
var connection = mysql.createConnection({
  host: 'localhost',
  database: 'shop',
  user: 'root',
  password: '123456'
})
function handleDisconnect (connection) {
  connection.on('error', function (err) {
    if (!err.fatal) {
      return
    }
    if (err.code !== 'PROTOCOL_CONNECTION_LOST') {
      throw err
    }
    console.log('Re-connecting lost connection: ' + err.stack)
    connection = mysql.createConnection(connection.config)
    handleDisconnect(connection)
    connection.connect()
  })
}
handleDisconnect(connection)
connection.connect()

module.exports = {
  insertChat: function (data, callback) {
    console.log([data.from, data.to, data.msg])
    connection.query('insert into chat(chat_id,chat.from,chat.to,msg,chat.read)values(null,?,?,?,0)', [data.from, data.to, data.msg], function (err, rows, fields) {
      callback(rows)
    })
  },
  upDataChatList: function (data, callback) {
    connection.query('select * from chatList where chatList_username = ? and chatList_chatname = ?', [data.to, data.from], function (err, rows, fields) {
      console.log('rows--->', rows)
      if (rows[0]) {
        console.log('info--->', [rows[0].chatList_chat + 1, data.msg, data.to, data.from])
        connection.query('UPDATE chatList SET chatList_chat = ? where chatList_username = ? and chatList_chatname = ? ', [rows[0].chatList_chat + 1, data.to, data.from], function (err, cont, fields) {
        })
        connection.query('UPDATE chatList SET chatList_content = ? where chatList_username = ? and chatList_chatname = ? ', [data.msg, data.to, data.from], function (err, cont, fields) {
        })
        connection.query('UPDATE chatList SET chatList_time = ? where chatList_username = ? and chatList_chatname = ? ', [new Date().getTime(), data.to, data.from], function (err, cont, fields) {
          callback(cont)
        })
      } else {
        connection.query('insert into chatList(chatList_id,chatList_username,chatList_chatname,chatList_time,chatList_content,chatList_chat)values(null,?,?,?,?,1)', [data.to, data.from, new Date().getTime(), data.msg], function (err, cont, fields) {
          callback(cont)
        })
      }
      callback(rows)
    })
  },
  getChatDate: function (req, res, callback) {
    connection.query('select * from chat where (chat.from = ? and chat.to = ?) or (chat.from = ? and chat.to = ?) order by chat_id desc limit 0,6', [req.body.from, req.body.to, req.body.to, req.body.from], function (err, rows, fields) {
      callback(rows)
    })
  },
  getHistoryDate: function (req, res, callback) {
    connection.query('select * from chat where (chat.from = ? and chat.to = ?) or (chat.from = ? and chat.to = ?) order by chat_id desc limit ?,?', [req.body.from, req.body.to, req.body.to, req.body.from, (req.body.index - 1) * 20 + 6, req.body.index * 20 + 6], function (err, rows, fields) {
      callback(rows)
    })
  },
  getChatListData: function (req, res, callback) {
    connection.query('select * from chatList where chatList_username = ? order by chatList_time desc', [req.body.username], function (err, rows, fields) {
      callback(rows)
    })
  },
  updateChatList: function (req, res, callback) {
    connection.query('UPDATE chatList SET chatList_chat = 0 where chatList_username = ? and chatList_chatname = ?', [req.body.username, req.body.chatname], function (err, rows, fields) {
      callback(rows)
    })
  },
  updateChat: function (data, callback) {
    connection.query('UPDATE chat SET chat.read = 1 where chat.from = ? and chat.to = ? and chat.read=0', [data.to, data.from], function (err, rows, fields) {
      callback(rows)
    })
  }
}

这里偷懒了－ －，mysql的链接应该自己写一个config文件里面而不是这里面。

jade模版（list页面）：

doctype html
html(lang="zh-CN" ng-app="hyyApp" ng-controller="chat")
  head
    title(ng-bind='chatName')
    meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
  include ./includes/head
    link(href="/stylesheets/chatList.css" rel='stylesheet')
  body
    .row
      .col-lg-12
        .input-group
          input.form-control(type="text")
          span.input-group-btn
            button.btn.btn-default(type="button") serach
    .container
      ul
        li.chatListLi(ng-repeat='chatList in chatLists' ng-click='chatListClick(chatList)')
          img(src='/images/patient.png')
          .chatListInfo
            .chatListTop
              .chatListTitle(ng-bind='chatList.chatList_chatname')
              .chatList(ng-bind='chatList.time')
              .badge(ng-bind='chatList.chatList_chat' ng-if='chatList.chatList_chat')
            .chatListContent(ng-bind='chatList.chatList_content')
    include ./includes/body
    script(src='javascripts/layout/zepto.js')
    script(src='javascripts/layout/touch.js')
    script(src='/javascripts/chatList.js')

js（list页面）：

  var TimeByClinic = function ($scope, $http) {
    var socket = window.io.connect()
    var from = window.$.cookie('user')
    $scope.chatLists = []
    $scope.timeStamp = new Date().getTime()
    function getTime (date) {
      for (var i = 0; i < date.length; i++) {
        date[i].year = new Date(parseInt(date[i].chatList_time)).getFullYear()
        date[i].month = new Date(parseInt(date[i].chatList_time)).getMonth() + 1
        date[i].data = new Date(parseInt(date[i].chatList_time)).getDate()
        if ($scope.timeStamp - date[i].chatList_time <= 86400000) {
          if (new Date(parseInt(date[i].chatList_time)).getMinutes() < 10) {
            date[i].time = new Date(parseInt(date[i].chatList_time)).getHours() + ':0' + new Date(parseInt(date[i].chatList_time)).getMinutes()
          } else {
            date[i].time = new Date(parseInt(date[i].chatList_time)).getHours() + ':' + new Date(parseInt(date[i].chatList_time)).getMinutes()
          }
        } else {
          date[i].time = date[i].data + '|' + date[i].month + '|' + date[i].year
        }
      }
      console.log(date)
    }
    function chatList () {
      $http({
        url: '/getChatListData',
        method: 'POST',
        data: {
          'username': window.utils.getQuery('username')
        }
      }).success(function (data) {
        $scope.chatLists = data
        getTime(data)
      })
    }
    function updateChatList (o) {
      $http({
        url: '/updateChatList',
        method: 'POST',
        data: {
          'username': window.utils.getQuery('username'),
          'chatname': o.chatList_chatname
        }
      }).success(function (data) {
        console.log(data)
      })
    }
    chatList()
    $scope.chatListClick = function (o) {
      updateChatList(o)
      var str = '/chat?' + 'username=' + o.chatList_username + '&chatName=' + o.chatList_chatname
      window.location = str
    }
    socket.emit('online', {user: from})
    socket.on('online', function (data) {
      console.log(data)
    })
    socket.on('say', function (data) {
      console.log(data)
      chatList()
      $scope.$apply()
    })
  }
  window.hyyApp.controller('chat', ['$scope', '$http', TimeByClinic])

include进来公共body：

script(src='/javascripts/layout/angular.min.js')
script 
  |window.hyyApp = window.angular.module('hyyApp', [])
script(src='/layout/until.js')
script(src='javascripts/layout/jquery.cookie.js')
script(src='/socket.io/socket.io.js')

这里的前三行代码是自己为了实现angular模块发开，第四行是自己写的工具类，请忽略！！！

数据库（mysql）：

效果图如下：

 大概是这样子一个人和另一个人说话，就会产生一条数据：

safari的list表单如果要进入就会读取这条消息，同时chrome的chat页面最下面的消息就会变成已读

效果如下：

然后我们safari的页面在退回到list表单的时候我们就会发现消息提示消失，时间和内容更新

效果如下：

之后我们再来看chat页面，首先看一下代码：

jade：

doctype html
html(lang="zh-CN" ng-app="hyyApp" ng-controller="chat")
  head
    title(ng-bind='chatName')
    meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
  include ./includes/head
    link(href="/stylesheets/chat.css" rel='stylesheet')
  body
    p.chatCenter.title 
      span.titleBack(ng-click='back()') < back
      span.titleName(ng-bind='showName')
    .container#contentChat
      div(ng-repeat='data in chatDate')
        .chatContentLeft(ng-if='data.to === username')
          .chatLeftFlag1
          .chatLeftFlag2
          img(src='/images/patient.png')
          div
            p(ng-bind='data.msg')
        .chatContentRight(ng-if='data.from === username')
          .chatRightFlag1
          .chatRightFlag2
          img(src='/images/patient.png')
          div 
            p(ng-bind='data.msg' ng-click='until(data)')
            span.chatStatus(ng-if='data.read') 已读
          .clear
    #chatInput
      .input-group
        input.form-control(type="text" ng-model='input' ng-blur="blur()" ng-focus="focus()")
        span.input-group-btn
          botton.btn.btn-default(type="button" ng-click='say()' ng-if='input') submit
          botton.btn.btn-default(disabled type="button" ng-if='!input') submit
    include ./includes/body
    script(src='javascripts/layout/zepto.js')
    script(src='javascripts/layout/touch.js')
    script(src='javascripts/layout/jquery.cookie.js')
    script(src='/socket.io/socket.io.js')
    script(src='/javascripts/chat.js')

js代码：

  var TimeByClinic = function ($scope, $http) {
    $scope.input = ''
    $scope.username = window.utils.getQuery('username')
    $scope.chatName = window.utils.getQuery('chatName')
    $scope.showName = window.utils.getQuery('chatName')
    $scope.height = window.$(document).height()
    $scope.chatDate = []
    $scope.index = 1
    $scope.flag = true
    $scope.touchStart = []
    $scope.touchMove = []
    var socket = window.io.connect()
    var from = window.$.cookie('user')
    /* update chatlist for msg state. */
    function updateChatList () {
      $http({
        url: '/updateChatList',
        method: 'POST',
        data: {
          'username': window.utils.getQuery('username'),
          'chatname': window.utils.getQuery('chatName')
        }
      }).success(function (data) {
        console.log(data)
      })
    }
    /* update chat for read state. */
    function updateChat () {

    }
    updateChat()
    /* GET showchat for six data chat msg. */
    function getDate () {
      $http({
        url: '/getChatDate',
        method: 'POST',
        data: {
          'from': window.utils.getQuery('username'),
          'to': window.utils.getQuery('chatName')
        }
      }).success(function (data) {
        console.log(data)
        $scope.chatDate = data.reverse()
      })
    }
    /* touch event. */
    function touchStart (event) {
      var touch = event.touches[0]
      $scope.touchStart = [touch.pageX, touch.pageY, new Date().getTime()]
    }
    function touchMove (event) {
      var touch = event.touches[0]
      $scope.touchMove = [touch.pageX, touch.pageY, new Date().getTime()]
    }
    function touchEnd (event) {
      if ($scope.touchMove[1] - $scope.touchStart[1] >= 200 && $scope.touchMove[2] - $scope.touchStart[2] <= 666) {
        if (window.$(document).scrollTop() <= 0) {
          historyData()
        }
      }
    }
    document.addEventListener('touchstart', touchStart, false)
    document.addEventListener('touchmove', touchMove, false)
    document.addEventListener('touchend', touchEnd, false)
    /* GET historyData. */
    function historyData () {
      if ($scope.flag) {
        $scope.flag = false
        $http({
          url: '/getHistoryDate',
          method: 'POST',
          data: {
            'from': window.utils.getQuery('username'),
            'to': window.utils.getQuery('chatName'),
            'index': $scope.index
          }
        }).success(function (data) {
          console.log(data)
          if (data[0]) {
            $scope.chatDate = data.reverse().concat($scope.chatDate)
            setTimeout(function () {
              $scope.flag = true
              $scope.index++
            }, 2000)
          } else {
            $scope.more = false
          }
          if (data.length < 20) {
            $scope.more = false
            $scope.flag = false
          }
        })
      }
    }
    /* UPDATE view data state. */
    function readState () {
      for (var i = 0; i < $scope.chatDate.length; i++) {
        if ($scope.chatDate[i].read === 0) {
          $scope.chatDate[i].read = 1
        }
      }
      $scope.$apply()
    }
    /* GET now time. */
    function nowTime () {
      var date = new Date()
      var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + (date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds());
      return time
    }
    getDate()
    /* socket.io emit and on. */
    socket.emit('online', {user: from})
    socket.emit('see', {from: from, to: window.utils.getQuery('chatName')})
    socket.on('online', function (data) {
      console.log(data)
      console.log(data.from)
      var str = ''
      if (data.user !== from) {
        // str = '<p class="chatCenter">用户 ' + data.user + ' 上线了！</p>'
      } else {
        // str = '<p class="chatCenter">' + nowTime() + '</p>'
      }
      window.$('.container').append(str)
      window.$(document).scrollTop(window.$(document).height() - $scope.height)
    })
    socket.on('see', function (data) {
      readState()
    })
    socket.on('focus', function (data) {
      if (data.from === window.utils.getQuery('chatName')) {
        $scope.focusNumber = 0
        $scope.showName = '对方正在讲话'
        $scope.interval = setInterval(function () {
          if ($scope.focusNumber === 3) {
            $scope.showName = '对方正在讲话'
            $scope.focusNumber = 0
          } else {
            $scope.showName += '.'
            $scope.focusNumber++
          }
          $scope.$apply()
        }, 1000)
        $scope.$apply()
      }
    })
    socket.on('blur', function (data) {
      $scope.showName = window.utils.getQuery('chatName')
      clearInterval($scope.interval)
      $scope.$apply()
    })
    socket.on('say', function (data) {
      updateChatList()
      console.log(data)
      var obj = {
        'from': window.utils.getQuery('chatName'),
        'to': window.utils.getQuery('username'),
        'read': 0,
        'msg': data.msg
      }
      $scope.chatDate.push(obj)
      // var str = '<div class="chatContentLeft">' +
      //           '<div class="chatLeftFlag1"></div>' +
      //           '<div class="chatLeftFlag2"></div>' +
      //           '<img src="/images/patient.png"/>' +
      //           '<div>' +
      //             '<p>' + data.msg + '</p>' +
      //           '</div>' +
      //         '</div>'
      // window.$('.container').append(str)
      socket.emit('see', {from: from, to: window.utils.getQuery('chatName')})
      window.$(document).scrollTop(window.$(document).height() - $scope.height)
    })
    $scope.say = function () {
      var obj = {
        'from': window.utils.getQuery('username'),
        'to': window.utils.getQuery('chatName'),
        'read': 0,
        'msg': $scope.input
      }
      // var str = '<div class="chatContentRight">' +
      //             '<div class="chatRightFlag1"></div>' +
      //             '<div class="chatRightFlag2"></div>' +
      //             '<img src="/images/patient.png"/>' +
      //             '<div>' +
      //               '<p>' + $scope.input + '</p>' +
      //             '</div>' +
      //             '<div class="clear"></div>' +
      //           '</div>'
      // window.$('.container').append(str)
      $scope.chatDate.push(obj)
      window.$(document).scrollTop(window.$(document).height() - $scope.height)
      socket.emit('say', {from: from, to: window.utils.getQuery('chatName'), msg: $scope.input})
      $scope.input = ''
    }
    $scope.until = function (o) {
      console.log(o)
    }
    $scope.blur = function () {
      socket.emit('blur', {from: from, to: window.utils.getQuery('chatName')})
    }
    $scope.focus = function () {
      console.log(2)
      socket.emit('focus', {from: from, to: window.utils.getQuery('chatName')})
    }
    $scope.back = function () {
      var str = '/chatList?username=' + window.utils.getQuery('username')
      window.location = str
    }
  }
  window.hyyApp.controller('chat', ['$scope', '$http', TimeByClinic])

数据库：

数据有点多就截取了一部分。

之后我们就实现了两个页面的通信，当然页面和页面的通信消息会直接变成已读。然后我们上下滑动就能加载出我们的历史记录，这些逻辑都写在了js里面了。

效果如下：

另外我还模拟了微信的对方正在说话中

效果如下：

一方获取焦点另一方就会变成对方正在讲话的样式，然后等焦点blur的时候在变成正常的名字

具体的逻辑就随便你加了，是不是很简单呢？

之前和boss直聘leader聊到这的web及时通信，貌似他们用的是mqtt框架实现的，而不同公司用的肯定也是不一样的，我同学用的融云，而我们公司用的确实环信，不敢谈到这些东西的利弊，因为自己根本没有大规模的这种web即时通信的开发经验，所以还是处于井底之蛙的阶段，不敢妄加评论。但是这些开发的东西其实都是大同小异的，最起码开发文档都是类似的，学习成本也比node的这个原声socket.io要容易的多！

过段时间我会更新socket.io的blog（前提是有时间去继续开发－ －），实现群组聊天，表情，消息回撤，消息加密等等更加高级的socket技术！有兴趣的可以继续期待。。。欢迎有不同意见的人前来讨论，希望我的blog对您有帮助！