您好,登錄后才能下訂單哦!
小編給大家分享一下基于node+vue如何實(shí)現(xiàn)簡(jiǎn)單的WebSocket聊天功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
首先,我需要用到node的nodejs-websocket模塊
使用yarn進(jìn)行安裝
yarn add nodejs-websocket --save
當(dāng)然,你也可以用npm進(jìn)行安裝
npm i nodejs-websocket --save
安裝完畢之后,我們開(kāi)始寫(xiě)服務(wù)端的代碼,首先,我用node在本地起了一個(gè)node服務(wù)器用來(lái)開(kāi)啟websocket服務(wù)
sock.js:
let ws = require("nodejs-websocket"); console.log("開(kāi)始建立鏈接"); ws.createServer(function (conn) { conn.on("text", function (str) { console.log("收到的信息為", str); conn.send(`${str}(機(jī)器人`) }); conn.on("close", function (code, reason) { console.log("關(guān)閉連接") }); conn.on("error", function (code, reason) { console.log("異常關(guān)閉") }) }).listen(8001); console.log("鏈接建立完畢");
服務(wù)端主要是用nodejs-websocket用來(lái)開(kāi)啟服務(wù),以及返回前端需要的值,這里我只是做了一個(gè)簡(jiǎn)單的處理,在接受值得后面加了一個(gè)‘機(jī)器人'的string,
然后,我們需要開(kāi)啟這個(gè)node服務(wù),
命令后面的路徑一定要找對(duì),我是把sock.js放在了根目錄的socket文件夾下面
執(zhí)行
yarn socket
最后,看我們的客戶端,客戶端我是想有一個(gè)輸入框,然后有個(gè)聊天框:
<template> <div class="test3"> <div class="msg" ref="box"> <div v-for="item in list" :class="[item.type,'msg-item']"> <p> {{item.content}} </p> </div> </div> <div class="input-group"> <input type="text" v-model="contentText"> <button @click="sendText">發(fā)送</button> </div> </div> </template> <script> export default { name: "index3", data() { return { list: [],//聊天記錄的數(shù)組 contentText: "",//input輸入的值 } }, methods: { //發(fā)送聊天信息 sendText() { let that = this; this.list = [...this.list, {type: "mine", content: this.contentText}];//通過(guò)type字段進(jìn)行區(qū)分是自己(mine)發(fā)的還是系統(tǒng)(robot)返回的 this.backText(function () { that.contentText = "";//加回調(diào)在得到返回?cái)?shù)據(jù)的時(shí)候清除輸入框的內(nèi)容 }); }, backText(callback) { let that = this; if (window.WebSocket) { let ws = new WebSocket("ws://192.168.11.169:8001"); ws.onopen = function (e) { console.log("鏈接服務(wù)器成功"); console.log("that.contentText is", that.contentText); ws.send(that.contentText); callback(); }; ws.onclose = function (e) { console.log("服務(wù)器關(guān)閉") }; ws.onerror = function () { console.log("服務(wù)器出錯(cuò)") }; ws.onmessage = function (e) { that.list = [...that.list, {type: "robot", content: e.data}] } } } }, watch: { //監(jiān)聽(tīng)list,當(dāng)有修改的時(shí)候進(jìn)行div的屏幕滾動(dòng),確保能看到最新的聊天 list: function () { let that = this; setTimeout(() => { that.$refs.box.scrollTop = that.$refs.box.scrollHeight; }, 0); //加setTimeout的原因:由于vue采用虛擬dom,我每次生成新的消息時(shí)獲取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那條消息被隱藏掉了 } }, mounted() { } }; </script> <style scoped lang="scss"> .test3 { text-align: center; } .msg { width: 100px; height: 100px; overflow: auto; padding-top: 5px; border: 1px solid red; display: inline-block; margin-bottom: 6px; .msg-item { position: relative; overflow: hidden; p { display: inline-block; border-radius: 40px; background: #3C3D5A; color: white; float: left; padding: 2px 12px; margin: 0 0 2px 0; max-width: 70%; text-align: left; box-sizing: border-box; } &.mine { p { float: right; background: aquamarine; color: white; } } } } </style>
看一下最終效果:
看完了這篇文章,相信你對(duì)“基于node+vue如何實(shí)現(xiàn)簡(jiǎn)單的WebSocket聊天功能”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。