從開始寫到完善差不多斷斷續續差不多半個月時間,雖然還沒有打到想要的效果但還是階段性總結一下。(下一步加入打算視訊通訊功能)本文預設你已掌握 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分為兩部分:
-
在瀏覽器中執行的客戶端庫
-
面向node.js的服務端庫
而 emit
和 on
可以說是socket.io的核心,通過 emit 和 on 可以實現伺服器和客戶端之間的通訊
整體思路
客戶端將資訊傳送至伺服器端,服務端再將這些資訊廣播到客戶端。這也是為什麼要採用webSocket
協議來實現聊天室的原因。
實現一個簡單的聊天室,我們需要實現以下內容:
【聊天模式】
-
群聊
-
獨聊
【必需功能點】
-
傳送文字
-
傳送圖片(或者檔案)
-
傳送emoji表情
【附加功能點】
-
自主選擇文字顏色
-
顯示線上使用者列表
-
清屏
在架構這個專案時最好根據物件導向思想,符合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…