Connect to Azure Event Hub in browser ( using AMQP over WebSockets )

In my last post, I introduced the way to connect to Azure IoT Hub using AMQP over WebSockets. At the end of post, I said through this way we can only send C2D message to devices. However, open receiver to topic:/messages/serviceBound/feedback won't get any message when device send D2C message. So here's the problem, how to receive D2C message?

The answer is: Event Hub. You may ask, why can we get IoT Hub message through Event Hub? If you are familiar to Azure IoT Hub, you may find there's a "compatible" Event Hub in IoT Hub portal:
snipaste_20170316_200532
You may guess that IoT Hub is based on Event Hub? I had the same inference, but after contacting Azure suppport, they told me IoT Hub doesn't based on Event Hub.However, since IoT Hub are similar to Event Hub in many ways(both have message queue and handler), Azure provides a compatible way to visit IoT Hub as an Event Hub.So IoT Hub is not based on Event Hub, but compatible with Event Hub.
So now we can focus on how to fetch message from Event Hub.Let's go!

First, we must establish a websocket channel.

 
wss://[EventHubEndpoint]:443/$servicebus/websocket
Sec-WebSocket-Protocol: AMQPWSB10

How to get Event Hub Endpoint?

You can find it in Azure portal.snipaste_20170316_201700

Then you will have to establish AMQP connection. Use the following parameters to connect, you need to use SASL.

Key Value
hostname [EventHubEndpoint]
container_id "conn" + <CURRENT-TIME-STAMP>
max_frame_size 4294967295
channel_max 65535
idle_timeout 120000
outgoing_locales en-US
incoming_locales en-US
offered_capabilities null
desired_capabilities null
properties {}
connection_details <YOUR-WEBSOCKET-CONNECTION>
reconnect false
username [accessPolicyName]
password [sharedAccessKey]

How to get Access Policy Name and Shared Access Key?

You can find it in Azure portal.snipaste_20170316_202829

After connection opened, we will open receiver on all partitions in Event Hub. How do we get all partition ids in Event Hub?
We create a sender and a receiver on topic:

 $management

And then we will send a message on topic $management:

 
body:'[]',
                application_properties: { 
                    operation: 'READ',
                    name: [EventHubPath],
                    type: 'com.microsoft:eventhub' 
                } 

How to get Event Hub Path?

You can find it in Azure portal.snipaste_20170316_203512

Then we will receive a meesage with partition info:

 
partition_count:2,
partition_ids:[0,1]

Then we will open several receivers to fetch message.( The number of receivers equals to partition count )

 
/[eventHubPath]/ConsumerGroups/[consumerGroup]/Partitions/[partitionId]

How to get Consumer Group?

You can find it in Azure portal.snipaste_20170316_204025

That's all for the work! Sneezry and I just finished a Web Project including Device/Service/Registry(device management).If you feel a bit confusion about the complicated process above, you can try this tool and it will provide you a easy-access experience to Azure IoT Hub!
snipaste_20170316_204949snipaste_20170316_205013snipaste_20170316_205022snipaste_20170316_205034