How to use the ic-websocket-poc example

from this example GitHub - dfinity/ic-websocket-poc. I am trying to use the web socket on the frontend.
so,

  1. How can I send a message and receive a message.
  2. How to create channels in order to make permissions, so people from specific channels can receive message but others can’t receive these messages.
    i am trying something like this.
let ws = new websocketConnection(backend_canister_id, gateway_address, url, local_test);
    await ws.onMessage(async (event) => {
        console.log({event})
    })


    await ws.onOpen(async (event) => {
        let m = await ws.make_message("text" + "-pong")
        console.log({m})
    })


    await ws.onMessage(async (event) => {
        let m = await ws.make_message("text" + "-pong")
        console.log({m})
    })

    document.getElementById("send_message").onclick = async () => {
        ws.sendMessage({message: "text", channel: 1})
    };

Not a direct answer, but @massimoalbarello recently published a more recent WebSocket initiative based on this work. So you might want to check it out.

5 Likes

Hello @AliSci,

this tutorial should clarify your questions.

The frontend SDK is really similar to the one you already tried as me and @ilbert are continuing the work on WebSockets started by Dfinity.

If you have any further questions, do not hesitate to reach out to me :slight_smile:

2 Likes

Hello @massimoalbarello , I just browsed through the tutorial and noticed the set up if for a rust project, so I just want to ask if it’s possible yet to integrate this web sockets emplemantation in an existing motoko project, with a react frontend?

1 Like

Hello @iamenochchirima,

yes for now the CDK is just for Rust… Eventually we will write it also in Motoko but not anytime soon.

We are now working on a Rust canister which embeds the IC WebSocket CDK and acts as an additional relay between the Motoko canisters and the WS Gateway. This way you can import the WASM of the Rust canister in your Motoko project, similar to what you would do when using the Internet Identity canister locally.
However, this solution is far from ideal as it introduces a lot of latency and cost due to the x-net calls from the Motoko canister to the one in Rust.

The frontend SDK instead is compatible with both JS and TS projects so you should be able to use it in your React application right away. You can instantiate the IcWebSocket class in a file outside of the React components, export the instance and then import it into all the files you need to use it.

If you would like to start working on the Motoko CDK implementation yourself, we would gladly provide all the help you need to get started. However, the WS Gateway is not stable yet so the CDK will have breaking changes quite often for now.

1 Like

Okay, thank you for the detailed response, will keep in touch.

1 Like

I am following [WebSockets :electric_plug: on the Internet Computer: Getting Started]

Refused to connect to 'wss://0.0.0.0:8080/' because it violates the following Content Security Policy directive: "connect-src 'self' https://icp0.io https://*.icp0.io https://www.google-analytics.com".

IcWebSocket @ index.js:16133
(anonymous) @ index.js:25236
(anonymous) @ index.js:25264
(anonymous) @ index.js:25266
  • I strongly believe that I was following exactly the steps and I deleted the two files namedic-assets.json5.
  • However, at first, I did not delete the files, and I got the error, Later, I delelted them and re-ran the app but still the same error

Hi @AliSci , try deleting the dist directory and redeploy

1 Like

As @iamenochchirima suggested, I think the solution is to delete the src/ic_websocket_example_frontend/dist directory, because files are not automatically removed from the dist folder if you delete them from the source code.

Also, I see from the error log that you’re trying to connect to wss://0.0.0.0:8080/ but, if you’re running the gateway locally, it won’t likely have TLS enabled and 0.0.0.0 is just the address on which the gateway listens to for new connections. You should rather use ws://127.0.0.1:8080/ to connect to the gateway from the frontend.

Let me know if this fixes your issue :wink:

1 Like

@iamenochchirima @ilbert the error is gone now but I am getting this in the gateway after runing cargo run then reload the frontend.

 2023-08-28T06:28:00.094668Z ERROR ic_websocket_gateway::gateway_server: Connection handler terminated with an error: Initialization("Client did not follow IC WebSocket establishment protocol: \"open message is not of type RelayedClientMessage\"")
    at src/ic-websocket-gateway/src/gateway_server.rs:403
    in ic_websocket_gateway::gateway_server::ws_connection_error

I think you’re using a gateway version that is beyond the SDKs versions. To go back to the working version, go into the gateway repository:

cd ic-websocket-gateway

and checkout this commit:

git checkout a4da51b5ff489c5930fb49ba11e1e1708a7571ae

This should fix the errors that you’re getting. I’ve also updated the tutorial with this additional command, let me know if it works.

We’re in the process of re-designing the protocol, so we’ll update the tutorial once we have something stable. This will simplify how things work for client, gateway and canister and will for sure break the existing gateway and SDKs versions, but we’ll keep the community posted.

2 Likes

Thank you it works. Also, very excised to the coming updates.
However, I hope dfinity will support web-socket natively .

2 Likes