在這里插入代碼片 <template><view><view class="bgC"></view><view class="content" ><view v-for="(item,index) in message"><view class="flex flex-ac mar-T11" :class="item.static?'flex-drr':''"><image class="w50h50 mar-20" :src="item.image" mode=""></image><view class="mar-L20 mar-R20 bg-f pad-10 bor-r10"><rich-text :key="index" :nodes="item.htmll"></rich-text> </view></view></view></view><view class="fotBtn flex flex-ac flex-ja"><view class="h50 w500 bg-f bor-r5"><input v-model="inputMsg" class="w01h1 font-30 cor-3" type="text" value="" /></view><view class="w100 h50 flex flex-ac flex-jc bor-r10 bg-fcce77" @click="sendMessage"><text class="cor-f">發送</text></view></view></view> </template><script>import BASE_URL from "../../API/BASE_URL.js"export default {data() {return {BASE_URL,message:[],inputMsg:'',states:false,userData:{}}},onLoad(e) {this.userData=JSON.parse(e.userData)this.found()this.getHeight()},methods: {//點擊發送執行的函數sendMessage(){/**htmll為后端返回的文字內容*static來判斷是誰發送的消息，true為用戶，false為客服，用處就flex-drr動態類是否添加*image為頭像圖片*/if(this.inputMsg){//給服務器發送信息this.sendMsg()//自己的數組添加數據this.message.push({htmll:`<span>${this.inputMsg}</sapn>`,static:true,image:this.BASE_URL+this.userData.head_img})//清空輸入框數據this.inputMsg=''}else{/*** 彈框* */uni.showToast({icon:"none",title:"請輸入內容，再點擊發送"})}this.getHeight()},//獲取content的高/*** 獲取content的高，使用uni自帶的pageScrollTo滑動到最下面* * */getHeight(){//利用原生方法獲取節點let he = document.getElementsByClassName("content")[0]//利用getComputedStyle獲取節點的高let viewH =window.getComputedStyle(he).height//刪除高單位px，再轉成數字viewH=viewH.slice(0,viewH.length-2)-0uni.pageScrollTo({scrollTop: viewH,duration: 100});},found(){/*** 創建一個 WebSocket 連接。* */uni.connectSocket({url:"xxxxxxxxxxxx",success: () => {this.openSock()}})},openSock(){let msg=JSON.stringify({type:"ordertaker_bind",member_id:this.userData.user_id}) // '{"type":"ordertaker_bind","member_id":"5"}'// 監聽WebSocket連接打開事件。uni.onSocketOpen((res) => {// 通過 WebSocket 連接發送數據，需要先 uni.connectSocket，并在 uni.onSocketOpen 回調之后才能發送。uni.sendSocketMessage({data: msg,})});//監聽WebSocket接受到服務器的消息事件。uni.onSocketMessage( (res) => {let getmsg=JSON.parse(res.data)// 如果getmsg.type==="ordertaker_bind"為聊天記錄，getmsg.type==="send_to_member"為事實的消息if(getmsg.type==="ordertaker_bind"){getmsg.data.forEach((item)=>{this.message.push({htmll:`<span>${item.content}</sapn>`,static:item.type==="3"?true:false,image:item.avatar})})}else if(getmsg.type==="send_to_member"){this.message.push({htmll:`<span>${getmsg.data.content}</sapn>`,static:false,image:getmsg.data.avatar})}this.getHeight()});// 定時器，定時給服務器發送 data:'{"type":"ping"}',setInterval(()=>{uni.sendSocketMessage({data:'{"type":"ping"}',})},9000)},//每次點擊發送執行的函數，可以合在一起寫但是我分開了sendMsg(){uni.sendSocketMessage({data:'{"type":"ordertaker_send_message","content":"'+this.inputMsg+'"}',})},},} </script><style scoped>.content{padding-bottom: 200rpx;}.fotBtn{background-color: #FAF7FA;width: 100%;height: 80rpx;position: fixed;left: 0;bottom: 0;border-top: 1rpx solid #DDDDDD;}.h50{height: 50rpx;}.w500{width: 500rpx;}.w100{width: 100rpx;}.bor-r5{border-radius: 5rpx;}.bor-r10{border-radius: 10rpx;}.w50h50{min-width: 50rpx;min-height: 50rpx;max-width: 50rpx;max-height: 50rpx;}.ces{display: inline-block;height: 80rpx;border: 1rpx solid #FF0000;}.mar-20{margin: 20rpx;}</style>

總結

以上是生活随笔為你收集整理的uniapp聊天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。