channel.trigger() -> com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String

[erenkulaksiz]

Hello,

I'm using Pusher with Laravel, for my React Native application. I set up authorization route in my laravel like so:

public static function authPusher(Request $request) {
        $validator = Validator::make($request->all(), [
            'socketId' => 'required|string',
            'channelName' => 'required|string'
        ], [
            'socketId.required' => ResponseMessageEnums::SOCKET_ID_INVALID,
            'socketId.string' => ResponseMessageEnums::SOCKET_ID_INVALID,
            'channelName.required' => ResponseMessageEnums::CHANNEL_NAME_INVALID,
            'channelName.string' => ResponseMessageEnums::CHANNEL_NAME_INVALID,
        ]);

        if($validator->fails()) {
            return ['response' => ['error' => $validator->errors()->first()], 'status' => 400];
        }
        
        $socketId = $validator->validated()['socketId'];
        $channelName = $validator->validated()['channelName'];

        $uid = $request->attributes->get('uid');

        if($channelName != 'private-chat-' . $uid) {
            return ['response' => ['error' => ResponseMessageEnums::CHANNEL_NAME_INVALID], 'status' => 400];
        }

        // probably this is not the correct way but this works
        $pusher = new Pusher(config('broadcasting.connections.pusher.key'), config('broadcasting.connections.pusher.secret'), config('broadcasting.connections.pusher.app_id'));

        $response = $pusher->socket_auth($channelName, $socketId);

        return ['response' => $response, 'status' => 200];
}

In React Native,

async function connect() {
    try {
      await pusher.init({
        // @ts-ignore
        apiKey: process.env.EXPO_PUBLIC_PUSHER_API_KEY,
        // @ts-ignore
        cluster: process.env.EXPO_PUBLIC_CLUSTER,

        async onAuthorizer(channelName, socketId) {
          console.log(`Authorizing channel: ${channelName}`);
          const uid = validatedUser?.uid;
          const token = await auth().currentUser?.getIdToken();
          const pusherAuth = await authPusher({
            channelName,
            socketId,
            token: token || "",
            uid: uid || "",
          });
          return {
            // @ts-ignore
            auth: JSON.parse(pusherAuth).auth,
          };
        },

        onError: (message: string, code: Number) => {
          console.log(`Error: ${message}`);
        },

        onEvent: (event: PusherEvent) => {
          console.log(`Received event: ${event}`);
        },

        onSubscriptionSucceeded: (channelName: string) => {
          console.log(`Subscribed to channel: ${channelName}`);

          setIsConnected(true);
        },
      });

      const uid = validatedUser?.uid;

      await pusher.subscribe({ channelName: `private-chat-${uid}` });
      await pusher.connect();
    } catch (e) {
      console.log(`ERROR: ${e}`);

      setIsConnected(false);
    }
  }

Now, user is subscribed to the channel. But, the issue happends when i try to trigger an event in client:

async function sendMessage() {
  if (!inputMessage) return;
  console.log(`Sending message: ${inputMessage}`);

  const channel = pusher.getChannel(
    `private-chat-${validatedUser?.uid}`
  ) as PusherChannel;

  await channel.trigger(
    new PusherEvent({
      channelName: `private-chat-${validatedUser?.uid}`,
      eventName: "client-chat",
      data: {
        message: inputMessage,
      },
    })
  );
}

I have checked validatedUser?.uid, inputMessage. Theres nothing wrong here, also, i tried giving them only strings but this is the result:

I am using these packages:

"expo": "~50.0.7"
"react-native": "0.73.4"
"@pusher/pusher-websocket-react-native": "^1.3.1"

I didn't wanted to make a http request when client wants to trigger a message. But in this case, i will do that for sake of a solution, but i want to trigger client events. I also checked native java code, but i am not a java programmer, so i did not understand what was wrong in there.

[tuhinhossain]

I am also getting same issue