当前位置:首页 > JavaScript

js comet实现

2026-02-01 20:18:24JavaScript

Comet 实现方法

Comet 是一种基于 HTTP 长连接的服务器推送技术,允许服务器实时向客户端推送数据。以下是几种常见的 Comet 实现方式:

长轮询(Long Polling)

客户端发送请求后,服务器保持连接打开直到有新数据或超时。数据返回后客户端立即发起新请求。

function longPolling() {
    fetch('/comet-endpoint')
        .then(response => response.json())
        .then(data => {
            console.log('Received:', data);
            longPolling(); // 立即发起新请求
        })
        .catch(error => {
            console.error('Error:', error);
            setTimeout(longPolling, 5000); // 错误时延迟重试
        });
}

永久帧(Forever Frame)

隐藏 iframe 保持与服务器的持久连接,服务器通过 script 标签推送数据。

js comet实现

<iframe id="cometFrame" src="/comet-endpoint" style="display:none"></iframe>

服务器响应格式:

<script>parent.handlePush(data);</script>

Server-Sent Events (SSE)

HTML5 标准协议,使用 EventSource API 建立单向服务器推送通道。

js comet实现

const eventSource = new EventSource('/comet-endpoint');
eventSource.onmessage = (event) => {
    console.log('New message:', event.data);
};
eventSource.onerror = () => {
    console.error('SSE error');
};

WebSocket

全双工通信协议,适合需要双向实时通信的场景。

const socket = new WebSocket('wss://example.com/comet');
socket.onmessage = (event) => {
    console.log('Message:', event.data);
};
socket.onopen = () => {
    socket.send('Client ready');
};

服务器端实现示例(Node.js)

使用 Express 实现长轮询:

const express = require('express');
const app = express();
const clients = [];

app.get('/comet', (req, res) => {
    clients.push(res); // 存储响应对象
    req.on('close', () => {
        clients.splice(clients.indexOf(res), 1); // 清理断开连接
    });
});

function pushData(data) {
    clients.forEach(res => {
        res.json(data); // 向所有客户端推送
    });
    clients.length = 0; // 清空客户端列表
}

性能优化建议

  • 设置合理的超时时间(通常 25-30秒)
  • 实现连接断开后的自动重连机制
  • 对非活动连接进行心跳检测
  • 考虑使用消息队列管理推送事件
  • 在浏览器端实现退避策略避免频繁重试

适用场景比较

技术 协议 方向性 延迟 浏览器支持
长轮询 HTTP 单向 中等 广泛
SSE HTTP 单向 现代浏览器
WebSocket WS 双向 最低 现代浏览器
Forever Frame HTTP 单向 中等 广泛

选择实现方式时应考虑项目需求、浏览器兼容性和服务器基础设施。现代应用推荐优先考虑 SSE 或 WebSocket,传统系统可能需要使用长轮询作为降级方案。

标签: jscomet
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…