|
| 1 | +# Quick Start Guide – CDPLogger Client |
| 2 | + |
| 3 | +This guide demonstrates how to get started with the CDPLogger Client in both **Node.js** and **Browser** environments. The client automatically detects the environment and works seamlessly in both. |
| 4 | + |
| 5 | +## Documentation |
| 6 | + |
| 7 | +For documentation on the JS logger client see [DOCUMENTATION.md](DOCUMENTATION.md) |
| 8 | + |
| 9 | +## Overview |
| 10 | + |
| 11 | +The CDPLogger Client uses **automatic environment detection** to work in both Node.js and browser environments from a single source file: |
| 12 | + |
| 13 | +- **Node.js:** |
| 14 | + - Automatically loads protobuf definitions using `require('./generated/containerPb.js')` |
| 15 | + - Uses the `ws` package for WebSocket functionality (installed as a dependency) |
| 16 | + - No manual setup required |
| 17 | + |
| 18 | +- **Browser:** |
| 19 | + - Uses the browser's native WebSocket API |
| 20 | + - Expects protobuf definitions to be available at `window.root` |
| 21 | + - Requires including the containerPb.js script before the client |
| 22 | + |
| 23 | +## Installation |
| 24 | + |
| 25 | +### For Node.js |
| 26 | + |
| 27 | +```bash |
| 28 | +npm install cdplogger-client |
| 29 | +``` |
| 30 | + |
| 31 | +### For Browser |
| 32 | + |
| 33 | +Include the following scripts in your HTML: |
| 34 | +- `protobuf.min.js` – for the ProtoBuf runtime. |
| 35 | +- `containerPb.js` – which sets up `window.root` with your protobuf definitions |
| 36 | +- `client.js` – the same file works in both Node.js and browser environments |
| 37 | +- Instead of importing protobuf definitions via CommonJS, obtain them from the global scope: |
| 38 | + ```js |
| 39 | + const root = window.root; |
| 40 | + const Container = root.DBMessaging.Protobuf.Container; |
| 41 | + const CDPValueType = root.ICD.Protobuf.CDPValueType; |
| 42 | + const EventQuery = root.DBMessaging.Protobuf.EventQuery; |
| 43 | + ``` |
| 44 | + |
| 45 | +## Usage |
| 46 | + |
| 47 | +### Node.js Example |
| 48 | + |
| 49 | +```js |
| 50 | +// Import the client |
| 51 | +const cdplogger = require('cdplogger-client'); |
| 52 | + |
| 53 | +// Create a client instance (endpoint can be "127.0.0.1:17000" or "ws://127.0.0.1:17000") |
| 54 | +const client = new cdplogger.Client('127.0.0.1:17000'); |
| 55 | + |
| 56 | +// List logged nodes (displaying name and routing information) |
| 57 | +client.requestLoggedNodes().then(nodes => { |
| 58 | + nodes.forEach(node => { |
| 59 | + console.log(`Name: ${node.name}, Routing: ${node.routing}`); |
| 60 | + }); |
| 61 | + |
| 62 | + // If we have nodes, request data points for the first one |
| 63 | + if (nodes.length > 0) { |
| 64 | + const nodeName = nodes[0].name; |
| 65 | + console.log(`\nRequesting data points for node: ${nodeName}`); |
| 66 | + |
| 67 | + // Get log limits and request data points |
| 68 | + client.requestLogLimits().then(limits => { |
| 69 | + return client.requestDataPoints([nodeName], limits.startS, limits.endS, 10, 0); |
| 70 | + }).then(dataPoints => { |
| 71 | + console.log(`\nReceived ${dataPoints.length} data points:`); |
| 72 | + dataPoints.forEach(point => { |
| 73 | + console.log(`Timestamp: ${new Date(point.timestamp * 1000).toISOString()}`); |
| 74 | + if (point.value && point.value[nodeName]) { |
| 75 | + const val = point.value[nodeName]; |
| 76 | + console.log(` Min: ${val.min}, Max: ${val.max}, Last: ${val.last}`); |
| 77 | + } |
| 78 | + }); |
| 79 | + }).catch(err => { |
| 80 | + console.error("Error retrieving data points:", err); |
| 81 | + }); |
| 82 | + } |
| 83 | +}); |
| 84 | + |
| 85 | +// Disconnect after a short delay (for demonstration purposes) |
| 86 | +setTimeout(() => { |
| 87 | + client.disconnect(); |
| 88 | + process.exit(0); |
| 89 | +}, 5000); |
| 90 | +``` |
| 91 | + |
| 92 | +*The client automatically detects the Node.js environment and uses the `ws` package for WebSocket functionality.* |
| 93 | + |
| 94 | +### Browser Example |
| 95 | + |
| 96 | +Create an HTML file that includes the necessary scripts. For example: |
| 97 | + |
| 98 | +```html |
| 99 | +<!DOCTYPE html> |
| 100 | +<html> |
| 101 | + <head> |
| 102 | + <meta charset="UTF-8"> |
| 103 | + <title>CDPLogger Client Quick Start</title> |
| 104 | + <!-- Include the protobuf runtime --> |
| 105 | + <script src="protobuf.min.js"></script> |
| 106 | + <!-- Include containerPb.js to set up global "root" --> |
| 107 | + <script src="containerPb.js"></script> |
| 108 | + <!-- Include client.js --> |
| 109 | + <script src="client.js"></script> |
| 110 | + </head> |
| 111 | + <body> |
| 112 | + <script> |
| 113 | + // Access protobuf definitions from global scope |
| 114 | + const root = window.root; |
| 115 | + const Container = root.DBMessaging.Protobuf.Container; |
| 116 | + const CDPValueType = root.ICD.Protobuf.CDPValueType; |
| 117 | + const EventQuery = root.DBMessaging.Protobuf.EventQuery; |
| 118 | + |
| 119 | + // The client is now available globally as "cdplogger" (attached to window) |
| 120 | + // Use window.location.hostname to connect to the same host as the web page |
| 121 | + const client = new cdplogger.Client(window.location.hostname + ":17000"); |
| 122 | +
|
| 123 | + // List logged nodes and output their names and routings |
| 124 | + client.requestLoggedNodes().then(nodes => { |
| 125 | + nodes.forEach(node => { |
| 126 | + console.log(`Name: ${node.name}, Routing: ${node.routing}`); |
| 127 | + }); |
| 128 | + |
| 129 | + // If we have nodes, request data points for the first one |
| 130 | + if (nodes.length > 0) { |
| 131 | + const nodeName = nodes[0].name; |
| 132 | + console.log(`\nRequesting data points for node: ${nodeName}`); |
| 133 | + |
| 134 | + // Get log limits and request data points |
| 135 | + client.requestLogLimits().then(limits => { |
| 136 | + return client.requestDataPoints([nodeName], limits.startS, limits.endS, 10, 0); |
| 137 | + }).then(dataPoints => { |
| 138 | + console.log(`\nReceived ${dataPoints.length} data points:`); |
| 139 | + dataPoints.forEach(point => { |
| 140 | + console.log(`Timestamp: ${new Date(point.timestamp * 1000).toISOString()}`); |
| 141 | + if (point.value && point.value[nodeName]) { |
| 142 | + const val = point.value[nodeName]; |
| 143 | + console.log(` Min: ${val.min}, Max: ${val.max}, Last: ${val.last}`); |
| 144 | + } |
| 145 | + }); |
| 146 | + }).catch(err => { |
| 147 | + console.error("Error retrieving data points:", err); |
| 148 | + }); |
| 149 | + } |
| 150 | + }); |
| 151 | + </script> |
| 152 | + </body> |
| 153 | +</html> |
| 154 | +``` |
| 155 | + |
| 156 | +*In the browser version, we use `window.location.hostname` to connect to the same host as the web page, with the default logger port 17000.* |
| 157 | + |
| 158 | +## Prerequisites |
| 159 | + |
| 160 | +- **CDP Studio:** Ensure a CDP Studio application is running with an active **CDPLogger** (or LogServer) on a known WebSocket port (e.g., 17000). |
| 161 | +- **For Node.js:** No additional setup required - WebSocket support is automatically configured. |
| 162 | +- **For Browser:** Ensure `containerPb.js` is available and sets up `window.root` with protobuf definitions. |
| 163 | + |
| 164 | +## Learn More |
| 165 | + |
| 166 | +- [Full README](https://github.com/CDPTechnologies/JavascriptCDPLoggerClient) |
| 167 | +- [CDP Logger Documentation](https://cdpstudio.com/manual/cdp/cdplogger/cdplogger-configuration-manual.html) |
0 commit comments