ایجاد اپلیکیشن‌های کوچکی که شگفت‌انگیز هستند: چگونه با استفاده از هر فریم‌ورک JS و پورتال Ionic، برنامه‌های موبایلی شیک و سریع بسازیم

import Portals, { getInitialContext } from "@ionic/portals";
import {
  IInitialContext,
  IMessage,
  IMessageSubscription,
  IPortalSubscription,
  ISubscribeOptions,
  ISubscriptionCallback,
} from "./types";

export const SendMessage = async (params: IMessage) => {
  return Portals.publish<IMessage>(params);
};

export const SubscribeToMessage = async (
  options: ISubscribeOptions,
  callback: ISubscriptionCallback
): Promise<IPortalSubscription> => {
  return Portals.subscribe<IMessageSubscription>(options, callback);
};

export const UnsubscribeFromMessage = async (
  options: IPortalSubscription
): Promise<void> => {
  return Portals.unsubscribe(options);
};

export const GetInitialContext = <T = unknown>():
  | IInitialContext<T>
  | undefined => {
  return getInitialContext();
};

import { useEffect, useState, useCallback, useRef } from "react";
import {
  SendMessage,
  SubscribeToMessage,
  UnsubscribeFromMessage,
  GetInitialContext,
  IPortalSubscription,
} from "js-miniapp-bridge";
import { MESSAGE_TOPICS } from "./constants";

function App() {
  const tokenSubscriptionRef = useRef<IPortalSubscription>();
  const initialContext = GetInitialContext<{ data: string }>();
  const [message, setMessage] = useState("");
  const [subscribeToTokenSuccessResponse, setSubscribeToTokenSuccessResponse] =
    useState<Partial<IPortalSubscription>>({});
  const [context, setContext] = useState(initialContext);

  const handlePublishToken = async () => {
    SendMessage({
      topic: MESSAGE_TOPICS.ACCOUNT_TOKEN,
      data: message,
    });
  };

  const subscribeToTokenCallback = (result: { topic: string; data: string }) => {
    setSubscribeToTokenSuccessResponse(result);
  };

  const subscribeToToken = useCallback(async () => {
    try {
      tokenSubscriptionRef.current = await SubscribeToMessage(
        { topic: MESSAGE_TOPICS.CHAT_MESSAGE },
        subscribeToTokenCallback
      );
    } catch (e) {
      setsubscribeToTokenErrorResponse(e);
    }
  }, []);

  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMessage(e.target.value);
  };

  useEffect(() => {
    subscribeToToken();

    return () => {
      UnsubscribeFromMessage(tokenSubscriptionRef.current!);
    };
  }, [subscribeToToken]);

  useEffect(() => {
    setContext(initialContext);
  }, [initialContext]);

  return (
    <div className="App">
      <div>
        <b>Subscribe Token Success Result:</b>
        <pre>{JSON.stringify(subscribeToTokenSuccessResponse, null, 4)}</pre>
      </div>
      <hr />
      <div>
        <b>Initial Context Result:</b>
        <pre>{JSON.stringify(context, null, 4)}</pre>
      </div>
      <hr />
      <div>
        <b>Message:</b>
      </div>
      <div>
        <input value={message} onChange={handleChangeInput} />
      </div>
      <button onClick={() => handlePublishToken()}>
        Publish/Send Message
      </button>
    </div>
  );
}

export default App;

import React, {useState} from 'react';
import {SafeAreaView, ScrollView, View, Text, Button} from 'react-native';

import {
  PortalView,
  publish,
  subscribe,
  unsubscribe,
} from '@ionic/portals-react-native';
import initializePortals from './initializePortals';

initializePortals();

function App(): JSX.Element {
  const [subscribeTokenSuccessResponse, setSubscribeTokenSuccessResponse] =
    useState(null);

  const subscribeToTokenRef = React.useRef<number>();

  const handlePublishToken = async () => {
    publish('CHAT_MESSAGE', 'token from native');
  };

  const subscribeToTokenCallback = (result: {topic: string; data: any}) => {
    setSubscribeTokenSuccessResponse(result);
  };

  const subscribeToToken = React.useCallback(async () => {
    subscribeToTokenRef.current = await subscribe(
      'ACCOUNT_TOKEN',
      subscribeToTokenCallback,
    );
  }, []);

  React.useEffect(() => {
    subscribeToToken();

    return () => {
      unsubscribe('ACCOUNT_TOKEN', subscribeToTokenRef.current!);
    };
  }, [subscribeToToken]);

  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View>
          <PortalView
            portal={{
              name: 'hello',
              initialContext: {
                data: 'Initial data from Native',
              },
            }}
          />
          <Text>Subscribe Token Success Result:</Text>
          <Text>
            {JSON.stringify(subscribeTokenSuccessResponse || '', null, 4)}
          </Text>
          <Button title="Publish Token" onPress={handlePublishToken} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;