- Used client side JS to send the event to Azure Event Hub.
- Sends events to Azure Event Hubs based on user input from a web form. The client-side HTML form collects the necessary information and sends a POST request to the server, which then uses the Azure SDK to send an event to the specified Event Hub.
index.js
const express = require('express');
const { EventHubProducerClient } = require('@azure/event-hubs');
const app = express();
const port = process.env.PORT || 8080;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// ... (other routes)
app.get('/sendEvent', async (req, res) => {
const connectionString = req.query.connectionString;
const eventHubName = req.query.eventHubName;
const producer = new EventHubProducerClient(connectionString, eventHubName);
const eventData = {
event_name: 'page_view',
page_url: 'https://stackoverflow.com/questions',
time_stamp: Date.now().toString()
};
try {
await producer.sendBatch([
{
body: JSON.stringify(eventData)
}
]);
console.log('Event sent successfully');
res.json(eventData); // Send event data as JSON response
} catch (error) {
console.error('An error occurred while sending the event:', error);
res.status(500).send('An error occurred while sending the event');
} finally {
await producer.close();
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Event Hub Client</title>
<style>
.popup {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 5px;
font-size: 14px;
display: none;
transition: display 0.5s;
}
.success {
background-color: rgba(70, 155, 70, 0.8);
}
.error {
background-color: rgba(200, 70, 70, 0.8);
}
</style>
</head>
<body>
<form id="eventForm">
<label for="connectionString">Connection String:</label>
<input type="text" id="connectionString" required><br><br>
<label for="eventHubName">Event Hub Name:</label>
<input type="text" id="eventHubName" required><br><br>
<button type="button" id="sendEventButton">Send Event</button>
</form>
<div id="popup" class="popup"></div>
<script>
const sendEventButton = document.getElementById('sendEventButton');
const popup = document.getElementById('popup');
sendEventButton.addEventListener('click', async () => {
try {
const connectionString = document.getElementById('connectionString').value;
const eventHubName = document.getElementById('eventHubName').value;
const response = await fetch(`/sendEvent?connectionString=${encodeURIComponent(connectionString)}&eventHubName=${encodeURIComponent(eventHubName)}`);
if (response.ok) {
const eventData = await response.json();
showPopup(`Event sent successfully\nEvent Data:\n${JSON.stringify(eventData, null, 2)}`, 'success');
// Use sendBeacon to asynchronously send data to the server
const beaconData = JSON.stringify(eventData);
const beaconSent = navigator.sendBeacon('/logEventData', beaconData);
if (beaconSent) {
console.log('Beacon sent successfully');
} else {
console.error('Failed to send beacon');
}
} else {
showPopup('Failed to send event', 'error');
}
} catch (error) {
console.error('An error occurred:', error);
showPopup('An error occurred', 'error');
}
});
function showPopup(message, type) {
popup.textContent = message;
popup.className = `popup ${type}`;
popup.style.display = 'block';
setTimeout(() => {
popup.style.display = 'none';
}, 3000);
}
</script>
</body>
</html>
In Local
In Azure:
