成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

fjcgreat / 3346人閱讀

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

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

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

前導(dǎo)知識(shí) webSocket協(xié)議

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

express

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

socket.io

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

在瀏覽器中運(yùn)行的客戶(hù)端庫(kù)

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

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

整體思路

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

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

群聊

獨(dú)聊

【必需功能點(diǎn)】

發(fā)送文字

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

發(fā)送emoji表情

【附加功能點(diǎn)】

自主選擇文字顏色

顯示在線(xiàn)用戶(hù)列表

清屏

在架構(gòu)這個(gè)項(xiàng)目時(shí)最好根據(jù)面向?qū)ο笏枷?，符合UNIX哲學(xué)去設(shè)計(jì)。所以我們可以定義一個(gè)全局變量初始化整個(gè)項(xiàng)目，定義一個(gè) Chat 類(lèi)用于整個(gè)程序的開(kāi)發(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ā)送過(guò)來(lái)的消息
_DisplayImage(user, imgData, color) //顯示圖片
_ShowEmoji(msg)                     //顯示emoji表情

_DisplayOneMsg(user,msg,color)      //實(shí)現(xiàn)獨(dú)聊
前后端通信及Chat原型的實(shí)現(xiàn) （客戶(hù)端）chat.js

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

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

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

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

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

//通過(guò)socket.on()來(lái)監(jiān)聽(tīng)客戶(hù)端事件
})
參考資料

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87332.html

相關(guān)文章

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

    摘要：不過(guò)這種方案存在一個(gè)問(wèn)題，就是無(wú)法發(fā)送圖片。尤其是對(duì)等標(biāo)簽需要格外的注意。后端必須對(duì)前端傳過(guò)來(lái)的數(shù)據(jù)進(jìn)行再次驗(yàn)證。 這一篇文章主要是對(duì) 安全性 的思考，首先了解一下一些常見(jiàn)的網(wǎng)絡(luò)攻擊 xss跨站點(diǎn)腳本攻擊 XSS是注入攻擊的一種，其特點(diǎn)是不對(duì)服務(wù)器造成任何傷害，而是通過(guò)一些正常的站內(nèi)交互途徑，發(fā)布含有js的攻擊代碼，如果服務(wù)器沒(méi)有沒(méi)有過(guò)濾或者轉(zhuǎn)義這些腳本，作為內(nèi)容發(fā)布到了頁(yè)面上，其他用...

    JerryZou 評(píng)論0 收藏0

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

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

    付永剛 評(píng)論0 收藏0

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

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

    weakish 評(píng)論0 收藏0

  • 手把手教你擼一個(gè)網(wǎng)頁(yè)聊天室

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

    nemo 評(píng)論0 收藏0

  • 手把手教你擼一個(gè)網(wǎng)頁(yè)聊天室

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

    leiyi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<