ajax jsonp polling

  setInterval定期发送ajax请求。服务器压力大,浪费流量,大部分是无效请求

ajax long polling

  ajax发起请求,服务器对于这个请求一直等待到了有有效数据(或time out)才进行响应,期间一直维持这个请求,客户端接收到响应后马上发起另一个新的ajax请求,周而复始。

forever iframe

  在客户端(浏览器)中动态载入一个隐藏的iframe标签,该标签的src属性指向请求的服务器url(实际上向服务器发送了一个http请求),然后客户端创建一个处理数据的函数,在服务器通过iframe与客户端的长连接定时输出数据给客户端,但是返回的数据是一个类似script标签的文本,客户端解析为js代码并执行其中的函数,从而达到通信的目的(和jsonp类似)

  服务器不停地从链接中想客户端推送类似这样的消息:

  <script type=\"text/javascript\">parent.process("data from server")</script>

缺点:IE浏览器在iframe请求期间,浏览器title一直处于加载状态,底部状态栏也显示正在加载,用户体验不好

flash socket

  在页面中内嵌入一个使用了Socket类的Flash程序,JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript通过Flash Socket接收到服务器端传送的数据

  实现真正的即时通信,而不是伪即时。但是客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。

websocket(推荐)

client

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/socket.io/1.7.2/socket.io.js"></script>
<body>
<script>
var socket = io.connect('http://127.0.0.1:8080'); socket.on('connect',function() {
console.log('Client has connected to the server!');
sendMessageToServer('hello,now is connected');
}); socket.on('message',function(data) {
console.log('Received a message from the server!',data);
}); socket.on('disconnect',function() {
console.log('The client has disconnected!');
}); function sendMessageToServer(message) {
socket.send(message);
}
</script>
</body>
</html>

nodeSrv

var http= require('http'),
io= require('socket.io'); var server= http.createServer(function(req, res){
res.end('<h1>will see this in http://localhost:8080</h1>');
});
server.listen(8080); var socket= io.listen(server); socket.on('connection', function(client){
var interval= setInterval(function() {
client.send('This is a message from the server! ' + new Date().getTime());
},5000);
client.on('message',function(event){
console.log('Received message from client!',event);
});
client.on('disconnect',function(){
clearInterval(interval);
console.log('Server has disconnected');
});
});

  socket.io 是一个为实时应用提供跨平台实时通信的库,名字源于它使用了浏览器支持并采用的 HTML5 WebSocket 标准,因为并不是所有的浏览器都支持 WebSocket ,所以该库支持一系列降级功能:

  1. Websocket
  2. Adobe® Flash® Socket
  3. AJAX long polling
  4. AJAX multipart streaming
  5. Forever Iframe
  6. JSONP Polling

跨平台、兼容性好、具有降级功能、所有传输机制接口对外统一、自带心跳。但是要使用socket.io必须前后端都要用一套框架。

web即时通信技术的更多相关文章

  1. web端通信技术

    1.web端通信技术:长连接.长轮询.websocket; 什么是长连接.长轮询? 就是客户端不停的向服务器发送请求以获取最新的数据信息.这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它 ...

  2. 基于Nodejs开发的web即时聊天工具

    由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对 服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...

  3. 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  4. WEB即时通信

    问题 传统的浏览器通信方式:基于HTTP协议的请求/响应模式. 早期:通过刷新浏览器来更新服务器端的数据 后来Ajax(XMLHttpRequest是核心):可以不用刷新浏览器更新服务器端数据.但是这 ...

  5. WebSocket实现web即时通信(后端nodejs实现)

    WebSocket实现web即时通信 一.首先看一下,HTTP.ajax轮询.long poll和WebSocket的区别: 1.HTTP 协议(短连接):一个 Request 一个 Response ...

  6. IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(三)

    IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(三) 后台服务用户与认证 新建一个空的.net core web项目Demo.Chat,端口配置为 ...

  7. IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(二)

    IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(二) IdentityServer4 用户中心生成数据库 上文已经创建了所有的数据库上下文迁移代码 ...

  8. IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(一)

    IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯 前言 .net core 2.1已经正式发布了,signalr core1.0随之发布,是时候写个 ...

  9. 一套简单的web即时通讯——第一版

    前言 我们之前已经实现了 WebSocket+Java 私聊.群聊实例,后面我们模仿layer弹窗,封装了一个自己的web弹窗 自定义web弹窗/层:简易风格的msg与可拖放的dialog,生成博客园 ...

随机推荐

  1. SVG-viewBox属性详解

    viewBox( x, y, width, height)    用处:在svg画布中选择出一块区域放大到宽度或高度充满画布为止 (参数x/y可以理解为坐标为(x , y)的点(这里的坐标系和数学中的 ...

  2. P1228-重叠的图像

    一道很水的topsort,唉?怎么交了14遍...(某人用我的代码刚好卡过,我怎么过不去...[鄙视][鄙视][鄙视]) #include <bits/stdc++.h> using na ...

  3. Luogu P1373 小a和uim之大逃离【dp】By cellur925

    题目传送门 $50pts$:容易设计出状态$f[i][j][l][r][st]$表示当前的这个人在($i$,$j$),小a和uim魔瓶中的含量分别为$l$,$r$,当$st=0$表明现在是小a在吃,当 ...

  4. 弹射起步~django

    sudo apt-get installl tree 开始创建工作目录 django-admin.py startproject mysite 创建一个名为 mysite的子目录,然后我们通过tree ...

  5. RobotFramework自动化测试框架(1)- RobotFramework简介

    对于RobotFramework自动化测试框架,我这里会从三个单元进行阐述,希望能对你有帮助. RobotFramework简介 RobotFramework是什么? Robotframework 是 ...

  6. Python标准库 urllib

    urllib是python的一个获取url的模块.它用urlopen函数的形式提供了一个非常简洁的接口.这使得用各种各样的协议获取url成为可能.它同时 也提供了一个稍微复杂的接口来处理常见的状况-如 ...

  7. Nagios安装与部署

    Nagios概述: Nagios是一款开源免费(也有收费版的Nagios XI)的监控工具,可以用以监控Windows.Linux.Unix.Router.Switch,可以监控指定主机的物理基础资源 ...

  8. Ionic之页面传值

    很多时候,我们都进入一个页面往往都是需要将上一级的数据转入到下一级页面中使用,在传传统的html中时经过url来传值,所以ionic也是沿用了html中的方法. 但是还是有点区别于html.我们直接在 ...

  9. 外文翻译 《How we decide》多巴胺的预言 第二节

    本节阅读感言:一朝被蛇咬,十年怕井绳.我们的大脑时刻跟新着本体的预测机制. 上一节提到的喇叭,苹果汁实验可以不断的延伸扩展,在播放喇叭前用强光照射...强光照射前放置特定的图片...都可以扩展多巴胺相 ...

  10. 【转】Java集合:HashMap源码剖析

    Java集合:HashMap源码剖析   一.HashMap概述二.HashMap的数据结构三.HashMap源码分析     1.关键属性     2.构造方法     3.存储数据     4.调 ...