Bug: Can't Establish Websocket from html webpage

[Andy Chao]

What were you trying to achieve?

Establish a Websocket connection from html webpage

What are the expected results?

Establish a Websocket connection from html webpage

What are the received results?

i tried to establish a websocket connection from a html web page like this ,


but it can't successfully Establish the connection. on the contrary, if i do this in a go program, there's nothing with it

Steps To Reproduce

No response

In what environment did you encounter the issue?

normal environment

Additional information you deem important

No response

[Dušan Borovčanin]

Hello @andychao217. Please fill in the issue template properly. However, from the log you shared, it seems you are not using the correct Thing key for the authorization. Please check docs: https://docs.magistrala.abstractmachines.fr/messaging/#websocket. Also, when sharing code snippets, please share them as code block so we can easily reproduce and copy things for debugging.

[Andy Chao]

      var secret = "{{.Entity.Credentials.Secret}}";
        function setupWebSocket() {
          let ws = null;
          function connect() {
            const channelId = "91b2957b-fabd-45f9-8ec0-1509028426bc";
	          const socketUrl = "ws://192.168.1.151:8186/ws/channels/" + channelId + "/messages?authorization=" + secret
            const ws = new WebSocket(socketUrl);
            ws.onopen = function(event) {
              console.log('WebSocket connected');
            };
            ws.onclose = function(event) {
              console.log('WebSocket disconnected');
              setTimeout(connect, 1000);
            };
            ws.onerror = function(error) {
              console.error('WebSocket error observed:', error);
            };
            ws.onmessage = function(event) {
              console.log('Message from server:', event.data);
            };
          }
          connect(); 
        }
        setupWebSocket();

[Andy Chao]

am i writing the correct code ?

[Dušan Borovčanin]

It depends on what's the secret value. From the log, it looks like it's 12345678-2 which is a wrong Thing key format and probably a wrong Thing Key. The code otherwise looks OK.

[Andy Chao]

magistrala-ws | {"time":"2024-04-15T08:50:11.605301548Z","level":"INFO","msg":"subscribed with client_id to topics /channels/91b2957b-fabd-45f9-8ec0-1509028426bc/messages"}
magistrala-ws | {"time":"2024-04-15T08:50:11.607885874Z","level":"WARN","msg":"WS Proxy failed to upgrade connection","error":"websocket: request origin not allowed by Upgrader.CheckOrigin"}
magistrala-ws | {"time":"2024-04-15T08:50:11.608520579Z","level":"INFO","msg":"Subscribe completed successfully","duration":"56.991872ms","channel_id":"91b2957b-fabd-45f9-8ec0-1509028426bc"}
magistrala-ws | {"time":"2024-04-15T08:50:11.611343794Z","level":"DEBUG","msg":"Successfully upgraded communication to WS on channel 91b2957b-fabd-45f9-8ec0-1509028426bc"}

the system log showed this info

[Dušan Borovčanin]

Also, please check the URL. Looks like you are using both prefix and port, try ws://localhost:8186/channels/ or ws://localhost/ws/channels/.

[Andy Chao]

i tried both ways, but still can't establish the connection

Also, please check the URL. Looks like you are using both prefix and port, try ws://localhost:8186/channels/ or ws://localhost/ws/channels/.

[Dušan Borovčanin]

Can you try using Postman or some other tool that is not running from the browser?