web-apps-node-iot-hub-data-visualization error: websocket connection failed

Question

Hello,
I'm trying to run my data visualization charts from this doc: https://learn.microsoft.com/en-us/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps.
I can see the charts on the web app, but the data from the IoT Device is not shown.
It works locally.

the console on the web app shows the following:

the Azure web app setting is like that:

Any other information is needed?

Thank you,
R

Answer 1

Hi,

so I tried to follow the steps again, but now I chose the B1 plan for the web app, instead of the free plan - and it works just fine now.

I don't know why, maybe you could find out why..

Thank you,

R

Answer 2

Hi @TITAN ,

Greetings! I have followed the steps suggested in the document and could successfully deploy the NodeJS application to Azure Web App. I could load the graph without any issue. Please find the below image for reference.

I noticed that your node version says 18.3. I have my local node version as 16.18. Please refer the below image from my windows machine Visual Studio Code terminal

When executing step 2 of the section Host Web App in App service I have changed the node version to match what I have in my local. Here is the command I have executed

az webapp create -n RajNodeJSWebApp -g IoTHubResources -p RajNodeJSWebApp --runtime "node|16LTS" --deployment-local-git   

Since your Node version in 18, you may use the node|18LTS in your case.

My Web App settings look similar to what you. Please find the below image

However, I have noticed that the errors reported in the browser console are around WebSocket connections. Step 4 in the section Host Web App in App service is responsible for enabling WebSocket and Htpps connections on the Web App. I see from the Web App settings image you shared that these options are enabled already. But could you please confirm if you have enabled these options using the CLI commands or through the Azure portal UI.

I would like to point that step 7 of the section in Host Web App in App service requires you to run the command in Azure CLI from the directory of web-apps-code-iot-hub-data-visualization on your local machine.

Please try to execute the commands sequentially with the pointers I have mentioned and let me know if you still run into any issues.

----------

Kindly accept answer or upvote if the response is helpful so that it would benefit other community members facing the same issue. I highly appreciate your contribution to the community.

Answer 3

Hello @TITAN,

Just wanted to follow-up on this issue!

It's great to hear that you were able to resolve the issue by upgrading to a higher tier plan for your web app. It's possible that the issue was related to resource limitations on the free plan, or that there was a temporary outage on the Azure side.

However, if the issue occurs again, or if you experience any other issues with the web app or IoT Hub, there are a few things you can try:

1. Check the Azure status page: Sometimes, Azure services experience issues that can affect your applications. You can check the Azure status page (https://status.azure.com/en-us/status) to see if there are any known issues with the service you're using.
2. Check the logs: You mentioned that you enabled logging, but didn't see anything there. If the issue occurs again, be sure to check the logs for any error messages or other information that may help you diagnose the issue.
3. Use a tool like Fiddler or Wireshark to capture network traffic: If the issue is related to network connectivity or communication between your IoT device and the web app, capturing network traffic can help you see what's going on and identify any issues.
4. Try a different device: If you have access to another IoT device, you can try using it to send data to the IoT Hub and see if the issue persists.
5. Reach out to Azure support: If you're still experiencing issues, you can reach out to Azure support for assistance. They can help you diagnose the issue and suggest possible solutions.

I hope this helps!