socket.io+express实现聊天室的思考（一）

从开始写到完善差很少断断续续差很少半个月时间，虽然尚未打到想要的效果但仍是阶段性总结一下。（下一步加入打算视频通信功能）本文默认你已掌握 node 相关基础知识

GitHub地址：https://github.com/HelenHai/n...

前导知识

webSocket协议

是区别是 HTTP 的一种全双工通讯协议，也就是说服务器能够主动推送信息到客户端。
可是须要注意的一点是： webSocket协议是创建在HTTP协议基础之上的，须要通过一次握手。因此链接的发起方还是客户端 。

express

Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你建立各类Web应用。具体点讲，Express框架创建在node.js内置的http模块上，经过封装HTTP模块，让开发者更加便捷的去搭建服务器

socket.io

Node.js中使用socket的一个包。使用socket.io能够很方便的创建服务器到客户端的sockets链接。
socket.io分为两部分：

1. 在浏览器中运行的客户端库

2. 面向node.js的服务端库

而 emit 和 on能够说是socket.io的核心，经过 emit 和 on 能够实现服务器和客户端之间的通讯

总体思路

客户端将信息发送至服务器端，服务端再将这些信息广播到客户端。这也是为何要采用webSocket 协议来实现聊天室的缘由。

实现一个简单的聊天室，咱们须要实现如下内容：
【聊天模式】

1. 群聊

2. 独聊

【必需功能点】

1. 发送文字

2. 发送图片（或者文件）

3. 发送emoji表情

【附加功能点】

1. 自主选择文字颜色

2. 显示在线用户列表

3. 清屏

在架构这个项目时最好根据面向对象思想，符合UNIX哲学去设计。因此咱们能够定义一个全局变量初始化整个项目，定义一个 Chat 类用于整个程序的开发

window.onload=function(){
    var chat = new Chat()
    chat._Init() 
}

var Chat = function(){
    this.socket = null
}

以后咱们向 Chat 原型添加业务方法

_Init()                             //初始化
_InitialEmoji()                     //初始化emoji表情
_DisplayNewMsg(user, msg, color)    //显示发送过来的消息
_DisplayImage(user, imgData, color) //显示图片
_ShowEmoji(msg)                     //显示emoji表情

_DisplayOneMsg(user,msg,color)      //实现独聊

先后端通讯及Chat原型的实现

（客户端）chat.js

如下代码定义了整个程序都要使用的Chat类，以后的处理消息等全部业务逻辑都写在这个类中

Chat.prototype={
    _Init:()=>{
        var that=this
        //关键！创建到服务器的链接
        this.socket=io.connect()    
        //监听socket的connect事件，此事件表示链接已创建
        this.socket.on('connect',function(){
            //....
        })
    }
    
    //其余业务逻辑
    _InitialEmoji()                     //初始化emoji表情
    _DisplayNewMsg(user, msg, color)    //显示发送过来的消息
    _DisplayImage(user, imgData, color) //显示图片
    _ShowEmoji(msg)                     //显示emoji表情
    
    _DisplayOneMsg(user,msg,color)      //实现独聊
}

（服务端）server.js

const express = require('express'),
      app = express(),
      server = require('')
      io = require('socket.io').listen(server)

//建立一个数组保存在线全部用户昵称
var users = []
//存储在线用户
var socketList = {}

app.use('/', express.static(__dirname + '/pages'))
server.listen(3000, function () { 
  console.log('服务器已成功启动')
})  

//socket.io绑定到客户端的链接
io.sockets.on('connection',function(socket){

//经过socket.on()来监听客户端事件
})

参考资料

【聊天室demo】http://www.cnblogs.com/Wayou/...
【socket.io文档】https://socket.io
【express文档】http://expressjs.com/en/4x/ap...