WebSocket is a full-duplex communication protocol provided by HTML5, suitable for real-time interactive scenarios. 1. The client establishes a connection through new WebSocket(url) and listens to events such as onopen and onmessage, and uses send() to send data; 2. The server can be built with the WS library of Node.js to listen to connections and message events and handles them; 3. When using it, pay attention to cross-domain issues, connection preservation, message format uniformity and security. It is recommended that the client implement an automatic reconnection mechanism. Mastering these key points can build powerful real-time communication applications.

WebSocket is a very practical feature in HTML5 that allows the establishment of a persistent, full-duplex communication channel between the client and the server. Compared with the traditional HTTP request-response mode, WebSocket is more suitable for scenarios that require real-time interaction, such as chat applications, online games, real-time data push, etc.

If you are looking for a simple and easy-to-understand example of WebSocket client and server, the following content should be helpful.

How to use WebSocket Client in a Browser

WebSocket's client API is concise and clear, and only a few lines of code can connect to the server and send and receive messages.

 const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

socket.addEventListener('message', function (event) {
    console.log('Received message:', event.data);
});

• new WebSocket(url) : Create a connection, note that the protocol is ws:// (non-encrypted) or wss:// (encrypted).
• onopen : Triggered after the connection is established, and an initialization message can be sent at this time.
• onmessage : Used to receive messages sent by the server.
• send() : Send data to the server, the parameters can be string, Blob, or ArrayBuffer.

You can also listen for errors and close events:

• onerror : Execute when an error occurs.
• onclose : Executes when the connection is disconnected.

How to build a simple WebSocket server (Node.js)

On the server side, you can use Node.js to pair ws , a popular library to quickly implement WebSocket services.

First install the dependencies:

 npm install ws

Then write a basic server code:

 const WebSocket = require('ws');

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

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

    ws.on('message', function incoming(message) {
        console.log('received:', message);
        ws.send(`server response: ${message}`);
    });

    ws.send('Welcome to connect to the WebSocket server');
});

This example does a few things:

• Created a WebSocket server that listens to port 8080.
• Print a log when there is a client connection and send a welcome message.
• Receives the client's message and returns a prefixed response as is.

You can expand this logic according to business needs, such as broadcasting messages to all connected clients, processing JSON data, adding authentication, etc.

Frequently Asked Questions and Precautions

Although WebSocket is powerful, there are some things to pay attention to in actual use:

• Cross-domain problem : WebSocket is also restricted by the same-origin policy. If the front-end and back-end are not under the same domain name, the server needs to set the appropriate CORS header or resolve it through a proxy.
• Connection keeping and reconnection mechanism : WebSocket may be disconnected due to network fluctuations and other reasons. It is recommended that the client add automatic reconnection logic.
• Unified message format : It is recommended that the front and back end agree on good message formats, such as uniformly using JSON format for easy parsing and processing.
• Security considerations : The production environment should use the encrypted wss:// protocol and combine it with an authentication mechanism to prevent abuse.

For example, the idea of ??automatic reconnection of the client can be written like this:

 let socket;

function connect() {
    socket = new WebSocket('ws://localhost:8080');

    socket.onclose = () => {
        setTimeout(connect, 3000); // Try to reconnect 3 seconds after disconnection};
}

connect();

Basically that's it. The basic usage of WebSocket is actually not complicated, but it is easy to ignore details, such as exception handling, message format, connection status management, etc. As long as you master these points, you can build a powerful real-time communication application.

The above is the detailed content of HTML5 websocket client and server examples. For more information, please follow other related articles on the PHP Chinese website!