小編給大家分享一下node+vue如何實現(xiàn)簡單的WebSocket聊天功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
最近學(xué)習(xí)了一下websocket的即時通信,感覺非常的強大,這里我用node啟動了一個服務(wù)進行websocket鏈接,然后再vue的view里面進行了鏈接,進行通信,廢話不多說,直接上代碼吧,
首先,我需要用到node的nodejs-websocket模塊
使用yarn進行安裝
yarn add nodejs-websocket --save
當然,你也可以用npm進行安裝
npm i nodejs-websocket --save
安裝完畢之后,我們開始寫服務(wù)端的代碼,首先,我用node在本地起了一個node服務(wù)器用來開啟websocket服務(wù)
sock.js:
let ws = require("nodejs-websocket"); console.log("開始建立鏈接"); ws.createServer(function (conn) { conn.on("text", function (str) { console.log("收到的信息為", str); conn.send(`${str}(機器人`) }); 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用來開啟服務(wù),以及返回前端需要的值,這里我只是做了一個簡單的處理,在接受值得后面加了一個‘機器人’的string,
然后,我們需要開啟這個node服務(wù),
命令后面的路徑一定要找對,我是把sock.js放在了根目錄的socket文件夾下面
執(zhí)行
yarn socket
最后,看我們的客戶端,客戶端我是想有一個輸入框,然后有個聊天框:
<template> <p class="test3"> <p class="msg" ref="box"> <p v-for="item in list" :class="[item.type,'msg-item']"> <p> {{item.content}} </p> </p> </p> <p class="input-group"> <input type="text" v-model="contentText"> <button @click="sendText">發(fā)送</button> </p> </p> </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}];//通過type字段進行區(qū)分是自己(mine)發(fā)的還是系統(tǒng)(robot)返回的 this.backText(function () { that.contentText = "";//加回調(diào)在得到返回數(shù)據(jù)的時候清除輸入框的內(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ù)器出錯") }; ws.onmessage = function (e) { that.list = [...that.list, {type: "robot", content: e.data}] } } } }, watch: { //監(jiān)聽list,當有修改的時候進行p的屏幕滾動,確保能看到新的聊天 list: function () { let that = this; setTimeout(() => { that.$refs.box.scrollTop = that.$refs.box.scrollHeight; }, 0); //加setTimeout的原因:由于vue采用虛擬dom,我每次生成新的消息時獲取到的p的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>
看一下最終效果:
相關(guān)推薦:
2020年前端vue面試題大匯總(附答案)
vue教程推薦:2020新的5個vue.js視頻教程精選
以上是node+vue如何實現(xiàn)簡單的WebSocket聊天功能的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站名稱:node+vue如何實現(xiàn)簡單的WebSocket聊天功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于:http://aaarwkj.com/article0/jchoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、網(wǎng)站營銷、電子商務(wù)、網(wǎng)站維護、App設(shè)計、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容