当前位置:首页 > 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)

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

注意事项

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

js实现长连接

标签: js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的H…

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document…