{"id":19450177,"url":"https://github.com/webexsamples/browser-sdk-demo","last_synced_at":"2025-09-09T11:23:17.313Z","repository":{"id":114828922,"uuid":"561447979","full_name":"WebexSamples/browser-sdk-demo","owner":"WebexSamples","description":"Sample app that demonstrates using the Browser SDK to manage rooms, send messages, and listen for new messages.","archived":false,"fork":false,"pushed_at":"2024-05-07T17:53:19.000Z","size":151,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-25T09:21:20.807Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebexSamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-03T17:58:32.000Z","updated_at":"2024-05-07T17:53:20.000Z","dependencies_parsed_at":"2024-05-07T18:46:42.647Z","dependency_job_id":"4a1b112e-d65c-4f57-91e1-118f0087bb69","html_url":"https://github.com/WebexSamples/browser-sdk-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WebexSamples/browser-sdk-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fbrowser-sdk-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fbrowser-sdk-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fbrowser-sdk-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fbrowser-sdk-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebexSamples","download_url":"https://codeload.github.com/WebexSamples/browser-sdk-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fbrowser-sdk-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274290580,"owners_count":25258152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T16:35:36.330Z","updated_at":"2025-09-09T11:23:17.086Z","avatar_url":"https://github.com/WebexSamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser SDK Messaging Sample App\n\nA comprehensive sample application demonstrating how to use the Webex Browser SDK for messaging functionality. This interactive web application showcases essential Webex messaging features in a simple, easy-to-understand format.\n\n![](app.png)\n\n## 🎯 Features\n\nThis sample shows how to use the Webex Browser SDK to do the following:\n\n* **List rooms (spaces)** you belong to\n* **Create and delete rooms** programmatically\n* **Send messages** to a room\n* **Add members** to a room\n* **Listen for newly created or deleted messages** in a room\n* **Real-time event handling** with WebSocket connections\n\n## 📚 Tutorial\n\nThis app accompanies a [tutorial](https://developer.webex.com/docs/browser-sdk-messaging-tutorial) on the Webex Developer Portal that you can follow along with using the [starter files](./starter), or run the [completed project](./completed).\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Modern web browser (Chrome, Firefox, Safari, Edge)\n- Webex Teams account\n- Personal access token from the Webex Developer Portal\n\n### Getting Your Personal Access Token\n\n1. Go to the [Webex Developer Portal](https://developer.webex.com/)\n2. Sign in with your Webex account\n3. Navigate to **Getting Started** \u003e **Your Personal Access Token**\n4. Copy the generated token\n\n\u003e **Production Note**: In a production environment you will want to create a [Webex Integration](https://developer.webex.com/docs/integrations) (OAuth client) that will obtain an API access token for the authenticating Webex user.\n\n### Setup Instructions\n\n1. **Clone or download** this repository\n2. **Choose your path**:\n   - **Learning path**: Start with the [starter files](./starter) and follow the tutorial\n   - **Ready-to-use**: Use the [completed project](./completed)\n\n3. **Configure your token** in the appropriate `index.js` file:\n\n```javascript\nconst webex = (window.webex = window.Webex.init({\n    credentials: {\n        access_token: \"\u003cYOUR-PERSONAL-ACCESS_TOKEN\u003e\"\n    }\n}));\n```\n\n4. **Open `index.html`** in your browser\n5. **Verify setup**: You should see an \"Authentication successful\" message\n\n![](authorized.png)\n\n## 📁 Project Structure\n\n```\nbrowser-sdk-demo/\n├── completed/          # Full working implementation\n│   ├── index.html      # Complete HTML interface\n│   └── index.js        # Complete JavaScript functionality\n├── starter/            # Starting point for tutorial\n│   ├── index.html      # Basic HTML structure\n│   └── index.js        # Minimal JavaScript setup\n├── app.png            # Application screenshot\n├── authorized.png     # Success state screenshot\n└── README.md          # This file\n```\n\n## 🔧 Functionality Overview\n\n### Core Features\n\n| Feature | Description | Implementation |\n|---------|-------------|----------------|\n| **List Rooms** | Retrieve up to 10 rooms you belong to | `webex.rooms.list()` |\n| **Create Room** | Create new rooms with custom names | `webex.rooms.create()` |\n| **Send Message** | Send text messages to rooms | `webex.messages.create()` |\n| **Add Member** | Add users to rooms by email | `webex.memberships.create()` |\n| **Delete Room** | Remove rooms by ID | `webex.rooms.remove()` |\n| **Start Listening** | Listen for real-time message events | `webex.messages.listen()` |\n| **Stop Listening** | Stop listening for events | `webex.messages.stopListening()` |\n\n### Event Handling\n\nThe application demonstrates real-time event handling:\n\n```javascript\n// Listen for new messages\nwebex.messages.on(\"created\", (event) =\u003e {\n    console.log(\"New message:\", event);\n});\n\n// Listen for deleted messages\nwebex.messages.on(\"deleted\", (event) =\u003e {\n    console.log(\"Message deleted:\", event);\n});\n```\n\n## 🎨 User Interface\n\nThe application uses a clean, minimal design with:\n\n- **Water.css** for styling (loaded from CDN)\n- **Interactive buttons** for each main function\n- **Text area** for logging output and feedback\n- **Responsive design** that works on mobile and desktop\n\n### Button Functions\n\n- **List rooms**: Display all rooms you belong to\n- **Create room**: Prompt for room name and create new room\n- **Send message**: Send a message to the most recently created room\n- **Add member**: Add a user to the current room by email\n- **Delete room**: Remove a room by ID\n- **Start/Stop listening**: Toggle real-time event listening\n\n## 🔐 Authentication\n\nThe sample uses personal access tokens for simplicity. The authentication flow:\n\n1. Initialize Webex SDK with access token\n2. SDK validates token with Webex servers\n3. `ready` event fires when authentication succeeds\n4. Application displays \"Authorization successful\" message\n\n## 📡 API Integration\n\n### Webex SDK Methods Used\n\n- `webex.rooms.list()` - List user's rooms\n- `webex.rooms.create()` - Create new room\n- `webex.rooms.remove()` - Delete room\n- `webex.messages.create()` - Send message\n- `webex.messages.listen()` - Start event listening\n- `webex.messages.stopListening()` - Stop event listening\n- `webex.memberships.create()` - Add room member\n\n### Error Handling\n\nThe application includes comprehensive error handling:\n\n```javascript\nwebex.rooms.list()\n    .then(function (rooms) {\n        // Handle success\n    })\n    .catch(function (error) {\n        // Handle and log errors\n        log(error);\n    });\n```\n\n## 🌐 Browser Compatibility\n\n- **Chrome**: ✅ Full support\n- **Firefox**: ✅ Full support\n- **Safari**: ✅ Full support\n- **Edge**: ✅ Full support\n- **Internet Explorer**: ❌ Not supported\n\n## 🔧 Development\n\n### Local Development\n\n1. Serve files from a local web server (required for SDK to work properly)\n2. Use tools like:\n   - `python -m http.server` (Python)\n   - `npx http-server` (Node.js)\n   - VS Code Live Server extension\n\n### Debugging\n\n- Open browser developer tools\n- Check console for SDK initialization messages\n- Monitor network tab for API calls\n- Use the text area output for application-level logging\n\n## 📝 Code Examples\n\n### Basic Room Creation\n\n```javascript\nfunction createRoom() {\n    const roomName = prompt(\"Enter room name\", \"My Test Room\");\n    \n    webex.rooms.create({ title: roomName })\n        .then(function (room) {\n            console.log(`Created room: ${room.title}`);\n            newRoomId = room.id; // Store for later use\n        })\n        .catch(function (error) {\n            console.error(\"Error creating room:\", error);\n        });\n}\n```\n\n### Message Sending\n\n```javascript\nfunction sendMessage() {\n    const msgText = prompt(\"Enter message text\", \"Hello from Webex SDK!\");\n    \n    webex.messages.create({\n        text: msgText,\n        roomId: newRoomId\n    })\n    .then(function (message) {\n        console.log(\"Message sent successfully\");\n    })\n    .catch(function (error) {\n        console.error(\"Error sending message:\", error);\n    });\n}\n```\n\n## 🚀 Production Considerations\n\nFor production applications, consider:\n\n1. **OAuth Integration**: Replace personal access tokens with proper OAuth flow\n2. **Error Handling**: Implement robust error handling and user feedback\n3. **Rate Limiting**: Handle API rate limits gracefully\n4. **Security**: Never expose tokens in client-side code\n5. **Performance**: Implement proper loading states and user feedback\n\n## 📚 Learning Path\n\n1. **Start with tutorial**: Follow the [browser SDK messaging tutorial](https://developer.webex.com/docs/browser-sdk-messaging-tutorial)\n2. **Explore starter files**: Begin with minimal setup in `/starter`\n3. **Study completed example**: Review full implementation in `/completed`\n4. **Experiment**: Modify and extend the functionality\n5. **Build your own**: Create a custom application using learned concepts\n\n## 🔗 Related Resources\n\n- [Webex Browser SDK Documentation](https://developer.webex.com/docs/browser-sdk)\n- [Webex API Reference](https://developer.webex.com/docs/api/v1/)\n- [Webex Developer Portal](https://developer.webex.com/)\n- [Browser SDK Tutorial](https://developer.webex.com/docs/browser-sdk-messaging-tutorial)\n- [Webex Integration Guide](https://developer.webex.com/docs/integrations)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the terms specified in the [LICENSE](LICENSE) file.\n\n## 🆘 Support\n\n- Create an issue in this repository\n- Visit [Webex Developer Support](https://developer.webex.com/support)\n- Join the [Webex Developer Community](https://developer.webex.com/community)\n\n---\n\n**Repository**: https://github.com/WebexSamples/browser-sdk-demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Fbrowser-sdk-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebexsamples%2Fbrowser-sdk-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Fbrowser-sdk-demo/lists"}