livestream-miniapp/miniprogram/pages/room/room.ts

// pages/room/room.ts

import { fetchRoom, RoomDetailType } from '../../api/fetchRoom'
import { shareRoom } from '../../api/shareRoom'
import { getRTCSig } from '../../api/sign'
import { server } from '../../config'
import { authorizeRecord } from '../../utils/util'
import { audioManger, AudioManger } from './libs/audioManager'
// import Dialog from 'tdesign-miniprogram/dialog/index';
// const { io } = require('../../utils/socket.io-v4-no-msgpack')
const { io } = require('../../utils/socket.io-v4.msgpack')

Page({
  socket: {} as SocketIOClient.Socket,
  audioManger: {} as AudioManger,
  /**
   * 页面的初始数据
   */
  data: {
    patchProfile: false,
    patchProfilePhone: false,
    role: 'customer',
    roomId: '',
    webUrl: '',
    userInfo: {} as GlobalUserInfo,
    webviewParams: {} as SocketParams,
    isTour: 0,
    m: '',
    showShare: false

  },


  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options: { roomId: string, role: string, isTour: string }) {
    console.log('options', options)
    const auth = await authorizeRecord();
    console.log('auth', auth)

    await this.autoLogin();

    if (options.isTour) {
      this.setData({ isTour: Number(options.isTour) })
    }

    if (options.role) {
      this.setData({ role: options.role })
    }
    if (options.roomId) {
      await this.setRole(options.roomId);
    }

    const isSuccess = await this.setWebViewUrl();
    if (isSuccess) {
      this.handleJoinSocket();
      this.handleJoinRTC();
    }
  },

  async setRole(roomId: string) {
    let roomInfo: RoomDetailType
    roomInfo = await fetchRoom(roomId);
    let num = roomInfo.sceneData && roomInfo.sceneData?.length ? roomInfo?.sceneData[0].num :'';
    if (!num) {
      console.error('场景码不能为空！');
      wx.showModal({
        title: '提示',
        content: '服务器初始化异常，请稍后再试！',
        showCancel: false,
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
        
            wx.redirectTo({
              url:"/pages/myScene/myScene"
            })
          }
        }
      });
      return
    }
    this.setData({ roomDetail: roomInfo, roomId: roomId, m: num })


    if (roomInfo && roomInfo.hostStatus === 0) {
      this.setData({
        isTour: 1
      })

    }
    //1.是加入带看
    if (roomInfo && roomInfo.hostStatus === 1) {
      this.setData({
        isTour: 0
      })

    }
    if (roomInfo && roomInfo.isHost === 1) {
      // wx.showModal({
      //   title: '测试',
      //   content: '当前是leader',
      //   success(res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定')
      //     } else if (res.cancel) {
      //       console.log('用户点击取消')
      //     }
      //   }
      // });

      this.setData({ role: 'leader' })
    } else {
      // wx.showModal({
      //   title: '测试',
      //   content: '当前不是leader',
      //   success(res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定')
      //     } else if (res.cancel) {
      //       console.log('用户点击取消')
      //     }
      //   }
      // });
      this.setData({ role: 'customer' })
    }
  },

  webViewParams() {
    // const regex = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
    // '⎕'
    // if (!regex.test(this.data.userInfo.nickName)) {
    //   this.setData({
    //     'userInfo.nickName': 'user_' + this.data.userInfo.wxUserId
    //   })
    // }

    const filterNickname = (value: string) => {
      var reg = /\\|\/|\?|\？|\*|\"|\“|\”|\'|\‘|\’|\<|\>|\{|\}|\[|\]|\【|\】|\：|\:|\、|\^|\$|\#|\&|\%|\!|\~|\`|\|/g;
      var temp = value.replace(reg, "◻");

      this.setData({
        'userInfo.nickName': temp
      })
      console.log('filterNickname', temp);

    }
    filterNickname(this.data.userInfo.nickName);

    const params: SocketParams = {
      vruserId: `${this.data.userInfo.wxUserId}`,
      roomId: `${this.data.roomId}`,
      role: this.data.role,
      avatar: encodeURIComponent(this.data.userInfo.avatarUrl),
      name: this.data.userInfo.nickName.length > 14 ? encodeURIComponent(this.data.userInfo.nickName.substr(0, 14) + '...') : encodeURIComponent(this.data.userInfo.nickName),
      isTour: this.data.isTour,
      m: this.data.m,
      fromMiniApp: 1,
    }
    this.setData({
      webviewParams: params
    })
    type Keys = keyof typeof params;
    return Object.keys(params).map(key => `${key}=${params[key as Keys]}`).join('&')

  },

  async autoLogin() {
    const app = getApp<IAppOption>();
    if (!app.globalData.isLogin) {
      const userInfo = await app.login(false)
      console.log('hehe', userInfo)
      userInfo && this.updateUserInfo(userInfo);
    }
  },
  async setWebViewUrl() {
    const app = getApp<IAppOption>();
    if (!this.data.userInfo.nickName || !this.data.userInfo.avatarUrl) {
      this.setData({
        patchProfile: true
      })
      if (!this.data.userInfo.phoneNumber) {
        this.setData({
          patchProfilePhone: true
        })
      }
      return Promise.resolve(false)
    }
    const params = this.webViewParams();
    const webURL = server.webview + '?' + params
    console.log('webviewServer', webURL)
    this.setData({
      webUrl: webURL
    })
    await app.sleep(100);
    return Promise.resolve(true)
  },
  async handleProfilePatch() {
    const app = getApp<IAppOption>();
    const roomId = this.data.roomId
    this.setRole(roomId);
    await app.sleep(200);
    const isSuccess = await this.setWebViewUrl();
    if (isSuccess) {
      this.handleJoinSocket();
      this.handleJoinRTC();
    }

  },
  updateUserInfo(data?: any) {
    console.log('webview-updateUserInfo')
    const app = getApp<IAppOption>();
    const updateUserInfo = app.globalData.userInfo
    const updateData = Object.assign({}, updateUserInfo, data)
    this.setData({
      userInfo: updateData
    })
  },
  handleJoinSocket() {

    this.socket = io(server.sokcet, {
      path: "/ws-sync",
      transport: ["websocket"],
      parser: false
    });
    this.socket.on('connect', async () => {
      const params = this.data.webviewParams
      this.socket.emit('join', {
        userId: params.vruserId,
        roomId: params.roomId,
        role: params.role,
        isClient: true
      })
    });
    this.socket.on('action', this.handleSocketAction)
    this.socket.on('signal', this.handleSocketSignal)

  },
  async handleJoinRTC() {
    const userId = wx.getStorageSync('wxUserId')
    const sign = await getRTCSig(userId);
    const isTour = this.data.isTour

    this.audioManger = audioManger({
      roomId: this.data.webviewParams.roomId,
      userId: userId,
      sdkAppID: sign.sdkAppId,
      sig: sign.sign,
      role: this.data.webviewParams.role,
      noMute: false,
    })
    if (!this.audioManger.ring) {
      this.audioManger.start()
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    const app = getApp<IAppOption>();
    app.watch('userInfo', this.updateUserInfo)

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    this.audioManger && this.audioManger.stop()

    if (this.socket) {
      this.socket.off('action', this.handleSocketAction)
      this.socket.off('signal', this.handleSocketSignal)
      this.socket && this.socket.disconnect()
    }

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  onShareAppMessage: function (res) {
    const roomId = this.data.roomId
    const userId = this.data.userInfo.wxUserId
    const isTour = this.data.isTour
    const newPicUrl = this.data.roomDetail.roomCoverUrl || 'http://video.cgaii.com/new4dage/images/images/home_2_a.jpg'
    const base = {
      imageUrl: newPicUrl,
      path: `/pages/room/room?roomId=${roomId}&role=customer&isTour=${isTour}`
    }
    if (roomId && userId) {
      shareRoom(roomId, userId);
    }

    console.error('share', base, roomId, userId);
    if (res.from === 'button') {
      this.setData({
        showShare: false
      })
      return {
        ...base,
        title: '【好友邀请】一起来带看吧！',
      }
    } else {
      return {
        ...base,
        title: '【好友邀请】一起来带看吧！',
      }
    }
  },
  handleSocketAction(action: SocketAction) {
    console.warn('action', action)
    switch (action.type) {
      case 'users-muted':
        this.handleActionMuted(action.userId, action.muted)
        break;
      case 'users-inviteMember':
        this.handleInviteMember(action.userId, action.data)
        break;
      case 'changeScene':
        this.audioManger.changeMute(true);
        break;
      default:
        break;
    }
  },
  handleSocketSignal(data) {
    debugger
  },
  handleActionMuted(userId: string | undefined, muted: boolean | undefined) {
    console.error('handleActionMuted');
    if (userId && typeof muted !== "undefined") {
      const f_userId = userId.replace('user_', '')
      const app = getApp<IAppOption>();
      if (app.globalData.userInfo?.wxUserId == f_userId) {
        this.audioManger.changeMute(muted)
      }
    }
  },
  handleInviteMember(userId: string | undefined, data: any) {
    if (userId) {
      const f_userId = userId.replace('user_', '')
      const app = getApp<IAppOption>();
      if (app.globalData.userInfo?.wxUserId == f_userId) {
        this.setData({
          showShare: true
        })
      }
    }
  },
  cancelShare() {
    this.setData({
      showShare: false
    })
  }

})