当前位置:首页 > 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 是一种服务器推送技术,适合单向长连接场景(如实时通知)。

js实现长连接

客户端代码示例

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)

js实现长连接

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)

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

注意事项

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

标签: js
分享给朋友:

相关文章

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js树实现

js树实现

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

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…