網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
你的位置:首頁 ? 站群搭建 ? 正文

手把手教你擼一個網頁聊天室

2019-6-5 15:0:31 | 作者:老鐵SEO | 1個評論 | 人瀏覽

  最近在學校比較閑,終于有這么一塊時間可以自由支配了,所以內心還是十分的酸爽舒暢的。當然了,罪惡的事情也是有的,比如已經連續一周沒有吃早飯了,其實現在回頭想想,真的不能怪我啊,因為最近的天氣實在是太!冷!了!好吧為了減少賴床的罪惡感,還是學(gǎo)點(diǎn)東(shì)西(qing)好了。不說廢話了,還是進入正題。

  這個丑陋無比的聊天室,暫時給他后面加個“v1.0”吧,畢竟也是沒有經過什么迭代,寫好就直接放出來了,當然也有很多可以再搞搞的地方,比如:

  在寫這個demo的時候,我是邊學邊寫的狀態,學習資料以劉哇勇大神的Node.js+Web Socket 打造即時聊天程序嗨聊為主,主流搜索引擎和我最喜歡的技術社區SegmentFault為輔。

  源碼已經上傳至我的github, clone到本地以后在terminal中運行下面兩條命令:

  然后打開瀏覽器,訪問localhost,就可以在不聯網的情況下看到這個demo啦。

  當然啦,Node.js是必不可少的,這里推薦兩個很棒的Node.js教程:

  這就代表你的node服務已經架起來了,阿西,js寫后臺邏輯,用腳指頭想想都會覺得是一件很酷的事情呢

  express是node.js中管理路由響應請求的模塊,根據請求的URL返回相應的HTML頁面。這里我們使用一個事先寫好的靜態頁面返回給客戶端,只需使用express指定要返回的頁面的路徑即可。如果不用這個包,我們需要將HTML代碼與后臺JavaScript代碼寫在一起進行請求的響應,不太方便。

  socket.io封裝了websocket,同時包含了其它的連接方式,比如Ajax。原因在于不是所有的瀏覽器都支持websocket,通過socket.io的封裝,你不用關心里面用了什么連接方式。你在任何瀏覽器里都可以使用socket.io來建立異步的連接。

  界面就像第一眼看到的那樣簡(chǒu)單(lòu),不過“麻雀雖小,五臟俱全”,該有的東西還是得有,這里就直接貼DOM結構。

  直接看注釋,就能清晰的看到這只小麻雀的“心”、“肝”、“脾”、“肺”四個部分。(“腎”呢?哼,你以為我的新手機怎么來的?)

  至于那些辣眼睛的類名,是因為項目里用到了Bootstrap,也算是偷了個懶。

  此話不假,不過這里我指的是交互,畢竟你寫一個程序的話,對程序內的邏輯必須做到“吹毛求疵”(我這個成語用對了沒)

  這里要注意,因為是一個聊天系統,所以與服務端建立連接的方式不同于往常,這里用到的協議是HTTPWebSocket,從而實現持久連接。

  簡單的解釋一下,這里的“持久”,是相對于HTTP這種“非持久”的協議來說的(閣下的意思是,HTTP的夫人會很羨慕WebSocket的夫人咯)。

  HTTP的生命周期大概是這樣的,一個request,一個response,這次請求就結束了;HTTP 1.1中進行了改進,增加了一個keep-alive,效果是在這次HTTP連接中,可以發送多個request,接受多個response,但本質上,request = response,也就是說,請求和響應永遠是一一對應的,沒有request時,服務端不能主動response。

  當客戶端與服務端完成協議升級以后(HTTP - WebSocket),就建立了一個持久連接,有多持久呢?這個連接可以持續存在知道客戶端或服務端某一方主動的關閉連接。與HTTP最大的不同是,此時的服務端可以主動推送消息給客戶端咯。在這個項目中,我們用socket.io這個包模塊來實現WebSocket,socket.io不僅實現了對WebSocket的封裝,還將連同Ajax輪詢和其他實時通信方式封裝成了通用的接口,這么做的原因是,當服務器不支持WebSocket時,可以轉換為其他的實現方式,嘖嘖嘖,堪稱縱享絲滑

  接下來就是實現的部分,前端在引入了socket.io.js這個文件以后應該怎么做呢?

  這里的“登錄”,不是真正的登錄,當執行完io.connect()之后,這個連接就算已經建立了,這里是在處理一些交互上的行為。

  在前端監聽一個connect事件,這個事件的觸發條件是:成功和服務端建立連接。

  當用戶輸入自己的昵稱點擊登錄按鈕后,當前socket觸發一個login事件到服務端:

  注意這里的事件名稱,如login、loginSuccess、loginFailed都是自定義的,只要保證和服務端的一致就ok了。

  想像一下用戶發送消息這個動作,分解一下:輸入文本 - 點擊發送。也就是這倆了,ok,這里需要給發送按鈕掛上一個事件,告訴服務端,“服務端服務端,這里是socket XXX,我給你發了一個消息哦,注意查收,over。”

  自己發送的消息直接顯示在聊天消息的面板,接收自己發送的消息不用和后臺交互,只需要告訴后臺我給大家發了這條消息即可。當然啦,你也可以仿照微信對自己發送的消息進行處理:發送的瞬間將自己的消息添加聊天面板 - 給旁邊放個小菊花或者loading的字樣 - 與后臺進行交互 - 成功則隱藏小菊花;失敗則將小菊花變成紅色感嘆號暗示用戶發送失敗。

  回調函數里面有兩個參數,nickname和msg,分別是消息發送者的昵稱和消息內容,這倆是怎么來的呢?不要急,后面會在服務端邏輯里面講到,這里你只需要知道,在前端接受新消息的時候,因為牽扯到展示新消息,所以需要這兩個參數。

  這里的三個參數也都是必不可少的,nickname代表觸發系統事件的用戶的昵稱,count表示當前在線的用戶數量,type表示事件類型(加入/離開)。同樣,這三個參數也都是服務端傳過來的。

  因為我把前端文件(html/js/css)放到了www這個文件夾內,所以用express指定返回給瀏覽器的頁面路徑現在這樣。

  當然,除了express以外,也要引入socket.io模塊并綁定到服務器。

  連接建立了以后,所有關于socket活動的邏輯就可以開始寫了。(FYI:當然,是寫在這個connection事件的回調里面)

  叫login,而且還攜帶了一個參數——用戶想給自己起的昵稱nickname。好,我們來寫對應的后臺邏輯

  這里的do something要做什么呢?即對用戶輸入的昵稱進行合法性校驗,比如是否已經存在、長度限制、符號限制等。

  長度限制和符號限制?這倆哥們根本就不用放在服務器上做嘛,直接在前端就搞了。所以我們的問題只剩一個了——昵稱的唯一性。

  既然要檢測昵稱是否唯一,首先得有一個當前在線用戶昵稱的總集,不然去哪里檢測昵稱是否存在嘞?

  在這個數組里找用戶通過login事件傳過來的nickname,如果不存在,說明當前昵稱合法,用戶可以叫這個名字,那么

  這里調用的api是socket的廣播事件,效果是廣播消息到除了當前socket以外的所有socket。

  至此,一個基于Node.js的聊天室就算擼成了,當然還有許多可以優化的地方,不過核心功能也就這些,能看到這里的都是好漢,因為自己寫完看了一遍,感覺真像是老太太的裹腳布——又臭又長

  每個月,我們幫助 1000 萬的開發者解決各種各樣的技術問題。并助力他們在技術能力、職業生涯、影響力上獲得提升。

  • 本文來自: 老鐵博客,轉載請保留出處!歡迎發表您的評論
  • 相關標簽:網頁聊天室  
  • 已有1位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    色情激情片日本大全