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...