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

fjcgreat 發布于2019-08-21 12:00 / 3341人閱讀

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

從開始寫到完善差不多斷斷續續差不多半個月時間，雖然還沒有打到想要的效果但還是階段性總結一下。（下一步加入打算視頻通訊功能）本文默認你已掌握 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...

GPU云服務器云服務器 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87332.html

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

摘要：不過這種方案存在一個問題，就是無法發送圖片。尤其是對等標簽需要格外的注意。后端必須對前端傳過來的數據進行再次驗證。這一篇文章主要是對安全性的思考，首先了解一下一些常見的網絡攻擊 xss跨站點腳本攻擊 XSS是注入攻擊的一種，其特點是不對服務器造成任何傷害，而是通過一些正常的站內交互途徑，發布含有js的攻擊代碼，如果服務器沒有沒有過濾或者轉義這些腳本，作為內容發布到了頁面上，其他用...

JerryZou 2019-08-20 18:36 評論0 收藏0
socket.io+express實現聊天室的思考（二）

摘要：優化聊天室的一些新的技巧調色盤調用效果圖如下打開新頁面圖片預覽優化聊天室的一些新Get的技巧調色盤調用效果圖如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打開新Tab頁面圖片預覽 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

付永剛 2019-08-01 17:22 評論0 收藏0
socket.io+express實現聊天室的思考（二）

摘要：優化聊天室的一些新的技巧調色盤調用效果圖如下打開新頁面圖片預覽優化聊天室的一些新Get的技巧調色盤調用效果圖如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打開新Tab頁面圖片預覽 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

weakish 2019-08-20 18:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

nemo 2019-08-20 12:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

leiyi 2019-08-01 16:00 評論0 收藏0