开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 998|回复: 0
收起左侧

[技术分享] uni-app 前端聊天室 Socket 使用 挖坑

[复制链接]
发表于 2021-10-26 16:25:08 | 显示全部楼层 |阅读模式   广东省揭阳市

1、打开一个socket连接  uni.connectSocket

这个连接VX只能用wss协yi,所以具体还是看需要和后台给的链接了,我这里只讲前端部分,后台给的地址大概长这样*ws://****.com/WebSocketServer.ashx,需要参数直接加在后面

    uni.connectSocket({
        url:'ws://*****.com/WebSocketServer.ashx?id:id'
    })

2、监听连接是否成功  uni.onSocketOpen

  • 参考官方文档,这些是一个监听api,写在uni.connectSocket之后,监听连接成功之后进行一次socket发送uni.sendSocketMessage,第一次为登录,具体的登录参数咨询后台
    uni.onSocketOpen((ress)=>{
        console.log('成功连接',ress)
        uni.sendSocketMessage({ data: JSON.stringify({MsgType: 1}) });//{MsgType: 1}为后台需要的参数
        //获取消息列表
    })

3、监听新消息  uni.onSocketMessage

  • 在这里是已经登录成功了,之后每次发送消息都需要调用一次的uni.sendSocketMessage,具体需要参数看后台需要了,每次调用发送uni.sendSocketMessage之后都能被uni.onSocketMessage监听到,只需要在监听到的时候重新获取一下消息
    uni.onSocketMessage((ress)=>{
        console.log('收到的消息',ress)
        let res = JSON.parse(ress.data);
        if(res.code==3||res.code==0){//这里的判断是在发送消息成功的时候,获取新的消息列表
            this.getMsg();
        }
    })

4、发送消息

  • 在连接成功 || 发送消息时,调用 uni.sendSocketMessage 成功之后,可以被3、监听,当然,对方也是会监听到这个消息的更新,并做更新后的操作

    部分代码

    //创建连接
    async openSocket(){
    const res = await post('Message/GetWebSocketId',{
        UserId: this.userId,
        Token: this.token,
        ToMemberId:this.id
    })
    // 创建连接
    uni.connectSocket({
        url:'ws://ywapi.wtvxin.com/WebSocketServer.ashx?Signature='+res.data.Signature,
        complete(err){
            console.log(err,res.data.Signature)
        }
    })
    uni.onSocketOpen((ress)=>{
        console.log('成功连接',ress)
        this.sendSocketMsg({MsgType: 1})
        this.getMsg();
    })
    uni.onSocketError((err)=>{
            console.log('失败连接',err)
            toast('系统错误,请重新尝试')
            setTimeout(()=>{
                uni.navigateBack();
            },1500)
    })。
    uni.onSocketMessage((ress)=>{
        console.log('收到的消息',ress)
        let res = JSON.parse(ress.data);
        if(res.code==3||res.code==0){
            this.getMsg();
        }
    })
    },
    // 发送socket
    sendSocketMsg(data){
    uni.sendSocketMessage({ data: JSON.stringify(data) });
    },
    //发送消息
    async send(data){
    const res = await post('Message/SendMessage',{
        UserId: this.userId,
        Token: this.token,
        ToMemberId:this.id,
        Info:this.Comment
    })
    this.sendSocketMsg({
        MsgType:3,
        Id:res.data.Id,
        Info:this.Comment
    })
    this.Comment='';
    },
    //获取消息
    async getMsg(){
    const res = await post('Message/ReadMessage',{
        UserId: this.userId,
        Token: this.token,
        ToMemberId:this.id,
    })
    const data = res.data;
    let time=0;
    data.map(item=>{
        let nowTime = new Date(item.AddTime).getTime();
        if((nowTime-time)/1000/60>5){
            item.AddTime = item.AddTime.slice(0,item.AddTime.lastIndexOf(':'))
        }else{
            item.AddTime ='';
        }
        time = nowTime;
    })
    this.list = data;
    //在下一次更新dom时滑动到底部
    this.$nextTick(function(){  
        // 滚动至页面底部
        uni.pageScrollTo({
            scrollTop: 99999999999,
            duration:100
        })
    })
    },
您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表