Nodejs与jquery ajax如何实现comet

Nodejs与jquery ajax如何实现comet

node.js一直吐数据，即res.write(‘xxx’)，但不res.end() $.ajax能收到并实时显示到页面不，或者需要别的办法？

10 回复

当然可以！下面是关于如何使用 Node.js 和 jQuery AJAX 实现 Comet（服务器推送技术）的详细说明和示例代码。

标题：Node.js 与 jQuery AJAX 如何实现 Comet

内容：

Comet 是一种用于实现实时通信的技术，通过这种技术，服务器可以在任何时候向客户端发送数据。下面我们来看一下如何使用 Node.js 作为服务器端，jQuery AJAX 作为客户端来实现这一功能。

1. Node.js 服务端

首先，我们需要创建一个 Node.js 服务端应用，它将保持连接打开，并不断向客户端发送数据。

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
    if (req.url === '/comet') {
        // 设置响应头
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            Connection: 'keep-alive'
        });

        // 模拟持续的数据流
        const intervalId = setInterval(() => {
            res.write(`data: ${new Date().toLocaleTimeString()} - New data\n\n`);
        }, 3000);

        // 当请求结束时清除定时器
        req.on('close', () => {
            clearInterval(intervalId);
            res.end();
        });
    } else {
        // 处理其他请求
        fs.readFile('index.html', (err, data) => {
            if (err) throw err;
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(data);
        });
    }
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. 客户端 jQuery AJAX

接下来，我们需要编写一个简单的 HTML 页面，并使用 jQuery AJAX 来接收服务器推送的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comet Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="output"></div>

    <script>
        $(document).ready(function() {
            // 创建一个 EventSource 对象
            var source = new EventSource('/comet');

            // 监听消息事件
            source.onmessage = function(event) {
                $('#output').append('<p>' + event.data + '</p>');
            };

            // 监听错误事件
            source.onerror = function(err) {
                console.error('EventSource failed:', err);
            };
        });
    </script>
</body>
</html>

解释

  1. Node.js 服务端:

    • 我们创建了一个 HTTP 服务器，监听端口 3000。
    • 当请求路径为 /comet 时，我们设置响应头以支持 SSE (Server-Sent Events)。
    • 使用 setInterval 模拟每 3 秒向客户端发送一次新的数据。
    • 当客户端关闭连接时，清除定时器并结束响应。

  2. 客户端 jQuery AJAX:

    • 使用 <script> 标签引入 jQuery 库。
    • 创建一个 EventSource 对象，指向服务器的 /comet 路径。
    • 监听 onmessage 事件，当接收到新数据时更新页面上的内容。
    • 还有一个 onerror 事件处理程序，用于处理错误情况。

这样就完成了一个简单的 Comet 实现。通过这种方式，服务器可以持续向客户端发送数据，而不需要客户端频繁地发起请求。


socket.io更合适吧

socket.io当然好，但目前无法使用，ajax本身是有解决方案的，但jquery好像封装得太死

前端ajax请求/poll，每当取到数据或者超时后就再次请求。

后端维护一个消息队列，在处理/poll请求时，如果队列里有消息，则将消息队列的内容返回到前端，并清空队列。如果没有消息，则不做任何操作，即这个请求一直处于pending状态。如果消息队列中读取到内容，则返回到前端。

后端其他地方需要通知前台的，把数据扔进消息队列即可

阻塞的ajax，就是commet

write 怎么会收到，你没有end表示你服务端都没有处理完成，不会返回给浏览器的。

不end的话 .没办法…

建议先去看看HTTP协议

big-pipe

要在Node.js和jQuery AJAX之间实现Comet（服务器推送技术），可以使用res.write持续发送数据给客户端，并通过res.flush强制将数据发送到客户端。客户端可以通过轮询或长轮询来接收这些数据。

示例代码

Node.js 服务端代码

const http = require('http');

const server = http.createServer((req, res) => {
    // 设置响应头以支持HTTP流
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    // 每隔1秒向客户端发送一条消息
    setInterval(() => {
        res.write(`data: ${new Date().toISOString()}\n\n`);
        res.flush(); // 确保数据立即发送
    }, 1000);
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

jQuery 客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comet Example with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="messages"></div>

<script>
$(document).ready(function() {
    $.ajax({
        url: '/stream',
        type: 'GET',
        dataType: 'text',
        cache: false,
        success: function(data) {
            $('#messages').append('<p>' + data + '</p>');
        },
        error: function() {
            console.error("Error occurred");
        }
    });
});
</script>

</body>
</html>

解释

  1. Node.js服务端：

    • 创建一个HTTP服务器。
    • 设置响应头为Content-Type: text/event-stream，以启用SSE（Server-Sent Events）。
    • 使用setInterval每秒向客户端发送当前时间戳数据。
    • res.flush()确保数据立即发送给客户端。

  2. jQuery客户端：

    • 发送AJAX请求到服务器的/stream端点。
    • 每次接收到数据时，将数据显示在页面上。

这种方式可以实现服务器向客户端实时推送数据，而不需要客户端频繁地发起新的请求。

回到顶部