H5聊天页面-uniapp

第一次写出这么完美的聊天页面（自我感觉良好），有点激动，也不知道在小程序或者在app有没有问题，反正解决了当期的问题
一是键盘遮挡输入框问题（这次没遇到，小程序篇遇到了小程序聊天）
二是加载历史数据的时候，会把当前浏览的数据顶下去（反转页面来解决的）
三是问题二搞出来，就是只有少量数据的时候，消息在底部而不是在顶部
废话不多说，直接上代码

<template>
  <view class="hotel_chat">
<!--    :style="{height: (contentViewHeight-bottomHeight) + 'px'}"-->
    <view class="chat_content" id="chat_content">
<!--      :style="{height: (contentViewHeight-bottomHeight) + 'px'}"   :scroll-into-view="scrollToView"-->
      <scroll-view class="scroll_view" :lower-threshold="50" :upper-threshold="50"  :scroll-anchoring="true" :scroll-top="currentTop" id="scrollview" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scrollList" @touchstart="onTouchStart">

        <view class="chat_list" id="msglistview">
          <view class="list_content" v-for="(item,index) in chatList" :key="item.id">

            <view class="list_right" v-if="item.fromUid !=  fromUid" :id="'msg' + item.id">
              <view class="list_avatar">
                <image src="https://htres.78plat.com/miniv3/static/user_default.png"></image>
              </view>
              <div class="content_right">
                <view class="list_context">
                  <view class="list_title">{{item.guestName}}</view>
                  <view class="time_text">{{handlerMsgTime(item.timestamp)}}</view>
                </view>
                <view class="right_bg" v-if="item.content&&item.chatType=='text'">
                  <text class="text_info">{{item.content}}</text>
                </view>
                <view class="audio_box right_bg" v-if="item.content&&item.chatType=='audio'" @click="playAudio(item,index)">
                  <!-- 语音 -->
                  <image v-if="index == currentIndex" src="/static/user_audio_gif.gif" mode=""></image>
                   <image v-else src="/static/user_audio_icon.png" mode=""></image>
                  <view class="audio_text">{{item.duration || 0}}s</view>

                </view>
              </div>

            </view>
            <!-- 右边 -->
            <view class="list_left" v-else :id="'msg' + item.id">
              <view class="list_avatar">
                <image src="https://htres.78plat.com/miniv3/static/hotel_default.png"></image>
              </view>
              <div class="content_left">
                <view class="list_context">
                  <view class="list_title">{{item.guestName}}</view>
                  <view class="time_text">{{handlerMsgTime(item.timestamp)}}</view>
                </view>
                <view class="left_bg" v-if="item.content&&item.chatType=='text'">
                  <text class="text_info">{{item.content}}</text>
                </view>
                <view class="audio_box left_bg" :style="{width: widthPercent(item.duration)+'%'}" v-if="item.content&&item.chatType=='audio'"  @click="playAudio(item,index)">
                  <!-- 语音 -->
                  <view class="audio_text">{{item.duration || 0}}s</view>
                  <image v-if="index == currentIndex" src="/static/hotel_audio_gif.gif" mode=""></image>
                  <image v-else src="/static/hotel_audio_icon.png" mode=""></image>
                </view>
              </div>

            </view>
            <!-- 左边 -->
          </view>
        </view>
      </scroll-view>
    </view>


<!--    :style="{bottom: felxHeight + 'px'}"-->
    <view class="chat_below" id="below" >
<!--      <view class="below_left" @click="Tcyy">常用语</view>-->
      <view class="below_right">
        <input :adjust-position="false" v-model="msgValue" :focus="focus" @focus="inputFocus" @blur="inputBlur" placeholder="请输入内容"/>
        <view class="rg_btn" @click="sendClick">发送</view>
      </view>
    </view>
  </view>
</template>

<script>
import socketIO from '@/common/utils/newSocket'
export default {
  data() {
    return {
      chatList: [

      ],
      newChatList: [
        {
          name: '小明',
          content: '你好啊，小红同学你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊',
          time: '1742196395',
          id: 1,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 2,
          userId: '456789'
        },
        {
          name: '小明',
          content: '你好啊，小红同学你好啊你好啊你好啊你好啊你好啊',
          time: '1742196395',
          id: 3,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 4,
          userId: '456789'
        },
        {
          name: '小明',
          content: '你好啊，小红同学',
          time: '1742196395',
          id: 5,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 6,
          userId: '456789'
        },
        {
          name: '小明',
          content: '你好啊，小红同学',
          time: '1742196395',
          id: 7,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 8,
          userId: '456789'
        },
        {
          name: '小明',
          content: '你好啊，小红同学',
          time: '1742196395',
          id: 9,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 10,
          userId: '456789'
        },
        {
          name: '小明',
          content: '你好啊，小红同学',
          time: '1742196395',
          id: 11,
          userId: '123456'
        },
        {
          name: '小红',
          content: '你好啊，小红同学',
          time: '1742196398',
          id: 12,
          userId: '456789'
        },
      ],
      scrollToView: '',
      scrollViewHeight: '',
      contentViewHeight: '',
      bottomHeight: '',
      felxHeight: '',
      msgValue: '',
      focus: false,
      socketCase: null,
      shopId: '',
      merchantId: '',
      mobile: '',
      guestName: '',
      roomNo: '',
      shopName: '',
      userId: '',
      userPhone: '',
      userName: '',
      chatUrl:'',
      pageCount: 0,
      pageNo: 1,
      pageSize: 10,
      fromUid: '',
      toUid: '',
      currentIndex:null,
      audioContext: null, // 存储音频实例
      currentTop: 0,
      oldScrollTop: 0
    };
  },
  onLoad(options) {
    this.shopId= options.shopId || '320'
    this.merchantId= options.merchantId || '110060146'
    this.mobile= options.mobile || '18365211931'
    this.guestName= options.guestName || '李在明'
    this.roomNo= options.roomNo || '888'
    this.shopName = options.shopName || '合肥市格林豪泰爱电竞'
    this.userId = options.userId || '4685'
    this.userPhone= options.userPhone || ''
    this.userName= options.userName || ''
    const res = uni.getSystemInfoSync();   //获取手机可使用窗口高度 api为获取系统信息同步接口
    this.scrollViewHeight = res.windowHeight;   //像素   因为给出的是像素高度px
    this.contentViewHeight = res.windowHeight; //像素   因为给出的是像素高度px

//获取自定义头部和消息框高度
    let that = this;
    this.

// newSocket.js
class socketIO {
    constructor(data, time, url) {
        this.socketTask = null
        this.is_open_socket = false //避免重复连接
        this.url = url ? url : ''  //连接地址
        this.data = data ? data : null
        this.connectNum = 1 // 重连次数
        this.traderDetailIndex = 100 // traderDetailIndex ==2 重连
        this.accountStateIndex = 100 // accountStateIndex ==1 重连
        this.followFlake = false // followFlake == true 重连
        //心跳检测
        this.timeout = time ? time : 15000 //多少秒执行检测
        this.heartbeatInterval = null //检测服务器端是否还活着
        this.reconnectTimeOut = null //重连之后多久再次重连
    }

    // 进入这个页面的时候创建websocket连接【整个页面随时使用】
    connectSocketInit(data) {
        this.data = data
        this.socketTask = uni.connectSocket({
            url: this.url,
            success: () => {
                console.log("正准备建立websocket中...");
                // 返回实例
                return this.socketTask
            },
        });
        this.socketTask.onOpen((res) => {
            this.connectNum = 1
            console.log("WebSocket连接正常！");
            uni. $emit('connectSuccess') this.send(data) clearInterval(this.reconnectTimeOut) clearInterval(this.heartbeatInterval) this.is_open_socket = true; this.start(); // 注：只有连接正常打开中 ，才能正常收到消息 this.socketTask.onMessage((e) => { // 字符串转json let res = JSON.parse(e.data); console.log(e,"获取到消息res---------->", res) // 这里 查看 推送过来的消息 if (res) { uni.$ emit('getPositonsOrder', JSON.parse(res)); 
                }
            });
        })
        // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
        uni.onSocketError((res) => {
            console.log('WebSocket连接打开失败，请检查！');
            this.socketTask = null
            this.is_open_socket = false;
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            uni. $off('getPositonsOrder') uni.$ off('connectSuccess')
            if (this.connectNum < 6) {
                uni.showToast({
                    title: `WebSocket连接失败，正尝试第 ${this.connectNum}次连接`, icon: "none" }) this.reconnect(); this.connectNum += 1 } else { uni.$ emit('connectError');
                this.connectNum = 1
            }

        });
        // 这里仅是事件监听【如果socket关闭了会执行】
        this.socketTask.onClose(() => {
            console.log("已经被关闭了-------")
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            this.is_open_socket = false;
            this.socketTask = null
            uni. $off('getPositonsOrder') uni.$ off('connectSuccess')
            if (this.connectNum < 6) {
                this.reconnect();
            } else {
                uni.$emit('connectError');
                this.connectNum = 1
            }

        })
    }
    // 主动关闭socket连接
    Close() {
        if (!this.is_open_socket) {
            return
        }
        this.socketTask.close({
            success() {
                console.log("SocketTask 关闭成功");
                // uni.showToast({
                //  title: 'SocketTask 关闭成功',
                //  icon: "none"
                // });
            }
        });
    }
    //发送消息
    send(data) {
        // console.log("data---------->", data);
        // 注：只有连接正常打开中 ，才能正常成功发送消息
        if (this.socketTask) {
            this.socketTask.send({
                data: JSON.stringify(data),
                async success() {
                    console.log("消息发送成功");
                },
            });
        }
    }
    //开启心跳检测
    start() {
        this.heartbeatInterval = setInterval(() => {
            this.send({
                "traderid": 10260,
                "type": "Ping"
            });
        }, this.timeout)
    }
    //重新连接
    reconnect() {
        //停止发送心跳
        clearInterval(this.heartbeatInterval)
        //如果不是人为关闭的话，进行重连
        if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
            .followFlake)) {
            this.reconnectTimeOut = setInterval(() => {
                this.connectSocketInit(this.data);
            }, 5000)
        }
    }
    /**
     * @description 将 scoket 数据进行过滤 
     * @param {array} array
     * @param {string} type 区分 弹窗 openposition 分为跟随和我的
     */
    arrayFilter(array, type = 'normal', signalId = 0) {
        let arr1 = []
        let arr2 = []
        let obj = {
            arr1: [],
            arr2: []
        }
        arr1 = array.filter(v => v.flwsig == true)
        arr2 = array.filter(v => v.flwsig == false)
        if (type == 'normal') {
            if (signalId) {
                arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
                return arr1
            } else {
                return arr1.concat(arr2)
            }
        } else {
            if (signalId > 0) {
                arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
                obj.arr1 = arr1
            } else {
                obj.arr1 = arr1
            }
            obj.arr2 = arr2

            return obj
        }
    }
}
module.exports = socketIO

左右联动

bugming

Comments | NOTHING

取消回复

三爷的blog