socket.io+express實現(xiàn)聊天室的思考（一）

fjcgreat 發(fā)布于2019-08-21 12:00 / 3344人閱讀

摘要：但是需要注意的一點是協(xié)議是建立在協(xié)議基礎(chǔ)之上的，需要經(jīng)過一次握手。所以連接的發(fā)起方仍是客戶端。是一個簡潔而靈活的應(yīng)用框架提供一系列強大特性幫助你創(chuàng)建各種應(yīng)用。這也是為什么要采用協(xié)議來實現(xiàn)聊天室的原因。

從開始寫到完善差不多斷斷續(xù)續(xù)差不多半個月時間，雖然還沒有打到想要的效果但還是階段性總結(jié)一下。（下一步加入打算視頻通訊功能）本文默認你已掌握 node 相關(guān)基礎(chǔ)知識

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

前導知識 webSocket協(xié)議

是區(qū)別是 HTTP 的一種全雙工通信協(xié)議，也就是說服務(wù)器可以主動推送信息到客戶端。
但是需要注意的一點是： webSocket協(xié)議是建立在HTTP協(xié)議基礎(chǔ)之上的，需要經(jīng)過一次握手。所以連接的發(fā)起方仍是客戶端。

express

Express 是一個簡潔而靈活的 node.js Web應(yīng)用框架, 提供一系列強大特性幫助你創(chuàng)建各種Web應(yīng)用。具體點講，Express框架建立在node.js內(nèi)置的http模塊上，通過封裝HTTP模塊，讓開發(fā)者更加便捷的去搭建服務(wù)器

socket.io

Node.js中使用socket的一個包。使用socket.io可以很方便的建立服務(wù)器到客戶端的sockets連接。
socket.io分為兩部分：

在瀏覽器中運行的客戶端庫

面向node.js的服務(wù)端庫

而 emit 和 on可以說是socket.io的核心，通過 emit 和 on 可以實現(xiàn)服務(wù)器和客戶端之間的通信

整體思路

客戶端將信息發(fā)送至服務(wù)器端，服務(wù)端再將這些信息廣播到客戶端。這也是為什么要采用webSocket 協(xié)議來實現(xiàn)聊天室的原因。

實現(xiàn)一個簡單的聊天室，我們需要實現(xiàn)以下內(nèi)容：
【聊天模式】

群聊

獨聊

【必需功能點】

發(fā)送文字

發(fā)送圖片（或者文件）

發(fā)送emoji表情

【附加功能點】

自主選擇文字顏色

顯示在線用戶列表

清屏

在架構(gòu)這個項目時最好根據(jù)面向?qū)ο笏枷耄蟄NIX哲學去設(shè)計。所以我們可以定義一個全局變量初始化整個項目，定義一個 Chat 類用于整個程序的開發(fā)

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

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

之后我們向 Chat 原型添加業(yè)務(wù)方法

_Init()                             //初始化
_InitialEmoji()                     //初始化emoji表情
_DisplayNewMsg(user, msg, color)    //顯示發(fā)送過來的消息
_DisplayImage(user, imgData, color) //顯示圖片
_ShowEmoji(msg)                     //顯示emoji表情

_DisplayOneMsg(user,msg,color)      //實現(xiàn)獨聊

前后端通信及Chat原型的實現(xiàn) （客戶端）chat.js

以下代碼定義了整個程序都要使用的Chat類，之后的處理消息等所有業(yè)務(wù)邏輯都寫在這個類中

Chat.prototype={
    _Init:()=>{
        var that=this
        //關(guān)鍵！建立到服務(wù)器的連接
        this.socket=io.connect()    
        //監(jiān)聽socket的connect事件，此事件表示連接已建立
        this.socket.on("connect",function(){
            //....
        })
    }
    
    //其他業(yè)務(wù)邏輯
    _InitialEmoji()                     //初始化emoji表情
    _DisplayNewMsg(user, msg, color)    //顯示發(fā)送過來的消息
    _DisplayImage(user, imgData, color) //顯示圖片
    _ShowEmoji(msg)                     //顯示emoji表情
    
    _DisplayOneMsg(user,msg,color)      //實現(xiàn)獨聊
}

（服務(wù)端）server.js

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

//創(chuàng)建一個數(shù)組保存在線所有用戶昵稱
var users = []
//存儲在線用戶
var socketList = {}

app.use("/", express.static(__dirname + "/pages"))
server.listen(3000, function () { 
  console.log("服務(wù)器已成功啟動")
})  

//socket.io綁定到客戶端的連接
io.sockets.on("connection",function(socket){

//通過socket.on()來監(jiān)聽客戶端事件
})

參考資料

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