TSRPC Implementation Examples

This project demonstrates a lightweight, distributed architecture for room management (such as creating rooms and random matchmaking) using TSRPC. It is designed as a replacement for MGOBE and focuses on scalability and ease of use compared to traditional three-tier architectures.

Key Features

• Room Management: Supports creating rooms and random matchmaking.
• Modular Logic: Room logic is encapsulated into separate Classes for easy customization.
• Distributed & Scalable: Supports horizontal scaling and distributed deployment.
• Low Barrier to Entry: Simpler structure than traditional three-tier architectures.

The serverless example project provides three distinct entry points in the backend to support different deployment environments:

• index.ts: Used for native NodeJS deployment.
• aliyun-fc.ts: Used for Alibaba Cloud Function Compute (FC).
• txcloud-scf.ts: Used for Tencent Cloud Cloud Function (SCF).

To use the frontend part of this demo, you must use Cocos Creator version 3.5.2 or higher.

Important Workflow:

1. Navigate to the frontend directory.
2. Run npm install to install dependencies.
3. Open the project in Cocos Creator.

Note: If you encounter errors when opening the project, try closing Cocos Creator and restarting it after the npm install step is complete.

To start the TSRPC server in a local development environment, use the dev script. This is typically the first step before running tests or manual verification.

npm run dev

Navigate to the backend directory, install the necessary NPM dependencies, and start the local development server.

cd backend
npm install
npm run dev

To compile and build the TSRPC server for production or deployment, execute the build script.

npm run build

The backend provides several scripts to manage the TSRPC development lifecycle, specifically for handling protocol definitions and keeping the client in sync with the server's API definitions.

• Generate ServiceProto: Run npm run proto to generate the service protocol definitions.
• Generate API templates: Run npm run api to generate the necessary API templates.
• Sync shared code to client: Run npm run sync to synchronize shared code (like types or interfaces) to the client.

Note: If you used the symlink option when initializing your project with create-tsrpc-app, the sync command will re-create the symlink instead of copying files.

To create a production build of the TSRPC backend, use the build script. This compiles the TypeScript source code into executable JavaScript.

npm run build

To compile the TSRPC server for production or a final distribution, use the build script.

npm run build

The frontend is built for Cocos Creator. Follow these steps to set up the environment:

1. Requirements: Cocos Creator version 3.4.2 or higher.
2. Installation: Run npm install in the project directory, then open the project in Cocos Creator.
3. Troubleshooting: If Cocos Creator reports errors after npm install, perform a clean restart:
   • Close Cocos Creator.
   • Delete the library and temp directories.
   • Restart Cocos Creator.

To start the TSRPC backend in a local development environment, use the dev script. This is typically used for active development with hot-reloading or watching capabilities provided by the underlying build system.

npm run dev

To run the multiplayer real-time matchmaking game demo, you must start the backend services before opening the frontend in Cocos Creator. The architecture uses a separate logic and presentation model, employing prediction, reconciliation, and interpolation to handle network delays of 100~200 ms.

### 1. Launch the backend
cd backend
npm install
npm run dev

### 2. Launch the frontend
cd frontend
npm install
# Open the 'frontend' directory with Cocos Creator (v3.5.2+)