Conversor de Transcripción de Video a Blog en HTML

Blog Post * { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9f9f9; color: #1a1a1a; line-height: 1.7; padding: 2rem 1rem; }

.container { max-width: 800px; margin: 0 auto; background: #ffffff; padding: 2.5rem; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -0.02em; }

h2 { font-size: 1.6rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: 2px solid #e0e0e0; }

h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1.2rem; font-size: 1.05rem; }

figure { margin: 2rem 0; text-align: center; }

figure img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

figcaption { font-size: 0.9rem; color: #666; margin-top: 0.5rem; font-style: italic; }

pre { background: #f4f4f4; padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.95rem; border-left: 4px solid #007acc; margin: 1.5rem 0; }

code { background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9rem; }

pre code { background: none; padding: 0; }

blockquote { border-left: 4px solid #007acc; margin: 1.5rem 0; padding: 0.5rem 1.5rem; background: #f8f9fa; font-style: italic; color: #333; }

.meta { font-size: 0.9rem; color: #888; margin-bottom: 2rem; }

.highlight-box { background: #f0f7ff; border-left: 4px solid #007acc; padding: 1rem 1.5rem; border-radius: 0 6px 6px 0; margin: 1.5rem 0; }

@media (max-width: 600px) { .container { padding: 1.5rem; } h1 { font-size: 1.8rem; } } Building a Real-Time Chat App with WebSockets By John Doe · 12 min read · Updated: Oct 12, 2023

In this tutorial, we'll walk through the process of building a real-time chat application using WebSockets. We'll cover everything from setting up the server to handling multiple clients and broadcasting messages. By the end, you'll have a solid foundation for adding real-time features to your own projects.

Why WebSockets? WebSockets provide a full-duplex communication channel over a single TCP connection. Unlike traditional HTTP requests, which are unidirectional and require a new connection for each request, WebSockets allow for persistent, bidirectional communication. This makes them perfect for applications like chat apps, live notifications, and online gaming.

Setting Up the Server First, let's create a simple WebSocket server using Node.js and the ws library. If you haven't already, initialize a new Node.js project and install the required dependencies.

npm init -y npm install ws

Now, create a file named server.js and add the following code:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => { console.log('Client connected');

ws.on('message', (message) => { console.log(`Received: ${message}`); // Broadcast the message to all connected clients wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(message.toString()); } }); });

ws.on('close', () => { console.log('Client disconnected'); }); });

console.log('WebSocket server is running on ws://localhost:8080');

This server listens for incoming WebSocket connections on port 8080. When a message is received from any client, it broadcasts that message to all connected clients. This is the core of our chat functionality.

Building the Client Interface Next, let's create a simple HTML page that connects to our WebSocket server and allows users to send and receive messages. We'll keep the design minimal for now, but you can easily style it to match your brand.

WebSocket Chat body { font-family: Arial, sans-serif; margin: 40px; } #messages { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; } #message-input { width: 80%; padding: 10px; } button { padding: 10px; } Real-Time Chat Send

const ws = new WebSocket('ws://localhost:8080'); const messagesDiv = document.getElementById('messages'); const input = document.getElementById('message-input');

ws.onmessage = (event) => { const message = document.createElement('p'); message.textContent = event.data; messagesDiv.appendChild(message); messagesDiv.scrollTop = messagesDiv.scrollHeight; };

function sendMessage() { const message = input.value; ws.send(message); input.value = ''; }

input.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });

This HTML file creates a simple chat interface with a message display area and an input field. When the user sends a message, it's sent to the WebSocket server, which then broadcasts it to all connected clients.

Testing the Application To test the application, start the server with node server.js and open the HTML file in multiple browser windows. You should be able to send messages between windows in real-time.

Figure 1: The chat application running in two browser windows

Adding a Message Log One common feature in chat applications is persisting messages so that new users can see the conversation history. We can easily add this by storing messages in an array on the server and sending them to new connections.

const messages = [];

wss.on('connection', (ws) => { // Send existing messages to the new client messages.forEach((msg) => ws.send(msg));

ws.on('message', (message) => { const msg = message.toString(); messages.push(msg); // Broadcast to all clients wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(msg); } }); }); });

Now, when a new client connects, they'll receive the entire message history. This is a simple in-memory solution; for production, you'd likely use a database.

Conclusion In this post, we've built a fully functional real-time chat application using WebSockets. We covered the basics of setting up a WebSocket server, creating a client interface, and adding features like message broadcasting and history. This foundation can be extended with features like user authentication, private messaging, and message persistence.

WebSockets open up a world of possibilities for interactive web applications. Whether you're building a chat app, a live dashboard, or a collaborative tool, the principles remain the same. Happy coding!

Pro Tip: Always handle WebSocket connection errors and reconnection logic in production to ensure a smooth user experience.

Conversor de Transcripción de Video a Blog en HTML

Contenido del PromptGuardar

Iniciá sesión para ver el prompt completo

Uso

Referencias

Discusión