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

為嵩明等地區用戶提供了全套網頁設計制作服務，及嵩明網站建設行業解決方案。主營業務為成都網站建設、做網站、嵩明網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1.好吧，先來看一下我們的效果圖

2.用到的一些東西

nodejs node服務器運行環境
express 搭建node服務器
websocket 本例核心，推送服務器消息到所有人
socketio websocket第三方庫
vue + router 視圖層雙向數據綁定框架，用來簡化開發、組件化開發的
es6語法 就是好用簡潔哈哈
https 因為像websocket和很多h6的新功能，瀏覽器為了安全起見都僅支持https下開發 關于nodejs搭建express服務器可以看這里我就是在這里學的，代碼里也借鑒了很多，關于搭建https服務器就不簡介了，內容太多，推薦阿里云一年的免費證書，可以訪問我的站點查看

3.代碼架構簡介

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

4.運行代碼

install dependencies

npm install

serve with hot reload at localhost:8080
npm run dev

build for production with minification
npm run build

這是在我站點上跑著的例子,大家可以看一看，在手機上效果更加，最近校招比較忙，就花了兩天，沒考慮兼容，歡迎大家提出意見。

官方網址：https://github.com/secreter/websocket_chat

文件打包下載：vue_websocket_chat.zip

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁標題：基于vue和websocket的多人在線聊天室-創新互聯
文章URL：http://www.yijiale78.com/article8/pgoip.html

成都網站建設公司_創新互聯，為您提供移動網站建設、動態網站、關鍵詞優化、Google、服務器托管、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯