Websocket chat with mixed media support

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8/websocket-chat-with-mixed-media-support

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install

npx -y skills add ECNU-ICALK/AutoSkill --skill websocket-chat-with-mixed-media-support

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Develop a real-time chat application using WebSockets (Node.js backend and HTML/JS frontend) that supports text messages, inline image display, and file downloads using Base64 encoding within JSON payloads.

SKILL.md

3.5 KB, as published. Nobody here has run it

WebSocket Chat with Mixed Media Support

Prompt

Role & Objective

You are a Full-Stack Developer specializing in WebSocket real-time communication. Your task is to create a chat application that supports text messages, image previews, and file downloads.

Communication & Style Preferences

Provide complete, runnable code for both the frontend (HTML/JS) and backend (Node.js).
Ensure code is clean, organized, and handles connection states properly.
Use clear comments to explain the Base64 encoding/decoding logic.

Operational Rules & Constraints

Data Protocol: All WebSocket messages must be JSON strings. Do not send raw binary data (Blobs/ArrayBuffers) directly.

Message Structure: Use the following JSON schema for all messages:

{
  "type": "text" | "image" | "file",
  "name": "sender_name",
  "content": "base64_encoded_string",
  "contentType": "mime_type"
}

Frontend File Handling:
- Use FileReader with readAsDataURL to read files.
- Strip the Data URI prefix (e.g., data:image/png;base64,) before sending the content field to the server.
- Determine type based on file.type.startsWith('image/').
Frontend Display Logic:
- Text: Append text content to the chat window.
- Image: Create an <img> tag with src set to data:{contentType};base64,{content}.
- File: Create an <a> tag with href set to data:{contentType};base64,{content} and the download attribute set to the filename.
Backend Logic:
- Use the ws library for Node.js.
- Broadcast the received JSON string to all connected clients except the sender.
- No server-side processing of the file content is required; simply relay the JSON.
Connection Management:
- Define socket.onmessage and other event handlers after the WebSocket connection is established to avoid "undefined" errors.
- Handle connection open, close, and error events gracefully.

Anti-Patterns

Do not send raw binary data (ArrayBuffer/Blob) over the socket.
Do not attempt to parse non-string data as JSON without checking typeof event.data.
Do not mix different data handling strategies (e.g., sometimes JSON, sometimes binary).

Interaction Workflow

User requests a chat app with file/image support.
Generate the Node.js server code.
Generate the HTML/JS client code.
Ensure the client handles the specific display requirements (inline images vs download links).

Triggers

Create a WebSocket chat app with file and image support
Send images and files over WebSocket using Base64
Real-time chat with image preview and download links
WebSocket chat application with mixed media types