112 lines
3.3 KiB
Markdown
112 lines
3.3 KiB
Markdown
|
# Kosmi WebSocket Monitor - Image Upload Capture
|
||
|
|
|
||
|
|
This tool captures ALL WebSocket and HTTP traffic from a Kosmi chat session, specifically designed to reverse-engineer the image upload protocol.
|
||
|
|
|
||
|
|
## ⚠️ Known Issue
|
||
|
|
|
||
|
|
The Playwright browser may have restrictions that prevent file uploads. If uploads don't work in the automated browser, **use the manual capture method instead** (see `CAPTURE_UPLOAD_MANUALLY.md`).
|
||
|
|
|
||
|
|
## Prerequisites
|
||
|
|
|
||
|
|
- `blurt.jpg` must exist in the project root directory (test image for upload)
|
||
|
|
- Playwright must be installed: `go run github.com/playwright-community/playwright-go/cmd/playwright@latest install`
|
||
|
|
|
||
|
|
## Running the Monitor
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd /Users/erikfredericks/dev-ai/HSO/irc-kosmi-relay
|
||
|
|
./monitor-ws
|
||
|
|
```
|
||
|
|
|
||
|
|
**Note:** Press Ctrl+C to stop (now properly handles cleanup).
|
||
|
|
|
||
|
|
## What It Does
|
||
|
|
|
||
|
|
1. Opens a browser window to https://app.kosmi.io/room/@hyperspaceout
|
||
|
|
2. Captures all WebSocket messages (text and binary)
|
||
|
|
3. Captures all HTTP requests and responses
|
||
|
|
4. Logs everything to console AND `image-upload-capture.log`
|
||
|
|
5. Attempts to trigger file upload dialog automatically
|
||
|
|
6. If auto-trigger fails, waits for you to manually upload an image
|
||
|
|
|
||
|
|
## Manual Steps
|
||
|
|
|
||
|
|
1. Run the monitor
|
||
|
|
2. Wait for the browser to open and load Kosmi
|
||
|
|
3. Look for the attachment/upload button in the chat interface (usually a paperclip or + icon)
|
||
|
|
4. Click it and select `blurt.jpg` from the project root
|
||
|
|
5. Wait for the upload to complete
|
||
|
|
6. Press Ctrl+C to stop monitoring
|
||
|
|
|
||
|
|
## What to Look For
|
||
|
|
|
||
|
|
### In the Console/Log File:
|
||
|
|
|
||
|
|
**HTTP Requests:**
|
||
|
|
- Look for POST or PUT requests to upload endpoints
|
||
|
|
- Common patterns: `/upload`, `/media`, `/file`, `/attachment`, `/image`
|
||
|
|
- Note the URL, headers, and request body format
|
||
|
|
|
||
|
|
**HTTP Responses:**
|
||
|
|
- Look for JSON responses containing image URLs
|
||
|
|
- Note the URL structure (CDN, S3, etc.)
|
||
|
|
|
||
|
|
**WebSocket Messages:**
|
||
|
|
- Look for GraphQL mutations related to file upload
|
||
|
|
- Mutation names might include: `uploadFile`, `uploadImage`, `sendMedia`, `attachFile`
|
||
|
|
- Note the mutation structure, variables, and response format
|
||
|
|
- Check for binary WebSocket frames (image data sent directly)
|
||
|
|
|
||
|
|
**Example patterns to look for:**
|
||
|
|
```graphql
|
||
|
|
mutation UploadFile($file: Upload!, $roomId: String!) {
|
||
|
|
uploadFile(file: $file, roomId: $roomId) {
|
||
|
|
url
|
||
|
|
id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Or HTTP multipart form-data:
|
||
|
|
```
|
||
|
|
POST /api/upload
|
||
|
|
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...
|
||
|
|
Authorization: Bearer <token>
|
||
|
|
|
||
|
|
------WebKitFormBoundary...
|
||
|
|
Content-Disposition: form-data; name="file"; filename="blurt.jpg"
|
||
|
|
Content-Type: image/jpeg
|
||
|
|
|
||
|
|
<binary data>
|
||
|
|
------WebKitFormBoundary...--
|
||
|
|
```
|
||
|
|
|
||
|
|
## Output
|
||
|
|
|
||
|
|
All traffic is logged to:
|
||
|
|
- Console (real-time)
|
||
|
|
- `image-upload-capture.log` (persistent)
|
||
|
|
|
||
|
|
The log file includes timestamps and is easier to search through after the capture is complete.
|
||
|
|
|
||
|
|
## Alternative: Manual Capture
|
||
|
|
|
||
|
|
If the automated browser doesn't allow uploads, use your normal browser instead:
|
||
|
|
|
||
|
|
**See `CAPTURE_UPLOAD_MANUALLY.md` for detailed instructions.**
|
||
|
|
|
||
|
|
Quick summary:
|
||
|
|
1. Open Chrome DevTools (F12)
|
||
|
|
2. Go to Network tab, check "Preserve log"
|
||
|
|
3. Upload an image in Kosmi
|
||
|
|
4. Find the upload request
|
||
|
|
5. Copy request/response details
|
||
|
|
|
||
|
|
## Next Steps
|
||
|
|
|
||
|
|
After capturing the upload flow:
|
||
|
|
1. Analyze the log file (or manual capture) to identify the upload method
|
||
|
|
2. Document findings in `KOSMI_IMAGE_UPLOAD.md`
|
||
|
|
3. Implement the upload client in Go based on the findings
|
||
|
|
|