Building a real-time chat application with HTML5 WebSockets.

设置基于Node.js和ws库的WebSocket服务器，监听8080端口并广播消息；2. 创建HTML前端界面，通过原生WebSocket API连接服务器；3. 实现消息发送与接收功能，支持多客户端实时通信；4. 启动服务并多窗口测试，确保消息同步。

Creating a real-time chat application using HTML5 WebSockets is a straightforward way to enable instant communication between users. WebSockets provide a persistent, two-way connection between the client and server, making them ideal for chat functionality.

Set Up the Backend WebSocket Server

You need a server that supports WebSocket connections. Node.js with the ws library is a popular choice.

Example server code:

<font size="-2">
const WebSocket = require('ws');

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

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

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

  ws.on('close', () =&gt; {
    console.log('Client disconnected');
  });
});
</font>

This starts a WebSocket server on port 8080 and broadcasts any received message to all connected clients.

Create the Frontend with HTML and JavaScript

The client interface uses the native WebSocket API in the browser.

Example frontend code:

<font size="-2">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Real-Time Chat&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h2&gt;Chat Room&lt;/h2&gt;
  &lt;div id="messages"&gt;&lt;/div&gt;
  &lt;input type="text" id="messageInput" placeholder="Type a message..." /&gt;
  &lt;button onclick="sendMessage()"&gt;Send&lt;/button&gt;

  &lt;script&gt;
    const socket = new WebSocket('ws://localhost:8080');

    socket.onopen = () =&gt; {
      console.log('Connected to server');
    };

    socket.onmessage = (event) =&gt; {
      const messages = document.getElementById('messages');
      const message = document.createElement('div');
      message.textContent = event.data;
      messages.appendChild(message);
    };

    function sendMessage() {
      const input = document.getElementById('messageInput');
      if (input.value) {
        socket.send(input.value);
        input.value = '';
      }
    }

    // Allow sending message with Enter key
    document.getElementById('messageInput').addEventListener('keypress', (e) =&gt; {
      if (e.key === 'Enter') sendMessage();
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</font>

Run and Test the Application

Start the server and open the HTML page in multiple browser windows to simulate different users.

Ensure your firewall allows connections on port 8080, or adjust the port as needed.

Basically just connect the frontend to the backend using WebSockets, handle message sending and receiving, and broadcast to all clients. With minimal code, you have a working real-time chat app.

The above is the detailed content of Building a real-time chat application with HTML5 WebSockets.. For more information, please follow other related articles on the PHP Chinese website!