To create a WebSocket connection, you need to use new WebSocket('wss://example.com/socket'); 2. Listen to onopen, onmessage, onerror and onclose events to handle the connection life cycle; 3. Send data through socket.send(), and use JSON.stringify() when sending objects; 4. When receiving messages, you need to parse and process data, and you need to capture parsing errors; 5. You can call socket.close() to manually close the connection; 6. To implement the reconnect mechanism to deal with network interruptions, it is recommended to adopt an exponential backoff strategy; 7. The server needs to support WebSocket, such as Node.js' ws library; Summary: WebSocket It realizes two-way communication between the client and the server, which is suitable for real-time scenarios. Connections, messages, errors and reconnections need to be properly handled to ensure stability.

Using WebSockets in JavaScript allows you to establish a persistent, two-way communication channel between a client (like a browser) and a server. This is especially useful for real-time features like chat apps, live notifications, or live data updates.

Here's how to use WebSockets in JavaScript, step by step:

? 1. Create a WebSocket Connection

To start, you create a new WebSocket object by providing the server's WebSocket URL. It usually starts with ws:// (unencrypted) or wss:// (secure, like HTTPS).

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

? Use wss:// in production for security (encrypted connection).

? 2. Handle Connection Events

WebSockets have several event handlers to manage the lifecycle:

• onopen – when the connection is established
• onmessage – when a message is received from the server
• onerror – when an error occurs
• onclose – when the connection closes

 socket.onopen = function(event) {
  console.log('Connected to the WebSocket server');
  // Optionally send a message right after connecting
  socket.send('Hello Server!');
};

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
  // Handle incoming data (can be string, JSON, etc.)
};

socket.onerror = function(error) {
  console.error('WebSocket error:', error);
};

socket.onclose = function(event) {
  console.log('Connection closed', event);
};

? 3. Send Data to the Server

Once the connection is open, use the send() method to transmit data:

 // Send a string
socket.send('Hi there!');

// Or send JSON data
const message = {
  type: 'chat',
  user: 'Alice',
  text: 'Hello!'
};
socket.send(JSON.stringify(message));

? Always use JSON.stringify() when sending objects.

? 4. Receiving and Parsing Messages

The server might send structured data (like JSON). Always validate before parsing:

 socket.onmessage = function(event) {
  try {
    const data = JSON.parse(event.data);
    console.log('Parsed data:', data);
    // Process based on message type
    if (data.type === 'chat') {
      displayChatMessage(data.user, data.text);
    }
  } catch (e) {
    // Not JSON – treat as plain text
    console.log('Raw message:', event.data);
  }
};

? 5. Close the Connection (Optional)

You can close the connection manually when needed:

 socket.close();

You can also pass a code and reason:

 socket.close(1000, 'Normal closure');

? 6. Reconnection Strategy (Recommended)

WebSockets can drop due to network issues. A simple reconnection loop helps:

 let socket;
let retries = 0;
const maxRetries = 5;

function connect() {
  socket = new WebSocket('wss://example.com/socket');

  socket.onopen = () => {
    console.log('Connected');
    retries = 0; // Reset retries on success
  };

  socket.onclose = () => {
    if (retries < maxRetries) {
      retries ;
      console.log(`Reconnecting... (${retries})`);
      setTimeout(connect, 3000 * retries); // Exponential backoff
    } else {
      console.error(&#39;Max reconnection attempts reached&#39;);
    }
  };

  socket.onerror = (error) => {
    console.error(&#39;WebSocket error:&#39;, error);
  };
}

connect();

? 7. Server-Side Note

You'll need a backend that supports WebSockets. Common options include:

• Node.js with ws or Socket.IO
• Python with websockets or Socket.IO
• Go, Java, or other backends with WebSocket libraries

Example using Node.js ws :

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

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Received:', message);
    ws.send(`Echo: ${message}`);
  });
  ws.send('Welcome!');
});

Summary

WebSockets are simple to use in JavaScript:

• Use new WebSocket(url) to connect
• Listen to onopen , onmessage , onerror , onclose
• Use .send() to send messages
• Parse incoming data safely
• Add reconnection logic for reliability

It's not complex, but it's powerful when you need real-time updates. Just remember to handle errors and disconnections gracefully.

Basically, that's all you need to get started with WebSockets in JavaScript.

The above is the detailed content of How to use WebSockets in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!