Use Socket with MST

[xforcarlos]

hello i want to ask question what i did wrong

i destroy the instance from parent but the socket listener still update

Socket

class RealTime {
  provider: Socket
  timeOut: NodeJS.Timeout
  constructor() {
    this.provider = io(${Config.API_URL}, { transports: ["websocket"] })
  }

  setAuthToken(token: string) {
    this.provider.auth = { token }
    this.provider.connect()
    if (token) {
          this.setAuthToken(token)
    }
  }

  get isConnected() {
    return this.provider.connected
  }

  onConnect = (listener: (...arg: any) => void) => {
    this.provider.on("connect", listener)
  }

  onDisconnect = (listener: (...arg: any) => void) => {
    this.provider.on("disconnect", listener)
  }

  onChange = (event: string, listener: (...arg: any) => void) => {
    this.provider.on(event, listener)
  }

  remove = (event: string, listener: (...arg: any) => void) => {
    this.provider.off(event, listener)
  }

  onEmit = (event: string, ...arg: any) => {
    this.provider.emit(event, ...arg)
  }

  closeConnection = () => {
    this.provider.disconnect()
  }
}

const realTime = new RealTime()
const _rootStore = RootStoreModel.create({}, { realTime })

  export const OrdersModel = types
  .model("Orders")
  .props({
    pending: types.optional(types.array(OrderModel), []),
    running: types.optional(types.array(OrderModel), []),

  })
  .extend(withRealTime)
  
  .actions((self) => ({
 
    deleteRunningOrder(order: Order) {
      destroy(order)
    },
  
  })) 

export const OrderModel = types
  .model("Order")
  .props({
    _id: types.maybeNull(types.string),

  })
  .actions(withSetPropAction)
  .extend(withRealTime)
  .actions((self) => ({
    deleteOrder() {
      if (hasParent(self)) {
        getParent<typeof OrdersModel>(self, 2).deleteRunningOrder(self)
      }
    },
    
  }))
  
  .actions((self) => ({
    setOrderChange({ order }: { order: OrderSnapshotOut }) {
      self.deleteOrder()
    },
    afterCreate() {
      if (self.isPastOrder || !self._id) return
      self.realTime.onConnect(() => {
        __DEV__ && console.tron.log("order_Id-----onConnect", isAlive(self) && self._id)
      })
      self.realTime.onEmit("join-room", { room: self._id })
      self.realTime.onChange(self._id, this.setOrderChange) //. this listener still update after delete the order
    },
    beforeDestroy() {
      if (self.isPastOrder || !self._id) return
      self.realTime.remove(self._id, this.setOrderChange) 
    },
  }))

[coolsoftwaretyler]

Hey @xforcarlos - any chance you can put together a CodeSandbox that shows how you're using these models and what's going wrong? I'm having trouble reasoning about this with what you've posted so far, and without working code I can only really give you a guess.

My first thought is that your early return in beforeDestroy() is happening, so self.realTime.remove never gets called. It looks like you're returning early if self._id is falsy. Perhaps _id is null, since it's defined as being maybeNull. And again, that might trigger the early return.

[xforcarlos]

@coolsoftwaretyler
thanks for quick reply it's difficult to provide example in CodeSandbox it's a big cycle it will try small one