How do you use websockets in HTML5?

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.

The above is the detailed content of How do you use websockets in HTML5?. For more information, please follow other related articles on the PHP Chinese website!