grpc-web-native/example/Example.tsx at master · emmveqz/grpc-web-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

import React, {
  FC,
  useCallback,
} from "react"
import {
  CreateHelloWorldService,
} from "./generated/grpc-web-client-protos"

//

const Sleep = (milliseconds: number) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

export const Example: FC = () => {
  console.log("Example mounted")

  const testUnaryRequestResponse = useCallback(async () => {
      const service = CreateHelloWorldService()
      const abortController = new globalThis.AbortController()

      const reply = await service.sayHello(undefined, {
        isUserEnabled: true,
        username: "foo",
        userNo: 123456789,
      }, abortController.signal)

      console.log("sayHello().reply", reply)
  }, [
  ])

  const testUnaryRequestStreamResponse = useCallback(async () => {
    const service = CreateHelloWorldService()
    const abortController = new globalThis.AbortController()

    service.on("data", (resp, method) => {
      console.log("service.on(data)", resp, method)
    })

    const reply = await service.sayHelloStreamReply(undefined, {
      isUserEnabled: true,
      username: "foo",
      userNo: 123456789,
    }, abortController.signal)

    console.log("sayHelloStreamReply().reply", reply)
  }, [
  ])

  const testStreamRequestUnaryResponse = useCallback(async () => {
    const service = CreateHelloWorldService()
    const abortController = new globalThis.AbortController()

    service.sayHelloStreamHello((err, reply) => {
      // This callback will be called.
      console.log("sayHelloStreamHello().response1(err, reply)", err, reply)
    }, {
      isUserEnabled: true,
      username: "foo1",
      userNo: 123454321,
    }, abortController.signal)

    await Sleep(12000)

    service.sayHelloStreamHello((err, reply) => {
      // This callback will NOT be called.
      console.log("sayHelloStreamHello().response2(err, reply)", err, reply)
    }, {
      isUserEnabled: true,
      username: "foo2",
      userNo: 123454321,
    }, abortController.signal)

    await Sleep(12000)

    service.end()
  }, [
  ])

  const testBidiStream = useCallback(async () => {
    const service = CreateHelloWorldService()
    const abortController = new globalThis.AbortController()

    service.sayHelloBidi((err, reply) => {
      // This callback will be called.
      console.log("sayHelloBidi().response1(err, reply)", err, reply)
    }, {
      isUserEnabled: true,
      username: "foo1",
      userNo: 123454321,
    }, abortController.signal)

    await Sleep(12000)

    service.sayHelloBidi((err, reply) => {
      // This callback will NOT be called.
      console.log("sayHelloBidi().response2(err, reply)", err, reply)
    }, {
      isUserEnabled: true,
      username: "foo2",
      userNo: 123454321,
    }, abortController.signal)

    await Sleep(12000)

    service.end()
  }, [
  ])

  return (
    <div>
      <div><button onClick={testUnaryRequestResponse}>Test Unary Request/Response</button></div>
      <br />
      <div><button onClick={testUnaryRequestStreamResponse}>Test Unary Request, Stream Response</button></div>
      <br />
      <div><button onClick={testStreamRequestUnaryResponse}>Test Stream Request, Unary Response</button></div>
      <br />
      <div><button onClick={testBidiStream}>Test Stream Request/Response (Bidi Stream)</button></div>
    </div>
  )
}

export default Example