客户端与服务端实时通讯(轮询、websocket、SSE)

这篇具有很好参考价值的文章主要介绍了客户端与服务端实时通讯(轮询、websocket、SSE)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

客户端与服务端实时通讯

背景

在某些项目中,某些数据需要展示最新的,实时的,这时候就需要和服务端进行长时间通讯

方案

对于数据实时获取,我们一般会有4种方案:

1.短轮询:使用浏览器的定时器发起http请求,每隔一段时间就请求一次
2.长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
3.websocket:客户端与服务端建立websocket连接,搭建双工(双向)通道
4.SSE(Server-Sent Events):基于HTTP的html5新特性,服务器推送,属于半双工通信模型

轮询

轮询是指客户端定时向服务器发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。

轮询分为短轮询和长轮询

短轮询

实现原理: 短轮询指客户端每间隔一段时间向服务端发起请求,保持数据的同步。

优点: 可实现基础(指间隔时间较短)的数据更新。

缺点: 这种方法也只是尽量的模拟即时传输,但并非真正意义上的即时通讯,坏处是间隔设置的太长用户体验不好,设置间隔太短后端服务会进行大量的无效查询并且数据没有及时返回前端展示给用户。

长轮询

实现原理: 客户端发送请求后,如果没有数据返回,服务端会将请求放入队列一直连接处理其他请求,直到有数据才返回给客户端,然后客户端再次发起请求,以此轮询。在 HTTP1.0 中客户端可以设置请求头 Connection:keep-alive,服务端收到该请求头之后知道这是一个长连接,在响应报文头中也添加 Connection:keep-alive。客户端收到之后表示长连接建立完成,可以继续发送其他的请求。在 HTTP1.1 中默认使用了 Connection:keep-alive 长连接。
优点: 减少了大量无效的查询,保证每次请求都有数据返回,不会一直占用线程。
缺点: 如果新数据频繁,会进行大量的连接建立和关闭,对服务器的处理能力要求较高。服务器一直保持连接会消耗资源,需要同时维护多个线程,服务器所能承载的 TCP 连接数是有上限的,这种轮询很容易把连接数顶满。每次通讯都需要客户端发起,服务端不能主动推送。

websocket

实现原理: Websocket 实现了客户端与服务端的双向(双工)通信,只需要连接一次,就可以相互传输数据,很适合实时通讯、数据实时更新等场景。
优点:
1.双向通讯:客户端服务端双方都可以主动发起通讯
2.没有同源限制:相对于tcp请求websocket客户端可以与任意服务端通讯,不存在跨域的情况
3.数据量轻:只需要第一次连接时携带请求头,后面的数据通讯都不需要携带请求头
4.传输效率高,因为只需要一次连接
缺点:
1.长连接需要后端处理业务的代码更稳定,推送消息相对复杂
2.长连接对网络要求比较大,需要处理好重连接
3.兼容性差,Websocket只支持IE10及以上

使用

1.客户端代码

  <script>
    let socket = new WebSocket('ws://localhost:8888')
    socket.onopen = function () {
      console.log('1. 客户端连接上了服务器',new Date().getTime());
      socket.send('3. 你好')
    }
    socket.onmessage = function (e) {
      console.log('6',e.data);
    }
</script>

2.服务端代码

let express = require('express')
let app = express()
app.use(express.static(__dirname))
 
 
app.listen(3000)
 
let WebSocket = require('ws')
let wss = new WebSocket.Server({port:8888})
wss.on('connection',function(ws){
  console.log('2.服务器监听到了客户端的连接',new Date().getTime());
  ws.on('message',function(data){
    console.log('4.客户端发来的消息',data);
    ws.send('5.服务端说:你也好')
  })
})

SSE(EventSource)

实现原理: 客户端首先向服务器发送一个 HTTP 请求,然后服务器设置响应头并保持这个连接打开,并周期性地通过这个连接向客户端发送数据。每个数据块都是一个独立的消息。

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

优点:
1.简单易用:只需要在客户端创建一个EventSource对象,指定服务器端的URL,即可进行监听并展示事件。
2.网络带宽节省:EventSource采用长连接的方式进行数据传输,相比于普通的轮询方式,能够节省大量的网络带宽。
3.跨域支持:允许在跨域环境下进行通信,通过适当的响应头授权来自不同域的客户端连接。
缺点:
1.单项通信:只支持服务器向客户端的单向通信,无法实现客户端向服务器的实时交互。
2.不能重连:如果网络连接不稳定,或者服务器端关闭EventStream连接,客户端需要重新连接才能继续监听事件。
3.不支持二进制数据传输:只能传输文本数据,不能传输二进制数据,这在某些场景下可能存在一定的局限性。

使用

1.客户端

var eventSource = new EventSource("/clock");
eventSource.onmessage = function(event) {
  console.log("Received event: " + event.data);
};

2.服务端

let express = require('express')
let app = express()
app.use(express.static(__dirname))
 
let counter = 0
app.get('/clock',function(req,res){
  res.header('Content-Type','text/event-stream')
  let $timer = setInterval(() => {
    // 第一种写法
    res.write(`id:${counter++}\nevent:message\ndata:${new Date().toLocaleString()}\n\n`)
    
    // 另一种写法
    res.write(`event:yya\n`)     // 触发 自定义事件
    res.write(`data:${counter}\n\n`)
  }, 1000 );
 
 
  res.on('close',function(){
    counter = 0
    clearInterval($timer)
  })
})
app.listen(3000)

chatGPT就是使用的这种方式
客户端与服务端实时通讯(轮询、websocket、SSE),方案,websocket,网络协议,网络
响应头
客户端与服务端实时通讯(轮询、websocket、SSE),方案,websocket,网络协议,网络
响应的数据
客户端与服务端实时通讯(轮询、websocket、SSE),方案,websocket,网络协议,网络文章来源地址https://www.toymoban.com/news/detail-714645.html

到了这里,关于客户端与服务端实时通讯(轮询、websocket、SSE)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 「Java」Socket实现简单的客户端和服务端通讯 | 公网环境通讯

    💛前情提要💛 本章节是 番外篇 的 Socket 的相关知识~ 接下来我们即将进入一个全新的空间,对代码有一个全新的视角~ 以下的内容一定会让你对 Socket 有一个颠覆性的认识哦!!! 以下内容干货满满,跟上步伐吧~ 作者介绍: 🎓 作者: 热爱编程不起眼的小人物🐐 🔎 作者

    2023年04月16日
    浏览(45)
  • SpringBoot+WebSocket实现服务端、客户端

    小编最近一直在使用springboot框架开发项目,毕竟现在很多公司都在采用此框架,之后小编也会陆续写关于springboot开发常用功能的文章。 什么场景下会要使用到websocket的呢? websocket主要功能就是实现网络通讯,比如说最经典的客服聊天窗口、您有新的消息通知,或者是项目与

    2024年02月13日
    浏览(47)
  • python用websockets创建服务端websocket创建客户端

    服务端 客户端

    2024年02月22日
    浏览(54)
  • C++实现WebSocket通信(服务端和客户端)

    天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。 这里单纯是个人总结,如需更官方更准确的websocket介绍可百度 websocket是一种即时通讯协

    2024年02月09日
    浏览(46)
  • SpringBoot集成WebSocket实现客户端与服务端通信

    话不多说,直接上代码看效果! 一、服务端: 1、引用依赖 2、添加配置文件 WebSocketConfig 3、编写WebSocket服务端接收、发送功能   声明接口代码:   实现类代码: 4、如果不需要实现客户端功能,此处可选择前端调用,奉上代码 二、客户端: 1、引用依赖 2、自定义WebSocket客

    2024年01月23日
    浏览(52)
  • java webSocket服务端、客户端、心跳检测优雅解决

    项目分为三个端,项目之间需要webSocket通信。 WebSocketConfig WebSocketServer

    2024年02月17日
    浏览(38)
  • Java实现WebSocket客户端和服务端(简单版)

    天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。 写在前面: WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket通信协议于

    2024年02月08日
    浏览(46)
  • JAVA调用Bartender进行标签打印(可本地用打印机客户端进行测试打印,【云上的项目】可通过WebSocket进行通讯进行打印)

    用Java编写一个打印标签客户端  点击运行启动会打开首页  可以点击预览打印  点击打印可测试成功     打印机结果  前端用的是thymeleaf 代码片段 后端代码  页面上预览图片和真实打印机打出来的不一致是正常的因为这是测试打印(测试本地电脑是否符合使用打印机客户

    2024年02月15日
    浏览(52)
  • TCP通信之QTcpServer和QTcpSocket,服务器和客户端通讯

    TCP传输控制协议 是一个可靠的(相对于UDP),面向流,面向连接的运输协议。 Socket 俗称“套接字”。就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制。从所处的地

    2024年02月12日
    浏览(64)
  • c++: websocket 客户端与服务端之间的连接交互

    目录 socket 头文件 延迟时间 通信协议地址 TCP/IP 服务端 客户端 编程步骤 服务端 客户端 编程步骤 1. 初始化 WSAStartup 2. 创建 socket 2.1 协议族 2.2 socket 类型 2.3 协议 3. 绑定 bind (服务端) 4. 监听 listen(服务端) 5. 请求连接 connect(客户端) 6. 接收请求 accept(服务端) 7. 发送

    2024年02月14日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包