前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >服务端推送通信技术及其优劣势

服务端推送通信技术及其优劣势

作者头像
Leophen
发布2019-09-23 15:01:22
4940
发布2019-09-23 15:01:22
举报
文章被收录于专栏:Web前端开发

服务端推送技术包括:

1、Ajax 轮询

2、Ajax 长轮询

3、WebSocket

一、Ajax 轮询

利用 XHR,通过 setInterval 定时向后端发送请求

1、优点:实现简单

2、缺点:数据同步不及时,增加后端处理压力

3、场景:适用于对消息及时性要求不高且服务器资源充足的开发

代码语言:javascript
复制
setInterval(function() {
  $.ajax({
    url: 'https://www.baidu.com/',
    success: function() {
      //success code
    }
  });
}, 3000);

二、Ajax长轮询

在 Ajax 轮询的基础上做的改进,在后端数据没有更新的时不再返回空响应,而且后端一直保存连接,直到后端有数据变化,则相应请求并且关闭连接,前端收到数据后,再次向后端发起请求,并处理刚刚收到的数据

1、优点:通信及时,服务端资源消耗低

2、缺点:请求交替时消息会延迟

3、场景:扫码登录

代码语言:javascript
复制
function async () {
  $.ajax({
    url: 'http://www.baidu.com/',
    success: function() {
      async ();
      //code from here
    } 
  });
}

三、WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议,允许服务端主动向客户端发送数据,浏览器和服务器只需要完成一次握手,就可以创建持久性的连接,并进行双向数据传输

1、优点:通信及时,采用双工的通信模式

2、缺点:服务端资源消耗高

3、场景:对及时性要求高,如股票系统

代码语言:javascript
复制
function WebSocketTest() {
  if ("WebSocket" in window) {
    alert("您的浏览器支持 WebSocket!");

    // 打开一个 web socket
    var ws = new WebSocket("ws://localhost:9998/echo");

    ws.onopen = function() {
      // Web Socket 已连接上,使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
    };

    ws.onmessage = function(evt) {
      var received_msg = evt.data;
      alert("数据已接收...");
    };

    ws.onclose = function() {
      // 关闭 websocket
      alert("连接已关闭...");
    };
  } else {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!");
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 服务端推送技术包括:
  • 一、Ajax 轮询
  • 二、Ajax长轮询
  • 三、WebSocket
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档