socket.io+express實現聊天室的思考（一）

暱稱不能隨便取發表於2019-02-16
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…

相關文章