了解SSE和WebSocket

见世面的小短腿2023-11-11 10:33

SSE介绍

什么是SSE

Server-Sent Events（SSE）是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比，SSE提供了更高效和实时的数据推送机制。 SSE基于HTTP协议，允许服务器将数据以事件流（Event Stream）的形式发送给客户端。客户端通过建立持久的HTTP连接，并监听事件流，可以实时接收服务器推送的数据。

SSE的主要特点

  1. 简单易用：SSE使用基于文本的数据格式，如纯文本、JSON等，使得数据的发送和解析都相对简单。
  2. 单向通信：SSE支持服务器向客户端的单向通信，服务器可以主动推送数据给客户端，而客户端只能接收数据。

SSE的简单实现

ini 复制代码 
node
// 引入相关模块
const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {

    // 设置跨域响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    res.status = 200;
    res.respond = false;

    let sentText = '这一段很长的文本，主要用来测试sse技术的实施，这一段很长的文本，主要用来测试sse技术的实施'

    let count = 0;
    const interval = setInterval(() => {
        const data = { message: sentText[count] };
        const eventData = `data: ${JSON.stringify(data)}\n\n`;
        res.write(eventData);
        if (count >= sentText.length) {
            count = 0;
            clearInterval(interval);
            res.end();
        }
        count++;
    }, 500);

    // 监听连接关闭事件，清除定时器
    res.on('close', () => {
        count = 0;
        clearInterval(interval);
    });
})
    // 启动服务器
server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

WebSocket

WebSocket的介绍

按照传统的定义，WebSocket是一种双工协议，主要用于客户端-服务器通信通道。它本质上是双向的，这意味着通信在客户端与服务器之间来回发生。使用 WebSocket 开发的连接只要任何参与方中断连接就会持续存在。一旦一方断开连接，另一方将无法进行通信，因为连接会在其前面自动断开。WebSocket需要HTTP的支持来发起连接。说到它的实用性，当涉及到数据的无缝流和各种不同步流量时，它是现代 Web 应用程序开发的支柱。

WebSocket的特点

  1. 提供全双工通信,还可以在TCP之上启用消息流；
  2. WebSocket协议规范将ws（WebSocket）和wss（WebSocket Secure）定义为两个新的统一资源标识符（URI）方案，分别对应明文和加密连接。
  3. WebSocket 的默认端口也选择了 80 和 443，因为现在互联网上的防火墙屏蔽了绝大多数的端口，只对 HTTP 的 80、443 端口"放行"，所以 WebSocket 就可以"伪装"成 HTTP 协议，比较容易地"穿透"防火墙，与服务器建立连接。
  4. WebSocket 更侧重于"实时通信"，而 HTTP/2 更侧重于提高传输效率。
  5. WebSocket有比较好的兼容性，除了IE浏览器以外基本都兼容。
javascript 复制代码 
//判断浏览器的兼容性
if (window.WebSocket){
console.log("This browser supports WebSocket!");
} else {
console.log("This browser does not support WebSocket.");
}

WebSocket的简单实现

node

javascript 复制代码 
// 引入相关模块
const http = require('http');
const wss = require('nodejs-websocket')

// 创建 HTTP 服务器
const server = wss.createServer(connection => {
    //处理客户端发送过来的消息	
    console.log("服务已经启动");
    connection.on("text", function (data) {

        connection.sendText("服务器端返回数据:" + data)

        setTimeout(()=>{
            connection.sendText("服务器端返回数据:" + '服务端给前端发送了一段文本')
        },10000)
        //监听关闭
        connection.on("close", function (code, reason) {
            console.log("Connection closed")
        })
        //监听异常
        connection.on("error", (err) => {
            console.log('服务异常关闭...')
        })
    })
});

// 启动服务器
server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

html

xml 复制代码 
<body>
    <input type="text" id="input" onchange="change()">
    <div class="reserve"></div>
    <button onclick="onCancel()">关闭</button>
    <button onclick="onCreateWss()">重启</button>

</body>
<script>
    const input = document.getElementById('input');
    const reserve = document.getElementsByClassName('reserve')[0];

    let ws = null;

    const change = function () {
        // 向服务器发送消息
        ws.send(input.value);
    }

    const onCancel = function () {
        ws.close();
    }


    const onStart = function () {
        ws.onopen = function (e) {
            console.log("连接服务器成功");
            ws.send('');
        }
        ws.onclose = function (e) {
            console.log("服务器关闭");
        }
        ws.onerror = function () {
            console.log("连接出错");
        }
        // 接收服务器的消息
        ws.onmessage = function (e) {
            let message = "message:" + e.data + "";
            reserve.innerHTML = e.data;
            // console.log(message);
        }
    }

    const onCreateWss = function () {
        try {
            ws = new WebSocket('ws://localhost:3000');
            onStart();
        } catch (err) {
            console.log(err)
        }

    }

    onCreateWss();


</script>

WebSocket心跳检测的介绍

  1. 心跳检测的原因 判断WebSocket的连接是否正常，一般采用定时发送简单的通讯包，如果在指定时间段内未收到对方响应，则判断对方已经当掉。用于检测TCP的异常断开。基本原因是服务器端不能有效的判断客户端是否在线也就是说，服务器无法区分客户端是长时间在空闲，还是已经掉线的情况。所谓的心跳包就是客户端定时发送简单的信息给服务器端告诉它我还在而已。

  2. 如何进行心跳检测 代码就是每隔几分钟发送一个固定信息给服务端，服务端收到后回复一个固定信息。如果服务端几分钟内没有收到客户端信息则视客户端断开。比如有些通信软件长时间不使用，要想知道它的状态是在线还是离线就需要心跳包，定时发包收包。

  3. 心跳检测的实现

ini 复制代码 
客户端发送心跳包
var timer = setInterval(function() {
  if (websocket.readyState == WebSocket.OPEN) {
    websocket.send("heartbeat");
  } else {
    clearInterval(timer);
  }
}, 1000 * 10);

服务器发送心跳包
var timer = setInterval(function() {
  websocket.send("heartbeat");
}, 1000 * 10);

websocket.onmessage = function(evt) {
  if (evt.data === "heartbeat") {
    return;
  }
  // 处理服务器传来的数据
};

WebSocket心跳的注意事项:

  1. 心跳包的发送周期 心跳包的发送周期需要根据实际网络情况来决定，过长的周期会增加连接的延迟，过短的周期会增加服务器的压力。
  2. 心跳包的内容 心跳包的内容需要和服务器约定好，并且在接收到数据包时进行忽略。
  3. 客户端断开连接时的处理 如果客户端断开了连接，需要及时清除定时器，避免浪费服务器资源。
  4. 服务器断开连接时的处理 如果服务器断开了连接，需要及时进行重连或其他处理，避免影响客户端的使用。
  5. 避免网络拥塞 过多的心跳包会导致网络拥塞，需要在发送心跳包时考虑平衡发送数量和频率。

心跳检测部分代码来源于 心跳检测部分代码 掘金心跳检测

title: 了解SSE和WebSocket categories:

  • 技术 tags:
  • 前端基础知识
  • node
  • html

SSE介绍

什么是SSE

Server-Sent Events（SSE）是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比，SSE提供了更高效和实时的数据推送机制。 SSE基于HTTP协议，允许服务器将数据以事件流（Event Stream）的形式发送给客户端。客户端通过建立持久的HTTP连接，并监听事件流，可以实时接收服务器推送的数据。

SSE的主要特点

  1. 简单易用：SSE使用基于文本的数据格式，如纯文本、JSON等，使得数据的发送和解析都相对简单。
  2. 单向通信：SSE支持服务器向客户端的单向通信，服务器可以主动推送数据给客户端，而客户端只能接收数据。

SSE的简单实现

ini 复制代码 
node
// 引入相关模块
const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {

    // 设置跨域响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    res.status = 200;
    res.respond = false;

    let sentText = '这一段很长的文本，主要用来测试sse技术的实施，这一段很长的文本，主要用来测试sse技术的实施'

    let count = 0;
    const interval = setInterval(() => {
        const data = { message: sentText[count] };
        const eventData = `data: ${JSON.stringify(data)}\n\n`;
        res.write(eventData);
        if (count >= sentText.length) {
            count = 0;
            clearInterval(interval);
            res.end();
        }
        count++;
    }, 500);

    // 监听连接关闭事件，清除定时器
    res.on('close', () => {
        count = 0;
        clearInterval(interval);
    });
 })
        // 启动服务器
     server.listen(3000, () => {
        console.log('Server is listening on port 3000');
     });

html

ini 复制代码 
    const button = document.getElementsByClassName('send')[0];
    const input = document.getElementsByTagName('textarea')[0];
    const closeButton = document.getElementsByClassName('close')[0];
    button.onclick = function () {
        onOpen();
    }

    closeButton.onclick = function () {
        eventSource.close();
        input.value += `已经关闭连接`;
    }
    const onOpen = () => {
        eventSource = new EventSource('http://localhost:3000');
        eventSource.onmessage = function (e) {
            if (!(JSON.parse(e.data).message)) {
                eventSource.close();
                return;
            }
            input.value += `${JSON.parse(e.data).message}`;
        };
        eventSource.onopen = () => {
            input.value += `SSE连接成功，准备接收数据...`;
        }
    };

WebSocket

WebSocket的介绍

按照传统的定义，WebSocket是一种双工协议，主要用于客户端-服务器通信通道。它本质上是双向的，这意味着通信在客户端与服务器之间来回发生。使用 WebSocket 开发的连接只要任何参与方中断连接就会持续存在。一旦一方断开连接，另一方将无法进行通信，因为连接会在其前面自动断开。WebSocket需要HTTP的支持来发起连接。说到它的实用性，当涉及到数据的无缝流和各种不同步流量时，它是现代 Web 应用程序开发的支柱。

WebSocket的特点

  1. 提供全双工通信,还可以在TCP之上启用消息流；
  2. WebSocket协议规范将ws（WebSocket）和wss（WebSocket Secure）定义为两个新的统一资源标识符（URI）方案，分别对应明文和加密连接。
  3. WebSocket 的默认端口也选择了 80 和 443，因为现在互联网上的防火墙屏蔽了绝大多数的端口，只对 HTTP 的 80、443 端口"放行"，所以 WebSocket 就可以"伪装"成 HTTP 协议，比较容易地"穿透"防火墙，与服务器建立连接。
  4. WebSocket 更侧重于"实时通信"，而 HTTP/2 更侧重于提高传输效率。
  5. WebSocket有比较好的兼容性，除了IE浏览器以外基本都兼容。
javascript 复制代码 
//判断浏览器的兼容性
if (window.WebSocket){
console.log("This browser supports WebSocket!");
} else {
console.log("This browser does not support WebSocket.");
}

WebSocket的简单实现

node

javascript 复制代码 
// 引入相关模块
const http = require('http');
const wss = require('nodejs-websocket')

// 创建 HTTP 服务器
const server = wss.createServer(connection => {
    //处理客户端发送过来的消息	
    console.log("服务已经启动");
    connection.on("text", function (data) {

        connection.sendText("服务器端返回数据:" + data)

        setTimeout(()=>{
            connection.sendText("服务器端返回数据:" + '服务端给前端发送了一段文本')
        },10000)
        //监听关闭
        connection.on("close", function (code, reason) {
            console.log("Connection closed")
        })
        //监听异常
        connection.on("error", (err) => {
            console.log('服务异常关闭...')
        })
    })
});

// 启动服务器
server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

html

xml 复制代码 
<body>
    <input type="text" id="input" onchange="change()">
    <div class="reserve"></div>
    <button onclick="onCancel()">关闭</button>
    <button onclick="onCreateWss()">重启</button>

</body>
<script>
    const input = document.getElementById('input');
    const reserve = document.getElementsByClassName('reserve')[0];

    let ws = null;

    const change = function () {
        // 向服务器发送消息
        ws.send(input.value);
    }

    const onCancel = function () {
        ws.close();
    }


    const onStart = function () {
        ws.onopen = function (e) {
            console.log("连接服务器成功");
            ws.send('');
        }
        ws.onclose = function (e) {
            console.log("服务器关闭");
        }
        ws.onerror = function () {
            console.log("连接出错");
        }
        // 接收服务器的消息
        ws.onmessage = function (e) {
            let message = "message:" + e.data + "";
            reserve.innerHTML = e.data;
            // console.log(message);
        }
    }

    const onCreateWss = function () {
        try {
            ws = new WebSocket('ws://localhost:3000');
            onStart();
        } catch (err) {
            console.log(err)
        }

    }

    onCreateWss();


</script>

WebSocket心跳检测的介绍

  1. 心跳检测的原因 判断WebSocket的连接是否正常，一般采用定时发送简单的通讯包，如果在指定时间段内未收到对方响应，则判断对方已经当掉。用于检测TCP的异常断开。基本原因是服务器端不能有效的判断客户端是否在线也就是说，服务器无法区分客户端是长时间在空闲，还是已经掉线的情况。所谓的心跳包就是客户端定时发送简单的信息给服务器端告诉它我还在而已。

  2. 如何进行心跳检测 代码就是每隔几分钟发送一个固定信息给服务端，服务端收到后回复一个固定信息。如果服务端几分钟内没有收到客户端信息则视客户端断开。比如有些通信软件长时间不使用，要想知道它的状态是在线还是离线就需要心跳包，定时发包收包。

  3. 心跳检测的实现 掘金心跳检测

相关推荐
花生侠22 分钟前
记录：前端项目使用pnpm+husky（v9）+commitlint，提交代码格式化校验
前端
一涯29 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调36 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined238 分钟前
element中的Table改造成虚拟列表，并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析：依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）