iothub-errorcode: InvalidProtocolVersion - node.js

Question

Using the azure-iot-device sdk for node works in a standalone node program. When trying to use the same node code in a React web app, the connection to the IoT Hub fails "iothub-errorcode: InvalidProtocolVersion" with this error:
stream.js:61 WebSocket connection to 'wss://my-iothub.azure-devices.net/' failed: Error during WebSocket handshake: Unexpected response code: 400
App.js
var Protocol = require('azure-iot-device-mqtt').Mqtt;
var Client = require('azure-iot-device').Client;
var connectionString = "HostName=my-iothub.azure-devices.net;DeviceId=<redacted>;SharedAccessKey=<redacted>=";
var client = Client.fromConnectionString(connectionString, Protocol);
var connectCallback = function (err) {
if (err) {
console.error('Could not connect: ' + err.message);
}
...
};
client.open(connectCallback);
Headers (From Chrome dev tools)
Request URL: wss://my-iothub.azure-devices.net/
Request Method: GET
Status Code: 400 Bad Request
Content-Length: 158
Content-Type: application/json; charset=utf-8
Date: Wed, 02 Oct 2019 21:18:10 GMT
iothub-errorcode: InvalidProtocolVersion
Server: Microsoft-HTTPAPI/2.0
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: my-iothub.azure-devices.net
Origin: http://localhost:3000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: <redacted>
Sec-WebSocket-Protocol: mqtt
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0)
Possibly related to: https://github.com/Azure/azure-sdk-for-js/issues/3473#issuecomment-499719031

Answer 1

I am assuming you are trying to utilise IOT hub from your react web app which is deployed in Microsoft Azure , if this is the case, please try the following:
what you need to check is the web app settings:
Set the consumer group as mentioned in this link.
Enable WebSocket.
Additional reference , please check the code repo and documentation around IOT HUB usage in web app, which is mentioned below:
https://learn.microsoft.com/en-us/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps
https://github.com/Azure/azure-iot-sdk-node/blob/master/device/ts-samples/sample_device.ts