goddess
侠客
侠客
  • 最后登录2020-09-02
  • 发帖数17
阅读:244回复:1

uniapp做聊天

楼主#
更多 发布于:2020-08-27 11:30
一个自己写好了的聊天把,技术的话就是socket。
<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 @confirm="sendMessage" 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)-0
                uni.pageScrollTo({
                    scrollTop: viewH,
                    duration: 100
                });
            },
            found(){
                /**
                 * 创建一个 WebSocket 连接。
                 * */
                uni.connectSocket({
                    url:"wss://rrmallhome.sccenze.cn:8282",
                    success: () => {
                        this.openSock()
                    }
                })
            },
            openSock(){
                // '{"type":"ordertaker_bind","member_id":"xxx"}',msg的数据根据后端要啥就传啥,这边只要了一个id,和一个类型
                let msg=JSON.stringify({type:"ordertaker_bind",member_id:this.userData.user_id}) 
                // 监听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>
doubleyong
管理员
管理员
  • 最后登录2020-10-30
  • 发帖数917
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-08-28 08:49
666,现在好多公司都用UniAPP,楼主多更新点uniapp的文章哇(●°u°●)​ 」
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号