# trpc-webrtc

> A set of TRPC adapters for communication via RTCDataChannel in the browser

Latest version **0.1.4** (published 2023-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install trpc-webrtc
pnpm add trpc-webrtc
yarn add trpc-webrtc
bun add trpc-webrtc
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2023-04-14 |
| First published | 2023-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ben Greenier |
| Maintainers | bengreenier |
| Keywords | trpc, webrtc, RTCDataChannel |

## Links

- npm: https://www.npmjs.com/package/trpc-webrtc
- Repository: https://github.com/bengreenier/trpc-webrtc
- Homepage: https://github.com/bengreenier/trpc-webrtc#readme
- Issues: https://github.com/bengreenier/trpc-webrtc/issues
- npm.io page: https://npm.io/package/trpc-webrtc

## Recent versions

- 0.1.4 (latest) — 2023-04-14
- 0.1.3 — 2023-04-14
- 0.1.2 — 2023-04-14
- 0.1.1 — 2023-04-14
- 0.1.0 — 2023-04-14

## README

# trpc-webrtc

A set of [tRPC](https://trpc.io/) adapters to enable type-safe communication via [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel) in the browser.

- Compatible with tRPC `>=10.20.0`.
- Use any [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel) as an in-browser tRPC server.
- Full support for queries, mutations, and subscriptions.

## Installation

```shell
# Using pnpm
pnpm add trpc-webrtc

# Using yarn
yarn add trpc-webrtc

# Using npm
npm install --save trpc-webrtc
```

## Getting Started

1. Initialize [tRPC](https://trpc.io/), with `allowOutsideOfServer: true`:

```ts
import { initTRPC } from "@trpc/server";
const t = initTRPC.create({ allowOutsideOfServer: true });
```

2. Create a router, [as usual](https://trpc.io/docs/quickstart):

```ts
const appRouter = t.router({
  testQuery: t.procedure.query(() => ({ hello: "world" })),
});
type AppRouter = typeof appRouter;
```

3. Invoke `applyDataChannelHandler` on an [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel) (`rx`) to act as the server:

```ts
import { applyDataChannelHandler } from "trpc-webrtc";
const handler = applyDataChannelHandler({
  dataChannel: rx,
  router: appRouter,
});
```

4. Create a client, using `dataChannelLink` with an [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel) (`tx`):

```ts
import { createTRPCProxyClient } from "@trpc/client";
import { createDataChannelClient, dataChannelLink } from "trpc-webrtc";

const client = createTRPCProxyClient<AppRouter>({
  links: [
    dataChannelLink({
      client: createDataChannelClient({ dataChannel: tx }),
    }),
  ],
});
```

---
_Source: https://npm.io/package/trpc-webrtc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._