點擊右上方紅色按鈕“web秀” ， 讓你真正秀起來
前言
在《 + 簡單介紹及示例 – 第一章》中簡單的介紹了，+ 的使用方法及作用，今天就用它來搭建一個簡單的聊天室功能 。
1、+創(chuàng)建后臺服務器功能
2、Vue視圖層，接收后臺數(shù)據(jù)并渲染頁面
3、存儲會話ID等用戶信息
vue +生成vue項目
腳手架搭建項目也是非常好用，簡單命令即可搞定
# vue init webpack web-im
然后一路向下，填寫項目名稱 ， 描述 ， 作者等等信息，完成安裝 。
現(xiàn)在都可以自動安裝模塊了，當然，你可以可以到目錄下面執(zhí)行npm
# cd web-im# npm install
這就是整個生成后的項目結(jié)構(gòu) 。
服務端
在項目根目錄下新建/index.js文件 。
var ws = require("nodejs-websocket");// 這里用到了moment，請大家自行安裝var moment = require('moment');console.log("開始建立連接...")let users = [];// 向所有連接的客戶端廣播function boardcast(obj) { server.connections.forEach(function(conn) { conn.sendText(JSON.stringify(obj)); })}function getDate(){ return moment().format('YYYY-MM-DD HH:mm:ss')}var server = ws.createServer(function(conn){ conn.on("text", function (obj) { obj = JSON.parse(obj); if(obj.type===1){ users.push({ nickname: obj.nickname, uid: obj.uid }); boardcast({ type: 1, date: getDate(), msg: obj.nickname+'加入聊天室', users: users, uid: obj.uid, nickname: obj.nickname }); } else { boardcast({ type: 2, date: getDate(), msg: obj.msg, uid: obj.uid, nickname: obj.nickname }); } }) conn.on("close", function (code, reason) { console.log("關(guān)閉連接") }); conn.on("error", function (code, reason) { console.log("異常關(guān)閉") });}).listen(8001)console.log("WebSocket建立完畢")
如果上方代碼閱讀體驗太差 ， 可以看下方圖或者直接到文章最下方，點擊了解更多閱讀：
這里和《 + 簡單介紹及示例 – 第一章》大體結(jié)構(gòu)相同，不同的是，這里向客戶端發(fā)送消息是用的一個方法
server.connections.forEach(function(conn) { conn.sendText(JSON.stringify(obj));})
遍歷所有連接，發(fā)送信息 。
這里為什么要JSON.(obj)轉(zhuǎn)換成字符串？？？
那是方法只能傳入字符串，所以我們需要將我們的對象轉(zhuǎn)換一下 。
同時，大家應該可以看出，在conn.on(“text”, ()=>{})的時候判斷了一個從客戶端傳入的type ， 這個操作是判斷用戶是否是第一次進入 。
客戶端視圖層
聊天室{{item.msg}}
{{item.nickname}} {{item.msg}}
如果上方代碼閱讀體驗太差，可以看下方圖或者直接到文章最下方，點擊了解更多閱讀：
樣式方面就不做解釋了，都是非常簡單的樣式java web實現(xiàn)聊天系統(tǒng)，有興趣的可以點擊最下方獲取源碼查看 。
客戶端
export default { ... data(){ return { uid: '', nickname: '', socket: '', msg: '', messageList: [] } }, mounted() { let vm = this; let user = localStorage.getItem('WEB_IM_USER'); user = user && JSON.parse(user) || {}; vm.uid = user.uid; vm.nickname = user.nickname; if(!vm.uid){ vm.$refs.loginDialog.show() } else { vm.conWebSocket(); } document.onkeydown = function (event) { var e = event || window.event; if (e && e.keyCode == 13) { //回車鍵的鍵值為13 vm.send() } } }, methods: { send(){ if(!this.msg){ return } this.sendMessage(2, this.msg) }, sendMessage(type, msg){ this.socket.send(JSON.stringify({ uid: this.uid, type: type, nickname: this.nickname, msg: msg })); this.msg = ''; }, conWebSocket(){ let vm = this; if(window.WebSocket){ vm.socket = new WebSocket('ws://localhost:8001'); let socket = vm.socket; socket.onopen = function(e){ console.log("連接服務器成功"); if(!vm.uid){ // 生成新的用戶id,并存入localStorage vm.uid = 'web_im_' + moment().valueOf(); localStorage.setItem('WEB_IM_USER', JSON.stringify({ uid: vm.uid, nickname: vm.nickname })) vm.sendMessage(1) } } socket.onclose = function(e){ console.log("服務器關(guān)閉"); } socket.onerror = function(){ console.log("連接出錯"); } // 接收服務器的消息 socket.onmessage = function(e){ let message = JSON.parse(e.data); vm.messageList.push(message); }} }, login(){ this.$refs.loginDialog.hide() this.conWebSocket(); } }}
如果上方代碼閱讀體驗太差，可以看下方圖或者直接到文章最下方，點擊了解更多閱讀：
頁面渲染完成后java web實現(xiàn)聊天系統(tǒng)，我們.(”)獲取本地存儲是否有用戶信息
1、沒有用戶信息，彈框填寫昵稱，確認開始連接 ， 并生成一個時間戳的用戶id，存入
【Nodejs + WebSocket + Vue 實現(xiàn)多人聊天室WebIM功能】2、有用戶信息 ， 直接連接
3、.監(jiān)聽服務器發(fā)送過來的消息，轉(zhuǎn)換成json ， push到數(shù)組中，然后渲染到頁面
4、通過type判斷是新加入用戶，還是正常發(fā)送消息 ， 顯示到頁面
5、通過uid，判斷是否是本人發(fā)送的消息 ， 如果是消息內(nèi)容靠右顯示，其他用戶發(fā)送的消息都靠左顯示 ， 并設置不同背景色
這樣我們就完成了一個簡單的node + 群聊功能，你從中學習到了什么了？？？
最后來一睹風采
總結(jié)
+ 群聊功能和核心不知道大家有沒有g(shù)et到了？？？ 其實核心代碼就是它：
function boardcast(obj) { server.connections.forEach(function(conn) { conn.sendText(JSON.stringify(obj)); })}
向所有連接者發(fā)送消息，這樣所有連接者都能接收到消息 。
公告
為了感謝大家一直以來的支持，小編發(fā)起了抽獎活動，大家可以去參與，轉(zhuǎn)發(fā)抽獎活動和小編即可參與，抽出5名小伙伴每人20元話費獎勵 。再次感謝大家的支持 。
本文到此結(jié)束，希望對大家有所幫助 。