diff --git a/src/content/partials/workers/service-binding-rpc-example.mdx b/src/content/partials/workers/service-binding-rpc-example.mdx index c48ee0e980a..5531b85c943 100644 --- a/src/content/partials/workers/service-binding-rpc-example.mdx +++ b/src/content/partials/workers/service-binding-rpc-example.mdx @@ -2,17 +2,36 @@ {} --- -import { WranglerConfig, TypeScriptExample, TabItem, Tabs } from "~/components"; +import { + PackageManagers, + WranglerConfig, + TypeScriptExample, + TabItem, + Tabs, +} from "~/components"; + +The TypeScript example below uses a separate directory for each Worker: + +```txt +rpc-example/ +├── worker-a/ +│ ├── src/index.ts +│ └── wrangler.jsonc +└── worker-b/ + ├── src/index.ts + └── wrangler.jsonc +``` -For example, if Worker B implements the public method `add(a, b)`: +Worker B implements the public method `add(a, b)`: ```jsonc { "$schema": "./node_modules/wrangler/config-schema.json", - "name": "worker_b", - "main": "./src/workerB.js", + "name": "worker-b", + "main": "./src/index.ts", + "compatibility_date": "$today", "upload_source_maps": true } ``` @@ -27,10 +46,6 @@ For example, if Worker B implements the public method `add(a, b)`: import { WorkerEntrypoint } from "cloudflare:workers"; export default class extends WorkerEntrypoint { - async fetch() { - return new Response("Hello from Worker B"); - } - add(a: number, b: number) { return a + b; } @@ -42,12 +57,9 @@ export default class extends WorkerEntrypoint { ```python -from workers import WorkerEntrypoint, Response +from workers import WorkerEntrypoint class Default(WorkerEntrypoint): - async def fetch(self, request): - return Response("Hello from Worker B") - def add(self, a: int, b: int) -> int: return a + b ``` @@ -63,13 +75,14 @@ Worker A can declare a [binding](/workers/runtime-apis/bindings) to Worker B: ```jsonc { "$schema": "./node_modules/wrangler/config-schema.json", - "name": "worker_a", - "main": "./src/workerA.js", + "name": "worker-a", + "main": "./src/index.ts", + "compatibility_date": "$today", "upload_source_maps": true, "services": [ { "binding": "WORKER_B", - "service": "worker_b" + "service": "worker-b" } ] } @@ -77,8 +90,17 @@ Worker A can declare a [binding](/workers/runtime-apis/bindings) to Worker B: -Making it possible for Worker A to call the `add()` method from Worker B: +For TypeScript, generate Worker A's binding types from both configuration files. Run the following command from the `worker-a` directory: + + + +Passing both files lets Wrangler resolve Worker B's default export. The generated `Env` interface types `WORKER_B` as a `Service` with the `add()` method. Do not set `entrypoint` to `default`; omitting `entrypoint` selects the default export. +Worker A can then call `add()`: @@ -86,11 +108,11 @@ Making it possible for Worker A to call the `add()` method from Worker B: ```ts export default { - async fetch(request, env) { + async fetch(_request, env): Promise { const result = await env.WORKER_B.add(1, 2); - return new Response(result); + return new Response(result.toString()); }, -}; +} satisfies ExportedHandler; ``` @@ -110,3 +132,11 @@ class Default(WorkerEntrypoint): + +To run both TypeScript Workers locally, run the following command from the `rpc-example` directory. The first configuration is the primary Worker and is available at `http://localhost:8787`. + +