您如何在HTML5中使用Websocket？

WebSockets in HTML5 enable full-duplex, real-time communication between client and server through a persistent connection. 1. Create a WebSocket connection using const socket = new WebSocket('wss://example.com/socket'); with ws:// or wss:// protocol. 2. Handle events: 'open' for connection established, 'message' for incoming data, 'error' for errors, and 'close' for connection closure, each via addEventListener. 3. Send data using socket.send() with text, JSON (using JSON.stringify), or binary; receive data through the 'message' event, parsing JSON as needed. 4. Close the connection gracefully with socket.close() and optionally provide a code and reason. The server must support WebSocket protocol using frameworks like ws in Node.js or websockets in Python, and production applications should implement reconnection logic and respect same-origin policies, ensuring both client and server can communicate effectively through this persistent channel.

WebSockets in HTML5 allow for full-duplex, real-time communication between a client (like a web browser) and a server. Unlike traditional HTTP requests, which are stateless and request-response based, WebSockets keep a persistent connection open, enabling either side to send data at any time.

Here’s how you use WebSockets in HTML5:

1. Create a WebSocket Connection

You start by creating a new WebSocket object in JavaScript, passing the server URL with the ws:// or wss:// (secure) protocol.

const socket = new WebSocket('wss://example.com/socket');

• Use ws:// for unencrypted connections (like HTTP).
• Use wss:// for encrypted connections (like HTTPS).

2. Handle Connection Events

The WebSocket object emits events you can listen to:

• open: Fired when the connection is established.
• message: Fired when a message is received from the server.
• error: Fired when an error occurs.
• close: Fired when the connection is closed.

Example:

// Connection opened
socket.addEventListener('open', (event) => {
  console.log('Connected to server');
  socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', (event) => {
  console.log('Message from server:', event.data);
});

// Handle errors
socket.addEventListener('error', (event) => {
  console.error('WebSocket error:', event);
});

// Handle connection close
socket.addEventListener('close', (event) => {
  console.log('Connection closed');
});

3. Send and Receive Data

Once connected, you can send data using the send() method. The server can also send data at any time.

// Send a message to the server
socket.send('Hello, server!');

// Receiving messages is handled in the 'message' event above

You can send text, JSON, or even binary data like ArrayBuffer or Blob.

Example with JSON:

const data = { type: 'chat', message: 'Hi everyone!' };
socket.send(JSON.stringify(data));

And to handle incoming JSON:

socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

4. Close the Connection

To close the connection gracefully, call the close() method:

socket.close();

You can also pass a code and a reason:

socket.close(1000, 'Closing normally');

Important Notes

• The server must support WebSocket protocol — standard HTTP servers won’t work.
• Common backend implementations use Node.js (with ws or Socket.IO), Python (with websockets or Flask-SocketIO), or other WebSocket-enabled frameworks.
• Always handle reconnection logic in production apps in case the connection drops.
• Be cautious with cross-origin policies — WebSocket connections follow the same-origin policy unless the server explicitly allows it.

Basically, WebSockets give you a persistent pipe between browser and server. Once set up, they’re simple to use with just a few event listeners and the send() method. Just remember: the backend must be built to handle WebSocket connections — HTML5 provides the client tools, but the server needs to speak the same language.

以上是您如何在HTML5中使用Websocket？的详细内容。更多信息请关注PHP中文网其他相关文章！