快捷導(dǎo)航

基于vue和websocket的多人在線聊天室

更新時(shí)間：2020年02月01日 21:20:14 投稿：mdxy-dxy

這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下

最近看到一些關(guān)于websocket的東西，就決定寫一個(gè)在線聊天室嘗試一下。最終決定配合vue來(lái)寫，采用了官方的vue腳手架vue-cli和官方的router，在本例中呢，我是用了CHAT這個(gè)對(duì)象來(lái)存儲(chǔ)app的數(shù)據(jù)的，但后來(lái)一想，雖然項(xiàng)目很小，但如果用官方的vuex會(huì)更好，方便以后擴(kuò)展，比如可以加上私信功能，可以在對(duì)方不在線的時(shí)候緩存發(fā)送的消息，這些都是可以的。（現(xiàn)在比較尷尬的就是，我把聊天室寫好放到公眾號(hào)號(hào)redream里，但是很少有人會(huì)同時(shí)在線，所以你會(huì)經(jīng)常發(fā)現(xiàn)你進(jìn)去的時(shí)候只有你一個(gè)人，就導(dǎo)致群聊不起來(lái)）

1.好吧，先來(lái)看一下我們的效果圖

2.用到的一些東西

nodejs node服務(wù)器運(yùn)行環(huán)境
express 搭建node服務(wù)器
websocket 本例核心，推送服務(wù)器消息到所有人
socketio websocket第三方庫(kù)
vue + router 視圖層雙向數(shù)據(jù)綁定框架，用來(lái)簡(jiǎn)化開(kāi)發(fā)、組件化開(kāi)發(fā)的
es6語(yǔ)法就是好用簡(jiǎn)潔哈哈
https 因?yàn)橄駑ebsocket和很多h5的新功能，瀏覽器為了安全起見(jiàn)都僅支持https下開(kāi)發(fā) 關(guān)于nodejs搭建express服務(wù)器可以看這里我就是在這里學(xué)的，代碼里也借鑒了很多，關(guān)于搭建https服務(wù)器就不簡(jiǎn)介了，內(nèi)容太多，推薦阿里云一年的免費(fèi)證書(shū)，可以訪問(wèn)我的站點(diǎn)查看

3.代碼架構(gòu)簡(jiǎn)介

server里是需要運(yùn)行在node服務(wù)器上的js文件，監(jiān)聽(tīng)websocket連接
src/api/client是客戶端連接服務(wù)器的核心js
src/components下是頁(yè)面的組件。我分成了三大部分，login組件(登錄頁(yè)面)，chat組件（聊天頁(yè)面），groupinfo組件（群信息頁(yè)面），其實(shí)是單頁(yè)應(yīng)用，反應(yīng)速度更快，接近原生app，只不過(guò)用router聯(lián)系在了一起。像chat組件，又又head、body、foot組件組成，組件化是很好的習(xí)慣和架構(gòu)方式，條理清晰，而且在大項(xiàng)目里很多可以復(fù)用。具體都在代碼了，大家可以下載下來(lái)在本地跑一跑。

4.運(yùn)行代碼