This is an example of how to use IC WebSockets to send and receive messages between the frontend (browser) and the backend canister demonstrated by a simple real-time group chat app, using motoko in the backend canister.

The example uses the IC WebSocket libraries:

• ic-websocket-js for the frontend
• ic-websocket-cdk-mo for the backend

The frontend connects to an IC WebSocket Gateway hosted on AWS under the gatewayv1.icws.io domain and maintained by the Omnia Network team. To know more about how the IC WebSocket Gateway works, please refer to the IC WebSocket Gateway repository.

A live demo is available at https://a3wil-byaaa-aaaal-qccgq-cai.icp0.io.

The frontend canister is simple a React app written in TypeScript.

The backend canister is a Motoko canister. The relevant code to understand how to use the ic-websocket-cdk-mo library is in the main.mo file.

If you want to test your project locally, follow these preparation steps:

• make sure you are running an IC WebSocket Gateway locally. See the IC WebSocket Gateway repository for more details.
• change the addresses of the local replica and the local IC WebSocket Gateway at the top of the ws.ts file.
• change the GATEWAY_PRINCIPAL value in the main.mo file, using the principal that the IC WebSocket Gateway prints when it starts.

After completing the preparation steps, run the following commands:

# Install the mops packages
mops install

# Install the npm packages
npm install

# Starts the replica, running in the background
dfx start --clean --background

# Deploys your canisters to the replica and generates your candid interface
dfx deps deploy
dfx deploy

If you are making frontend changes, you can start a development server with

npm start

Licensed under the MIT License.