当前位置:首页 > JavaScript

js实现长连接

2026-02-02 16:19:51JavaScript

使用 WebSocket 实现长连接

WebSocket 是 HTML5 提供的一种全双工通信协议,适合实现长连接。

客户端代码示例

const socket = new WebSocket('ws://your-server-url');

socket.onopen = () => {
    console.log('连接已建立');
    socket.send('Hello Server!');
};

socket.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

socket.onclose = () => {
    console.log('连接已关闭');
};

socket.onerror = (error) => {
    console.error('连接错误:', error);
};

服务端代码示例(Node.js + ws 库)

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

wss.on('connection', (ws) => {
    console.log('客户端已连接');
    ws.on('message', (message) => {
        console.log('收到消息:', message.toString());
        ws.send('Server Response');
    });

    ws.on('close', () => {
        console.log('客户端已断开');
    });
});

使用 Server-Sent Events (SSE)

SSE 是一种服务器推送技术,适合单向长连接场景(如实时通知)。

客户端代码示例

const eventSource = new EventSource('http://your-server-url/sse');

eventSource.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

eventSource.onerror = (error) => {
    console.error('SSE 错误:', error);
};

服务端代码示例(Node.js + Express)

const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    const interval = setInterval(() => {
        res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);

    req.on('close', () => {
        clearInterval(interval);
    });
});

app.listen(3000, () => console.log('Server running on port 3000'));

使用轮询(Polling)模拟长连接

轮询是一种简单但低效的长连接替代方案,通过定时请求实现。

客户端代码示例

function pollServer() {
    fetch('http://your-server-url/poll')
        .then(response => response.json())
        .then(data => {
            console.log('收到数据:', data);
            setTimeout(pollServer, 1000); // 1秒后再次请求
        });
}
pollServer();

服务端代码示例(Node.js + Express)

js实现长连接

app.get('/poll', (req, res) => {
    res.json({ data: 'Polling response', timestamp: Date.now() });
});

注意事项

  • WebSocket 适合双向实时通信(如聊天室),但需要服务端支持。
  • SSE 适合服务器单向推送(如新闻更新),兼容性较好。
  • 轮询 简单但浪费资源,仅适用于低频场景。
  • 长连接需处理断线重连和心跳机制(如 WebSocket 定时发送 ping/pong)。

标签: js
分享给朋友:

相关文章

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…