1、Web端即时通讯技术

　　即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。

　　但是在Web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，一般的Web通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。

2、实现Web端即时通讯的方法

　　实现即时通讯主要有四种方式，它们分别是短轮询、长轮询(comet)、长连接(SSE)、WebSocket。

　　它们大体可以分为两类，一种是在HTTP基础上实现的，包括短轮询、comet和SSE；另一种不是在HTTP基础上实现是，即WebSocket。下面分别介绍一下这四种轮询方式，以及它们各自的优缺点。

(1)短轮询

　　短轮询的基本思路就是浏览器每隔一段时间向浏览器发送http请求，服务器端在收到请求后，不论是否有数据更新，都直接进行响应。这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断的进行请求，使得客户端能够模拟实时地收到服务器端的数据的变化。

　　这种方式的优点是比较简单，易于理解，实现起来也没有什么技术难点。缺点是显而易见的，这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。尤其是在客户端，距离来说，如果有数量级想对比较大的人同时位于基于短轮询的应用中，那么每一个用户的客户端都会疯狂的向服务器端发送http请求，而且不会间断。人数越多，服务器端压力越大，这是很不合理的。

　　因此短轮询不适用于那些同时在线用户数量比较大，并且很注重性能的Web应用。

(2)comet

　　comet指的是，当服务器收到客户端发来的请求后，不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制(服务器端设置)后关闭连接。

　　长轮询和短轮询比起来，明显减少了很多不必要的http请求次数，相比之下节约了资源。长轮询的缺点在于，连接挂起也会导致资源的浪费。

(3)SSE

　　SSE是HTML5新增的功能，全称为Server-SentEvents。它可以允许服务推送数据到客户端。SSE在本质上就与之前的长轮询、短轮询不同，虽然都是基于http协议的，但是轮询需要客户端先发送请求。

　　而SSE最大的特点就是不需要客户端发送请求，可以实现只要服务器端数据有更新，就可以马上发送到客户端。

　　SSE的优势很明显，它不需要建立或保持大量的客户端发往服务器端的请求，节约了很多资源，提升应用性能。并且后面会介绍道，SSE的实现非常简单，并且不需要依赖其他插件。

(4)WebSocket

　　WebSocket是HTML5定义的一个新协议，与传统的http协议不同，该协议可以实现服务器与客户端之间全双工通信。

　　简单来说，首先需要在客户端和服务器端建立起一个连接，这部分需要http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。

　　WebSocket的优点是实现了双向通信，缺点是服务器端的逻辑非常复杂。现在针对不同的后台语言有不同的插件可以使用。

3、四种Web即时通信技术比较

　　从兼容性角度考虑，短轮询>长轮询>长连接SSE>WebSocket

　　从性能方面考虑，WebSocket>长连接SSE>长轮询>短轮询

4、SSE

　　原理：SSE不需要依赖客户端向服务器发送请求，而是可以直接在服务器端有数据更新时进行发送到客户端，相比于轮询的“拉数据”，这种“推数据” 有着低延迟、高性能的优势。这种方法的服务器端非常简介，只要维护一个服务器和客户端之间的协议即可。前端使用EventSource对象。

　　服务器端需要提供的协议基本代码如下：

data:firstevent

data:secondevent

id:

event:myevent

data:thirdevent

id:

:thisisacomment

data:fourthevent

data:fourtheventcontinue

　　下面解释一下基本用法：

　　要定义各个事件，每一个事件之间使用一个换行符隔开。每个事件内部可以有多行，每一行都是type:value的形式。

　　type有以下几种选择：

(1)类型为空白，表示该行是注释，会在处理时被忽略。

(2)类型为data，表示该行包含的是数据。以data开头的行可以出现多次。所有这些行都是该事件的数据。

(3)类型为event，表示该行用来声明事件的类型。浏览器在收到数据时，会产生对应类型的事件。

(4)类型为id，表示该行用来声明事件的标识符。

(5)类型为retry，表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。

　　比如上面的第一个事件，只传输了一个数据，数据内容为firstevent。服务器端通过这个清单发送到客户端，就可以通过前端进行响应的处理，诸如读取新数据、更新界面等。

　　客户端需要在JavaScript中使用EventSource对象。

　　首先需要初始化一个EventSource对象，实例化的时候需要传入与其交互的服务器端的文件地址，如：

var es = new EventSource(“sse.php”);

　　接下来，可以对进行事件的监听。EventSource给出了三种标准事件，它们的名称和触发时机如下：

　　open 当成功与服务器建立连接时执行

　　message 当收到服务器发送的事件时执行

　　error 当出现错误时执行

　　和普通的事件一样，可以通过以下两种方法使用这些事件：

es.onmessage=function(e){};

es.addEventListener(“message”,function(e){});

　　实现：

　　服务器端代码(php)：

<?php

header('Content-Type: text/event-stream'); //这是专门为sse设置的数据格式

$time = date('Y-m-d H:i:s');

//下面这些echo出来的东西就是上面说的服务器端和客户端之间的协议

echo 'retry: 3000'.PHP_EOL; //retry类型的数据，规定了浏览器在连接断开之后进行再次连接之前的等待时间

echo 'data: The server time is: '.$time.PHP_EOL.PHP_EOL;

?>

//注意必须要先设定content-type为text/event-stream，这是为SSE专门定义的数据传输格式。

//接下来通过php的echo输出协议，上面的代码输出的结果如下：

//retry:3000

//data:Theservertimeis...

//输出了一个事件，这个事件中分别定义了retry类型和data类型的行。

　　客户端代码：

<html> 
<head> 
<meta charset="UTF-8"> 
<title>basic SSE test</title> 
</head> 
<body> 
<div id=”content”></div> 
</body> 
<script> 
　　var es = new EventSource("sse.php"); 
　　es.addEventListener("message",function(e){ 
　　　　document.getElementById("content").innerHTML += "\n"+e.data; 
　　}); 
</script> 
</html>
　　上面的代码：
　　首先实例化了一个EventSource对象，并传入与之通信的服务器端文件sse.php。
　　利用addEventListener()方法，为对象绑定一个message事件(上面提到message在收到服务器发送的事件时执行)。当客户端收到服务器传来的协议时，为页面中添加数据，通过e.data获取，对应了服务器端文件中协议表的data类型定义的数据，即Theservertimeis...。

5、WebSocket

　　原理：WebSocket的实现了一次连接，双方通信的功能。首先由客户端发出WebSocket请求，服务器端进行响应，实现类似TCP握手的动作。这个连接一旦建立起来，就保持在客户端和服务器之间，两者之间可以直接的进行数据的互相传送。服务器端的逻辑比较复杂，如果是java或者node开发，都有很多封装好的组件可以使用。

　　前端API：

(1)创建WebSocket对象

var ws = new WebSocket(“ws//localhost:8080”);

　　WebSocket是一个不同于HTTP的协议，其参数传递中的ws://前缀类似于http://，用于进行协议的声明。

(2)事件操作

　　WebSocket提供了四个事件操作，如下：

onmessage收到服务器响应时执行

onerroe 出现异常时执行

onopen 建立起连接时执行

onclose 断开连接时执行

web 实时通信的方法总结的更多相关文章

  1. Web实时通信之Socket.IO

    前面两篇文章使用了Ajax long polling和WebSocket两种常用的Web实时通信方式构建了简单的聊天程序. 但是,由于浏览器的兼容问题,不是所有的环境都可以使用WebSocket这种比 ...

  2. 【转】Web实时通信之Socket.IO ，真正的兼容ie

    前面两篇文章使用了Ajax long polling和WebSocket两种常用的Web实时通信方式构建了简单的聊天程序. 但是,由于浏览器的兼容问题,不是所有的环境都可以使用WebSocket这种比 ...

  3. 【Node/JavaScript】论一个低配版Web实时通信库是如何实现的（ WebSocket篇)

    引论 simple-socket是我写的一个"低配版"的Web实时通信工具(相对于Socket.io),在参考了相关源码和资料的基础上,实现了前后端实时互通的基本功能 选用了Web ...

  4. 【JavaScript】论一个低配版Web实时通信库是如何实现的之二（ EventSource篇)

    前情提要 「 话说上回说到!那WebSocket大侠,巧借http之内力,破了敌阵的双工鸳鸯锁,终于突出重围. 然而玄难未了,此时web森林中飞出一只银头红缨枪,划破夜色. "莫非!?&qu ...

  5. atitit. js 跨界面 页面 web cs 传值方法总结

    atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法:   直接传跟跟间接传递... 1.直接传跟new form(param)    web使用url方 ...

  6. OSX 10.8+下开启Web 共享 的方法

    MENU Home Archives About SUBSCRIBE ☰MENU OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, ...

  7. OSX 10.8+下开启Web 共享 的方法

    MENU Home Archives About SUBSCRIBE ☰MENU OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, ...

  8. Java Web工程搭建方法

    搭建一个简单的Web工程主要是以下几步: 一.下载所需工具 ①java   ②eclipse  ③tomcat 注意:java与eclipse版本不匹配(32位或者64位),会导致eclipse启动时 ...

  9. 咏南中间件当作WEB SERVER使用方法

    咏南中间件当作WEB SERVER使用方法 1)开启咏南中间件 2)浏览器打开http://localhost:5566/web?page=echo.html

随机推荐

  1. Error after SQL Server 2012 installation: Login Failure for "SQL Server Integration Services 11.0" SSIS service

    When you install SQL Server 2012 and you try to connect to SSIS services, you cannot due to that the ...

  2. 同步VDP时间

    使用yast 进入蓝屏界面,修改system—date and time,取消hardware clock set to utc,时区设置为上海或者北京,然后sntp -r 时间服务器地址 敲击syn ...

  3. 每日踩坑 2018-06-19 AutoMapper简单性能测试

    想使用 AutoMapper 类库来做一些映射到 DTO 对象的操作 但既然类似这样的类库内部是用反射来实现的,那么会比较在意性能. 所以来简单测试一下性能. 关于测试结果呢 emmmm 我是比较吃惊 ...

  4. Express中间件

    一.编写中间件 中间件函数能够访问请求对象(req),响应对象(res),应用程序的请求/响应循环中的下一个中间件函数.下一个中间件函数通常由名为next的变量来表示. 中间件函数可以执行以下任务: ...

  5. Google Code Jam 2009 Qualification Round Problem B. Watersheds

    https://code.google.com/codejam/contest/90101/dashboard#s=p1 Problem Geologists sometimes divide an ...

  6. Bootstrap_CSS概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  7. [JAVA] JAVA 类路径

    Java 类路径 类路径是所有包含类文件的路径的集合. 类路径中的目录和归档文件是搜寻类的起始点. 虚拟机搜寻类 搜寻jre/lib和jre/lib/ext目录中归档文件中所存放的系统类文件 搜寻再从 ...

  8. kNN(K-Nearest Neighbor)最邻近规则分类

    KNN最邻近规则,主要应用领域是对未知事物的识别,即推断未知事物属于哪一类,推断思想是,基于欧几里得定理,推断未知事物的特征和哪一类已知事物的的特征最接近: K近期邻(k-Nearest Neighb ...

  9. BTSync 2.0 Vs. 1.4 Folders

    Sync 2.0 supports boths new 2.0 folders and classic 1.4 folders, s o when you upgrade your Sync it w ...

  10. Android 上SuperUser获取ROOT权限原理解析

    Android 上SuperUser获取ROOT权限原理解析 一. 概述 本文介绍了android中获取root权限的方法以及原理,让大家对android 玩家中常说的“越狱”有一个更深层次的认识. ...