{"id":22688267,"url":"https://github.com/emanuelefavero/trpc-web-socket-subscriptions","last_synced_at":"2025-03-29T16:13:33.251Z","repository":{"id":69318218,"uuid":"599539130","full_name":"emanuelefavero/trpc-web-socket-subscriptions","owner":"emanuelefavero","description":"This is a cheat sheet repo for setting up tRPC with WebSocket Subscriptions","archived":false,"fork":false,"pushed_at":"2023-02-09T12:48:09.000Z","size":52,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-04T16:50:28.394Z","etag":null,"topics":["api","chat","monorepo","trpc","types","typescript","web-sockets","websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emanuelefavero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-09T11:00:31.000Z","updated_at":"2024-09-08T22:52:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"27e823d3-a15f-44be-a6da-00cb691ee6f2","html_url":"https://github.com/emanuelefavero/trpc-web-socket-subscriptions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Ftrpc-web-socket-subscriptions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Ftrpc-web-socket-subscriptions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Ftrpc-web-socket-subscriptions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Ftrpc-web-socket-subscriptions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emanuelefavero","download_url":"https://codeload.github.com/emanuelefavero/trpc-web-socket-subscriptions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246207509,"owners_count":20740723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","chat","monorepo","trpc","types","typescript","web-sockets","websocket"],"created_at":"2024-12-10T00:13:41.217Z","updated_at":"2025-03-29T16:13:33.244Z","avatar_url":"https://github.com/emanuelefavero.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tRPC Web Socket Subscriptions\n\nThis is a cheat sheet repo for setting up tRPC with [WebSocket Subscriptions](https://trpc.io/docs/subscriptions).\n\n\u003e Note: tRPC is a library for building typesafe APIs between server and client (tRPC main features work with TypeScript)\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n## Table of Contents\n\n- [Web Sockets](#web-sockets)\n- [Web Socket Subscriptions](#web-socket-subscriptions)\n- [Installation](#installation)\n- [Running](#running)\n- [Setup a new project](#setup-a-new-project)\n  - [Setup server folder](#setup-server-folder)\n  - [Setup client folder](#setup-client-folder)\n- [Resources](#resources)\n- [License](#license)\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n## Web Sockets\n\n[Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) are a protocol for bi-directional, real-time communication between a client (such as a web browser) and a server. They are commonly used to build real-time applications, such as online games, chat applications, and collaborative editing tools.\n\n## Web Socket Subscriptions\n\nWeb Socket Subscriptions are a way to use Web Sockets to subscribe to data changes on the server.\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n## Installation\n\n\u003e Note: The installation will be the same as my [trpc repo](https://github.com/emanuelefavero/trpc) apart from `npm i ws` and `npm i -D @types/ws` command which installs the WebSocket library on the server\n\n- clone repo and `cd` into it\n- `cd` into `server` and run `npm install`\n- `cd` into `client` and run `npm install`\n\n## Running\n\n- `cd` into `server` and run `npm run dev`\n- `cd` into `client` and run `npm run dev`\n\n- visit `http://localhost:5173/` to see the client\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n## Setup a new project\n\ntRPC works well when you have a monorepo with a `server` and `client` folder on the same levelf\n\n\u003e Note: you can setup a new tRPC project with [create-t3-app](https://create.t3.gg/)\n\nOR\n\n### Setup server folder\n\n- run `npm i @trpc/server cors express zod`\n- **run `npm i ws` to install the WebSocket library**\n- **run `npm i -D @types/ws` to install types for the WebSocket library**\n- run `npm i -D @types/cors @types/express @types/node`\n- nodemon ts-node typescript`\n- setup `typescript` with `tsc --init`\n- add `dev` script to `package.json`:\n\n```json\n\"dev\": \"nodemon SERVER_NAME.ts\"\n```\n\n- start developing your server\n\n\u003e Note: see this repo project for a working example\n\n### Setup client folder\n\n\u003e Note: You can use many frameworks as the client, but tRPC works best with t3, Next.js and React\n\n- run `npm i @trpc/client`\n- run `npm i -D typescript`\n- setup `typescript` with `tsc --init`\n- add `dev` script to `package.json`:\n\n```json\n\"dev\": \"YOUR CLIENT START COMMAND\"\n```\n\n- start developing your client\n\n\u003e Note: see this repo project for a working example\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n## Resources\n\n- [tRPC.io](https://trpc.io/)\n- [tRPC Docs](https://trpc.io/docs)\n- [tRPC Quickstart](https://trpc.io/docs/quickstart)\n- [create-t3-app](https://create.t3.gg/)\n\n## License\n\n- [MIT](LICENSE.md)\n\n\u0026nbsp;\n\n---\n\n\u0026nbsp;\n\n[**Go To Top \u0026nbsp; ⬆️**](#trpc-web-socket-subscriptions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Ftrpc-web-socket-subscriptions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femanuelefavero%2Ftrpc-web-socket-subscriptions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Ftrpc-web-socket-subscriptions/lists"}