uni-app 前端聊天室 Socket 使用 挖坑

陆先森

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
      })
  })
  },