Skip to content

LeohangRai/grpc-chat-room-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gRPC Chatroom using TypeScript

The main purpose of this repository is to demonstrate how to implement different gRPC patterns in TypeScript, with examples of unary, server streaming, client streaming, and bidirectional streaming communications.

Overview

The project implements a chat room system to showcase different gRPC patterns:

  1. Unary RPC: Room registration (RegisterToRoom)
  2. Server Streaming: Chat monitoring (MonitorChatRoom)
  3. Client Streaming: News updates (SendNewsUpdate)
  4. Bidirectional Streaming: Real-time chat (Chat)

Setup Requirements

  • Node.js (v18 or newer)
  • pnpm (or npm/yarn)
  • Protocol Buffers compiler

Installation

  1. Clone the repository
  2. Install dependencies:
pnpm install

Protocol Buffer Code Generation:

The project includes a Makefile for generating Protocol Buffer code. Main commands:

  • make gen: Generate Protocol Buffer code (alias for generate)
  • make clean: Clean generated code
  • make regen: Regenerate all Protocol Buffer code (alias for regenerate)

Configuration

The application uses the config package for configuration management. Create a config file based on the sample provided.

  1. Copy the sample config:
cp config/default.sample.yml config/default.yml
  1. Update the configuration values as needed

Running the Application

1. Start the server:

pnpm start

For development with hot reload:

pnpm start:dev

2. Run the monitoring client:

pnpm build && node dist/chat-monitoring-client

3. Run the news update client:

pnpm build && node dist/news-update-client

4. Run the chat client:

pnpm build && node dist/chat-room-client

Chat Commands

The following commands can be used to exit the chat:

  • exit
  • \exit
  • quit
  • \quit
  • \q

Packages (What and Why)

grpc-tools

The grpc-tools module allows us to actually generate the static code that we need. Installing this module globally (not recommended anymore) makes the grpc_tools_node_protoc_plugin available for us, which we will use to generate JS output from our proto files.

This library also exports the grpc_tools_node_protoc executable, which accepts all of the same arguments as protoc itself. For use with Node.js, you most likely want to use the CommonJS-style imports. We will be using the local executable instead of globally installing this library.

NOTE: The executables installed by node libraries get installed inside of the node_modules/.bin directory.

The grpc_tools_node_protoc executable automatically includes the Node gRPC plugin, so it also accepts the --grpc_out=[option:]path argument.

We will add a script in our package.json file (or better yet a Makefile) to make use of the grpc_tools_node_protoc executable to generate JS code for us.

$ grpc_tools_node_protoc \
 --js_out=import_style=commonjs,binary:./src/pb \
 --grpc_out=grpc_js:./src/pb \
 -I proto proto/\*.proto

grpc_tools_node_protoc_ts

This library can be used to generate corresponding TypeScript type definition files according to JS codes generated by grpc_tools_node_protoc. We will add another script to make use of this library to generate TypeScript type definition files for us.

$ grpc_tools_node_protoc \
 --plugin=protoc-gen-ts=node_modules/.bin/protoc-gen-ts \
 --ts_out=grpc_js:./src/pb \
 -I proto proto/\*.proto

Makefile

PROTOC=node_modules/.bin/grpc_tools_node_protoc
PROTOC_GEN_TS=node_modules/.bin/protoc-gen-ts
PROTO_DIR=protos
PROTO_OUT_DIR=./src/proto-out

generate:
	mkdir -p $(PROTO_OUT_DIR)

	$(PROTOC) \
	--js_out=import_style=commonjs,binary:./$(PROTO_OUT_DIR) \
	--grpc_out=grpc_js:./$(PROTO_OUT_DIR) \
	-I $(PROTO_DIR) $(PROTO_DIR)/*.proto

	$(PROTOC) \
	--plugin=protoc-gen-ts=$(PROTOC_GEN_TS) \
	--ts_out=grpc_js:./$(PROTO_OUT_DIR) \
	-I $(PROTO_DIR) $(PROTO_DIR)/*.proto

gen: generate # alias for 'generate'

clean:
	rm -rf $(PROTO_OUT_DIR)/*

regenerate: clean generate # alias for 'clean' and 'generate'

regen: regenerate # alias for 'regenerate'

Features Implementation

Chat Room Service

The chat room service implements four types of gRPC patterns:

  1. Unary RPC: Room registration
  2. Server Streaming: Chat room monitoring
  3. Client Streaming: News updates
  4. Bidirectional Streaming: Real-time chat

Message Queue System

The application uses an in-memory message queue system to manage messages between different chat rooms and users. The queue system handles:

  • Per-user message queues
  • Room-based message broadcasting
  • Global chat monitoring

Development

For development, the project includes:

  • TypeScript configuration
  • Nodemon for hot reloading
  • Path aliases for cleaner imports
  • Server reflection for debugging

Key Learning Points

  • Setting up gRPC with TypeScript
  • Generating TypeScript definitions from protobuf files
  • Implementing different gRPC patterns
  • Handling streams and events
  • Type-safe gRPC communications

Additional Resources

About

gRPC chat-room implementation in TypeScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published