omnia-network / ic_websocket_example

Example backend and frontend canisters using IC WebSockets

IC WebSocket example

This is a simple example of how to use IC WebSockets to send and receive messages between the frontend (browser) and the backend canister.

The example uses the IC WebSocket libraries:

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

The frontend connects to an IC WebSocket Gateway hosted on AWS under the gateway.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.

If you want a step-by-step guide to implement WebSockets on the Internet Computer and build this example, see WebSockets on the IC: Getting Started.

Demo

A live demo is available at demo.icws.io.

Understanding the example

Frontend

The frontend canister is simple a Vite app written in TypeScript. The relevant code to understand how to use the ic-websocket-js library is in the main.ts file.

Backend

The backend canister is a Rust canister. The relevant code to understand how to use the ic-websocket-cdk library is in the lib.rs file.

Development

Running the project locally

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 main.ts file.

After completing the preparation steps, run the following commands:

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

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

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

npm start

License

Licensed under the MIT License.