Create a Chat app
Start the app
Copy Connection String from Keys tab of the created Azure Web PubSub service, and replace the
<connection-string> below with the value of your Connection String.
The web app is listening to event handler requests at
Use localtunnel to expose localhost
lt --port 8080 --print-requests
localtunnel will print out an url (
https://<domain-name>.loca.lt) that can be accessed from internet, e.g.
There are also other tools to choose when debugging the webhook locally, for example, ngrok, loophole, TunnelRelay or so. Some tools might have issue returning response headers correctly. Try the following command to see if the tool is working properly:
curl https://<domain-name>.loca.lt/eventhandler -X OPTIONS -H "WebHook-Request-Origin: *" -H "ce-awpsversion: 1.0" --ssl-no-revoke -i
Check if the response header contains
webhook-allowed-origin: *. This curl command actually checks if the WebHook abuse protection request can response with the expected header.
Configure the event handler
Event handler can be set from portal or through Azure CLI, here contains the detailed instructions for how to.
Go to the Settings tab to configure the event handler for this
Click "Add" to add settings for hub
Set URL Pattern to
connectedin System Event Pattern, click "Save".
Start the chat
Open http://localhost:8080/index.html, input your user name, and send messages.
You can see in the localtunnel command window that there are requests coming in with every message sent from the page.
Besides the simple WebSocket client we show in index.html, fancy.html shows a client using
json.webpubsub.azure.v1 achieving the same by sending
message event to the service. With the help of the subprotocol, the client can get
disconnected messages containing some metadata of the connection.
You can open both http://localhost:8080/index.html and http://localhost:8080/fancy.html to see messages received by both clients.