随着互联网的发展，越来越多的网站需要实时展示数据和交互更新。这时候就需要使用“实时 Web（Real-Time Web）”技术。

实时 Web 是指通过特定的通信协议，能够在客户端和服务器之间实现实时的双向数据传输和交互更新的技术。常见的实时 Web 技术有 WebSocket、Socket.IO 和 Comet。

WebSocket

WebSocket 是一种浏览器和服务器之间实现实时数据通信的协议。它提供了一种基于 HTTP 的长连接，可以在服务器和客户端双向实时传输数据。相较于传统的 HTTP 请求，WebSocket 能够更快速地传递数据，并且减少了服务器和客户端之间的通信成本。

在客户端，可以通过 WebSocket 提供的 API 进行数据传输和事件的监听：

// javascriptcn.com 代码示例
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => {
    console.log('Connected!');
    socket.send('Hello!');
};
socket.onmessage = event => {
    console.log(`Received: ${event.data}`);
};
socket.onclose = () => {
    console.log('Disconnected!');
};

在服务器端，可以使用 WebSocket 库（如 ws）来处理 WebSocket 连接和数据的传输：

// javascriptcn.com 代码示例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
    console.log('New client connected!');
    ws.on('message', message => {
        console.log(`Received message: ${message}`);
        ws.send(`ECHO: ${message}`);
    });
    ws.on('close', () => {
        console.log('Client disconnected!');
    });
});

Socket.IO

Socket.IO 是一个基于 WebSocket 的实时通信框架，不仅支持 WebSocket，也支持其他实时通信协议。它提供了双向、实时的通信功能和事件机制，能够简化实时 Web 开发的过程。

在客户端，可以通过 Socket.IO 提供的库（如 socket.io-client）来进行通信：

// javascriptcn.com 代码示例
const socket = io('http://example.com');
socket.on('connect', () => {
    console.log('Connected!');
    socket.emit('message', 'Hello!');
});
socket.on('message', message => {
    console.log(`Received: ${message}`)
});
socket.on('disconnect', () => {
    console.log('Disconnected!');
});

在服务器端，可以使用 Socket.IO 库（如 socket.io）来处理 Socket.IO 连接和数据的传输：

// javascriptcn.com 代码示例
const app = require('http').createServer();
const io = require('socket.io')(app);

io.on('connection', socket => {
    console.log('New client connected!');
    socket.on('message', message => {
        console.log(`Received message: ${message}`);
        socket.emit('message', `ECHO: ${message}`);
    });
    socket.on('disconnect', () => {
        console.log('Client disconnected!');
    });
});

app.listen(8080);

Comet

Comet 是一种浏览器和服务器之间实现实时数据通信的协议族。它通过一系列的技术手段（如长轮询、短轮询、HTTP 流、动态脚本注入等）实现了双向的数据传输和交互更新。相较于 WebSocket，Comet 更加灵活，但是相应的开发复杂度也更高。

在客户端，可以通过 Ajax 和 Comet 技术来进行数据传输和事件的监听：

// javascriptcn.com 代码示例
function cometConnect() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com/data', true);
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 3) {
            const message = xhr.responseText;
            console.log(`Received: ${message}`);
        }
        if (xhr.readyState === 4) {
            cometConnect();
        }
    };
    xhr.send(null);
}
cometConnect();

在服务器端，可以使用 Node.js 和 HTTP 流技术来实现 Comet 的数据传输和事件处理：

// javascriptcn.com 代码示例
const http = require('http');

http.createServer((req, res) => {
    console.log('New client connected!');
    res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
    setInterval(() => {
        res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
    req.on('close', () => {
        console.log('Client disconnected!');
        res.end();
    });
}).listen(8080);

总结

实时 Web 技术能够实现客户端和服务器之间的实时双向数据传输和交互更新，能够提高用户体验和 Web 应用的实时性。不同的实时 Web 技术有不同的优缺点，例如 WebSocket 能够提供快速传输和较低的通信成本，Socket.IO 能够提供简化的开发体验和事件机制，Comet 更加灵活和普遍适用。开发者可以根据需求和实际情况选择合适的实时 Web 技术。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653d099d7d4982a6eb6f13c9

什么是实时 Web（Real-Time Web）：WebSocket、Socket.IO 和 Comet

WebSocket

Socket.IO

Comet

总结

纠错反馈