uni-app+php+workman实现简单聊天功能之交互实现(会话列表)

<template>
    <view>
        <!-- 消息列表 -->
        <template v-if="list.length>0">
            <block v-for="item,index in list" :key="index">
                <msg-list :item="item" :index="index"></msg-list>
            </block> 
        </template>
        <view>
<template>

<script>
    import msgList from "@/components/msg/msg-list.vue"
    export default {
    components:{msgList},
    data() {
        return {
            firstload:false,
            show:false,
            list:[]
        }
    },
    onShow(){
        //获取消息列表
        this.getdata()
        console.log(this.list)
    },
    onLoad() {
        //监听消息
        uni.$on('UserChat',data=>{
            //将最新消息置顶更新
            let index = this.list.findIndex(val=>{
                return val.userid === data.from_id;
            });
            //如果当前会话存在则更新时间、内容、未读数，并进行置顶
            if(index!==-1){
                this.list[index].data = data.data
                this.list[index].time = data.time
                this.list[index].noreadnum++;
                //置顶
                this.list = this.$chat.__toFirst(this.list,index)
                return

            }
            //如果当前会话不存在--新消息 则将当前消息追加到消息列表最前面
            let obj = this.$chat.__format(data,{type:"chatlist"});
            obj.noreadnum=1;
            this.list.unshift(obj);
        })
    },
    methods: {
        getdata(){
            try{
                let userid = User.userinfo.id;
                if(!userid) return this.firstload = true;
                this.list = [];
                let list = uni.getStorageSync('chatlist'+userid)//获取消息列表
                list = list?JSON.parse(list):[];
                this.list = list;//添加到消息列表
            }catch(e){
                uni.showToast({
                    title: '加载失败~',
                    icon:'none'
                });
            }
            this.firstload = true;

        }

...

<template>
        <view class="flex align-center p-2 border-bottom animate__animated animate__fast animate__fadeIn" @click="open">
            <image :src="item.userpic" style="height: 80rpx;width: 80rpx;" 
            class="rounded-circle mr-2">
            </image>
            <view class="flex flex-column flex-1">
                <view class="flex align-center justify-between">
                    <text class="font-md">{{item.username}}</text>
                    <text class="font font-sm text-secondary">{{item.time}}</text>
                </view>
                <view class="flex align-center justify-between">
                    <text class="text-secondary text-ellipsis" style="max-width: 500rpx;">
                        {{item.data}}
                    </text>
                    
                    <uni-badge :text="getItemNoreadnum" type="error" v-if="getItemNoreadnum"></uni-badge>
                </view>
            </view>
        </view>
</template>

<script>
    import uniBadge from "@/components/uni-ui/uni-badge/uni-badge.vue"
    export default{
        components:{
            uniBadge
        },
        //接受聊天数据
        props:['item'],
        methods:{
            open(){
                
                uni.navigateTo({
                    "url":"../../pages/user-chat/user-chat?userinfo="+JSON.stringify({
                        userid:this.item.userid,
                        username:this.item.username,
                        userpic:this.item.userpic
                    })
                })
                this.$chat.Read(this.item)//更新未读数据   
            }
            
        },
        computed:{
            getItemNoreadnum(){
                return this.item.noreadnum
            }
        }
    }
    ...

<template>
    <view>
        <!-- 聊天列表 -->
        <scroll-view scroll-y="true" 
        style="position: absolute;left:0;top:0;right:0;bottom: 100rpx;"
        :scroll-into-view="scrollInfo" scroll-with-animation>
            <block v-for="item,index in list" :key="index">
                <view :id="'chat'+index">
                    <!-- 头像一直左上方 | 左边 | 如果不是第一条消息传入上一次消息时间-->
                    <user-chat-list  v-if="!item.isme" :item="item" :index="index " :pretime="index>0?list[index-1].create_time:0"></user-chat-list>
                    
                </view>
                <!-- 右边 -->
                <view v-if="item.isme" class="flex align-start px-2" style="flex-direction: row-reverse;">
                    <image :src="item.userpic" style="width:100rpx;height:100rpx" class="rounded-circle">
                        <view class="bg-light p-2 rounded mx-2" style="min-width: 200rpx;max-width: 400rpx;">
                            {{item.data }}{{item.userid}}
                        </view>
                    </image>
                </view>
            </block>
            
        </scroll-view>
        <bottom-input @submit="submit"></bottom-input>
    </view>
</template>

export default {
        components:{
            userChatList,bottomInput
        },
        data() {
            return {
                scrollInfo:"",
                scrollH:500,
                focus:true,
                loadtext:'加载更多',
                list:[]
            }
        },
        onLoad(e){
             //获取发送方用户信息
             let userinfo = JSON.parse(e.userinfo)
             //没有该用户
             if(!userinfo.userid){
                 uni.showToast({
                     title: '该用户不存在',
                    icon:'none'
                 });
                 return uni.navigateBack({
                     delta:1
                 })
             }
             //设置当前聊天对象
             this.$chat.CurrentToUser = {
                 userid:userinfo.userid,
                 username:userinfo.username,
                 userpic:userinfo.userpic
             }
             //修改导航标题
             uni.setNavigationBarTitle({
                 'title':userinfo.username
             })
        },//退出聊天的时候
        onUnload() {
            //初始化聊天对象
            this.$chat.CurrentToUser = {
                userid:0,
                username:"",
                userpic:"",
            }
        },
        onReady(){
            this.__init()
        },
        methods: {
            //接受聊天数据(首次只获取10条数据)
            async getdata(isall = false){
                try{
                    let key = 'chatdetail_'+this.User.userinfo.id+'_'+this.$chat.CurrentToUser.userid;
                    //获取聊天记录
                    let list = uni.getStorageSync(key);
                    // console.log(list)
                    list = list?JSON.parse(list):[];
                    //首次加载10条
                    if(!isall && list.length>10){
                        return this.list = list.splice(0,10);
                    }
                    //加载剩下的数据
                    this.list = list;
                    this.loadtext = '';
                    
                    
                }catch(e){
                    uni.showToast({
                        title:'加载失败',
                        icon:'none'
                    })
                }
            },
            submit(data){
                //发送消息
                let obj = this.$chat.Send({'type':'text','data':data,'isme':true});
                console.log(obj)
                this.$.post('chat/send',{
                     'to_id':this.$chat.CurrentToUser.userid,
                    'from_userpic':'https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png',
                    'type':'text',
                    'data':data
                },{
                    header: {
                        'Accept':'application/json',
                        'Authorization':'Bearer '+uni.getStorageSync('access_token')
                    }
                }).then(res=>{
                    console.log(res)
                    console.log('发送完毕')
                    
                    //错判断
                     //成功处理
                     // return this.resultUserBind(res.data.data)
                })
                
                this.list.push(obj)
                
                this.pageToBottom()
            },
            //滚动底部
            pageToBottom(){
                let lastIndex = this.list.length-1
                if(lastIndex<0)return;
                this.scrollInfo = 'chat'+lastIndex
            },
            //初始化参数
            __init(){
                //获取窗口消息
                try{
                    const res = uni.getSystemInfoSync();
                    this.scrollH = res.windowHeight-uni.upx2px(101);
                    
                }catch(e){
                    
                }
                //获取聊天历史记录
                this.getdata();
                //至于底部
                this.pageToBottom()
                //监听消息
                uni.$on('UserChat',data=>{
                    this.list.push(this.$chat.__format(data,{
                        type:'chatdetail',
                        isme:false,
                        olddata:this.list
                    }));
                this.pageToBottom()
                console.log('监听到数据')
                // console.log(data)
                })
            }
        }
        
    }
</script>

public function send(ChatRequest $request){
        // 1. 验证数据是否合法
        // 2. 组织数据

        $data = $this->resdata($request);
        // return response()->json($data);
        $to_id = $request->to_id;
        // 3. 验证对方用户是否在线
        if (Gateway::isUidOnline($to_id)) {
            // 直接发送
            Gateway::sendToUid($to_id,json_encode($data));
            // 写入数据库
            // 返回发送成功
            return $this->showResCodeWithOutData('ok');
        }
        // 不在线，写入消息队列
        // 获取之前消息
       
        $Cache = Cache::get('userchat_'.$to_id);
        if (!$Cache || !is_array($Cache)) $Cache = [];
        $Cache[] = $data;
        // 写入数据库
        // 写入消息队列（含id）
        Cache::set('userchat_'.$to_id,$Cache);
        return $this->showResCodeWithOutData('ok');
    }