interactive example

packages/example-taro/src/TestPage.tsx

@@ -0,0 +1,64 @@
+import { View, Text, Button } from '@tarojs/components';
+import { useLoad } from '@tarojs/taro';
+import { Client } from '@connectrpc/connect';
+import { ElizaService } from '@buf/connectrpc_eliza.bufbuild_es/connectrpc/eliza/v1/eliza_pb';
+import { useState } from 'react';
+
+interface Props {
+  client: Client<typeof ElizaService>;
+}
+
+export default function TestPage({ client }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<{ sentence: string; ts: number }[]>(
+    [],
+  );
+  const appendMessage = (sentence: string) => {
+    setMessages((prev) => [...prev, { sentence, ts: Date.now() }]);
+  };
+
+  const sayHi = async () => {
+    setMessages([]);
+    setIsLoading(true);
+    client
+      .say({
+        sentence: 'I feel happy.',
+      })
+      .then((res) => {
+        setIsLoading(false);
+        console.log('[connect.say]', res);
+        appendMessage(res.sentence);
+      });
+  };
+
+  const introduce = async () => {
+    setMessages([]);
+    setIsLoading(true);
+    const res = client.introduce({ name: 'Joseph' });
+    for await (const chunk of res) {
+      console.log('[connect.introduce]', chunk);
+      appendMessage(chunk.sentence);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <View>
+      <View>
+        <Button disabled={isLoading} onClick={introduce}>
+          Introduce
+        </Button>
+        <Button disabled={isLoading} onClick={sayHi}>
+          Say Hi
+        </Button>
+      </View>
+      <View>
+        {messages.map(({ sentence, ts }) => (
+          <View key={ts}>
+            <Text>{sentence}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

packages/example-taro/src/app.config.ts

@@ -1,9 +1,22 @@
 export default defineAppConfig({
-  pages: ['pages/index/index'],
+  pages: ['pages/grpc-web/index', 'pages/connect/index'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black',
   },
+  tabBar: {
+    position: 'top',
+    list: [
+      {
+        pagePath: 'pages/grpc-web/index',
+        text: 'GRPC Web',
+      },
+      {
+        pagePath: 'pages/connect/index',
+        text: 'Connect',
+      },
+    ],
+  },
 });

packages/example-taro/src/pages/connect/index.tsx

@@ -0,0 +1,20 @@
+import { request, getSystemInfoSync } from '@tarojs/taro';
+import { createClient } from '@connectrpc/connect';
+import { createConnectTransport } from 'connect-miniprogram/src';
+import { ElizaService } from '@buf/connectrpc_eliza.bufbuild_es/connectrpc/eliza/v1/eliza_pb';
+import TestPage from '../../TestPage';
+
+const isDevTool = getSystemInfoSync().platform === 'devtools';
+const baseUrl = 'https://demo.connectrpc.com';
+
+const grpcTransport = createConnectTransport({
+  baseUrl,
+  request,
+  isDevTool,
+});
+
+const grpcClient = createClient(ElizaService, grpcTransport);
+
+export default function Index() {
+  return <TestPage client={grpcClient} />;
+}

packages/example-taro/src/pages/grpc-web/index.tsx

@@ -0,0 +1,20 @@
+import { request, getSystemInfoSync } from '@tarojs/taro';
+import { createClient } from '@connectrpc/connect';
+import { createGrpcWebTransport } from 'connect-miniprogram/src';
+import { ElizaService } from '@buf/connectrpc_eliza.bufbuild_es/connectrpc/eliza/v1/eliza_pb';
+import TestPage from '../../TestPage';
+
+const isDevTool = getSystemInfoSync().platform === 'devtools';
+const baseUrl = 'https://demo.connectrpc.com';
+
+const grpcTransport = createGrpcWebTransport({
+  baseUrl,
+  request,
+  isDevTool,
+});
+
+const grpcClient = createClient(ElizaService, grpcTransport);
+
+export default function Index() {
+  return <TestPage client={grpcClient} />;
+}