add js class

2026-03-15 18:41:45 +07:00
parent 34d8e3fad8
commit 9c4c941840
5 changed files with 544 additions and 28 deletions
--- a/README.md
+++ b/README.md
@@ -790,6 +790,123 @@ python3 test/test_py_table_receiver.py

 ---

+## Browser Deployment
+
+### Using with Node.js Build Tools
+
+The browser implementation (`src/natsbridge_csr.js`) can be bundled for production deployment using modern JavaScript build tools.
+
+#### Prerequisites
+
+```bash
+# Install the browser-compatible NATS client
+npm install nats.ws
+```
+
+#### Vite (Recommended)
+
+```bash
+npm create vite@latest my-app -- --template vanilla
+cd my-app
+npm install nats.ws
+```
+
+In `vite.config.js`:
+```javascript
+import { defineConfig } from 'vite';
+export default defineConfig({
+  resolve: {
+    alias: {
+      'nats.ws': 'nats.ws/dist/esm/browser.js'
+    }
+  }
+});
+```
+
+Build command:
+```bash
+npm run build  # Outputs to dist/ folder
+```
+
+#### Webpack
+
+```bash
+npm install webpack webpack-cli --save-dev
+npm install nats.ws
+```
+
+In `webpack.config.js`:
+```javascript
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: __dirname + '/dist'
+  },
+  resolve: {
+    alias: {
+      'nats.ws': 'nats.ws/dist/esm/browser.js'
+    }
+  }
+};
+```
+
+Build command:
+```bash
+npx webpack
+```
+
+#### esbuild (Simple & Fast)
+
+```bash
+npm install esbuild nats.ws --save-dev
+```
+
+Create `build.js`:
+```javascript
+import esbuild from 'esbuild';
+
+esbuild.buildSync({
+  entryPoints: ['src/natsbridge_csr.js'],
+  bundle: true,
+  outfile: 'dist/natsbridge-csr-bundle.js',
+  format: 'esm',
+  platform: 'browser',
+  target: 'es2020'
+});
+```
+
+Build command:
+```bash
+node build.js
+```
+
+### Using in Your HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My App</title>
+</head>
+<body>
+  <script type="module" src="dist/natsbridge-csr-bundle.js"></script>
+  <script type="module">
+    import NATSBridgeCSR from './dist/natsbridge-csr-bundle.js';
+    
+    // Use the library
+    const [env, envJson] = await NATSBridgeCSR.smartsend(
+      "/chat/user/v1/message",
+      [["msg", "Hello", "text"]],
+      { broker_url: "wss://nats.example.com" }
+    );
+  </script>
+</body>
+</html>
+```
+
+---
+
 ## Documentation

 For detailed architecture and implementation information, see: