网络与多媒体课程设计终稿

2016年春课程设计：
网络与多媒体课程设计
----高并发响应式内容浏览型web系统设计
目录
1.1 设计背景 (1)
1.2 系统目标 (3)
1.3 相关概念 (4)
1.4 技术选型 (9)
1.5 基本架构 (10)
1.6 技术详细解析 (13)
1.7 总结与展望 (21)
1.8 致谢 (21)
1.9 参考文献 (21)
1.1 设计背景
进入21世纪以来，以多媒体技术和网络技术为核心的信息技术飞速发展，推动着各行各业发生深刻变革。

随着多媒体技术和网络技术的广泛应用，信息技
术的数字化、多媒体化、智能化和信息网络的全球化成为信息社会的主要特征，人们的生产、生活方式也发生了巨大变化。

网络多媒体技术在互联网络、教育培训、信息管理、视频会议、影视娱乐、视频点播、休闲旅游、过程模拟等各个领域发挥着重要的作用。

网络多媒体是通信技术与计算机技术相结合的产物，如图1所示：利用计算机、网络和多媒体技术，在网络中传输、交换图形、图像、声音和视频。

由图片可知，网络多媒体的特点就是，数字化：直接从源到达目的地；平等性：发布者和消费者之间的界限比较模糊，没有统一的界定；当然最重要也是最主要的特性就是个性化：发布者或者消费者可以定制或者点播自己需要的多媒体，比如我们现在生活中比较熟悉的有爱奇艺视频，土豆视频，Youtube 等。

随着时代的发展，人们对信息获取的方式，获取信息的类别，信息的质量慢慢趋向于便捷，丰富，高质量。

同时由于web所具有的通用性，在现代人的信息获取方式中占有的比重也越来越大，所以高并发响应式内容浏览型web系统的设计无疑是大多数消费者钟爱和急需的。

图1来源：/view/2ffe05d6195f312b3169a5e6.html?from=search
图2来源：/?p=40030500&kw=
1.2 系统目标
多媒体技术是当今信息技术领域发展最快、最活跃的技术，是新一代电子技术发展和竞争的焦点。

多媒体技术融计算机、声音、文本、图像、动画、视频和通信等多种功能于一体，借助日益普及的高速信息网，可实现计算机的全球联网和信息资源共享，因此被广泛应用在咨询服务、图书、教育、通信、军事、金融、医疗等诸多行业，并正潜移默化地改变着我们生活的面貌。

随者计算机多媒体技术的突飞猛进，多媒体凭借着自身的优势越来越受到广泛关注和应用，它的出现已经改变了传统意义上的人们的工作与生活方式，给人们带来了极大的便利,对人类社会的发展产生了巨大的影响。

本文设计的多媒体网页是指Web页面中包含多种多媒体元素，各元素排列、摆放有序，网站界面颜色搭配合理；网站主页中，各媒体元素根据需要应具有超级链接功能，可以是页内链接也可以是页面间链接；网页具有动态交互能力，能够和后台数据库动态交互数据；充分利用多媒体技术使网页或单个媒体下载时间尽量短。

一般而言，对于内容浏览型的系统本身逻辑并不复杂，制约用户体验速度的就主要是访问的并发了，所以在高并发下提高用户的访问速度就是一个单独的技术门类。

所谓高并发是指系统能承受的同时连接的数量相对较高，而对于内容浏览型的系统我们定义10k左右的并发就是比较高的数量，对于普通的内容浏览型的系统10k并发大概用户数就能达到上百万。

目前随着移动技术的发展，更多的用户选择使用移动设备来进行信息的获取，但是普通的web页面是专门为pc进行设计布局的对于移动设备的用户体验非常糟糕。

为了提高这部分用户的体验我们可以为移动设备的页面进行优化，通过用户访问web站点的header判断用户的设备类型来给出不同的响应。

我们并不是为移动设备专门设计一套系统而是同一套系统的不同反应，属于同一套系统，如图3所示。

图3访问信息返回流程图
1.3 相关概念
“多媒体”指的是文本、图形、视频、声音、音乐或数据等多种形态信息的处理和集成呈现。

多媒体狭义上讲是将两种以上单一的媒体形式组合在一起，广义地说是一种技术，这种技术不仅可以获取和存储多种媒体信息，它不是多种媒体的简单堆积，而是包含着对各种媒体的采集、加工、转换、合成等人为因素。

在计算机领域中，多媒体技术是指把文本、图形、图像、声音、动画以及活动视频等多种媒体信息通过计算机进行数字化采集、获取、压缩/解压缩、编辑、存储等加工处理，再以单独或合成形式表现出来的一体化技术。

区分一个应用或系统是否是多媒体应用和多媒体系统的三条主要标准是：媒体的数目，支持多媒体的类型和媒体的集成化程度。

应用中的媒体数目是最基本的一条标准。

支持处理多种媒体，其中至少包含一种时间相关媒体，以及支持多种类型媒体集成化处理，是衡量是否属多媒体应用和系统的标准。

多媒体技术的基本特征有多样性、集成性、交互性、实时性、非线性，其中多样性、集成性和交互性是多媒体最显著的特性。

多样性：把机器处理的信息多维化，通过信息的捕获，处理与展现，使之交互过程中具有更加广阔和更加自由的空间，满足人类感官空间全方位的多媒体信
息要求。

集成性：包括两方面一是多媒体信息媒体的集成；另一是处理这些媒体的设备和系统的集成。

在多媒体系统中，各种信息媒体不是像过去那样，采用单一方式进行采集与处理，而是多通道同时统一采集、存储与加工处理，更加强调各种媒体之间的协同关系及利用它所包含的大量信息。

此外，多媒体系统应该包括能处理多媒体信息的高速及并行的 CPU、多通道的输人输出接口及外设、宽带通信网络接口与大容量的存储器，并将这些硬件设备集成为统一的系统。

在软件方面，则应有多媒体操作系统，满足多媒体信息管理的软件系统、高效的多媒体应用软件和创作软件等。

在网络的支持下，这些多媒体系统的硬件和软件被集成为处理各种复合信息媒体的信息系统。

交互性：多媒体信息的交互性主要针对用户而言，指的是用户在标引、加工、著录、存储、检索利用时，多媒体信息系统能够提供更加有效地控制及使用信息的手段和空间。

交互可以更有效地控制和使用信息，增加对信息的理解。

当引入多媒体技术后，借助交互性，用户可以获得更多的信息，提高对信息的注意力和理解，延长信息保留的时间。

例如，在多媒体远程信息检索系统中，初级交互性可帮助用户找出想读的书，快速跳过不感兴趣的部分，从数据库中检录声音、图像或文字材料等。

中级交互性则可使用户介入到信息的提取和处理过程中。

如对关心的内容进行编排、插人文字说明及解说等。

流媒体，是多媒体的一种，指在网络中使用流式传输技术的连续时基媒体，如音频、视频或多媒体文件。

而流媒体技术就是把连续的非串流格式的声音和视频编码压缩（目的：减少对带宽的消耗）成串流格式（目的：提高音视频应用的品质保障）后放到网站服务器上，让用户一边下载一边收听观看，而不需要等待整个文件下载到自己的机器后才可以观看的网络传输技术。

流媒体架设主流平台分为三种：RealNetworks、WindowsMedia、QuickTime。

RealNetworks是Real公司开发的一整套流式音视频解决方案，也是现今最流行，被广泛使用的流媒体技术。

WindowsMedia是美国微软公司开发的流式音视频解决方案。

QuickTime是苹果公司开发的流式音视频解决方案。

后两者在网络上使用率不是很高，所以我们就以Real公司的流媒体技术来实现网上的在线视听。

多媒体数据库是数据库技术与多媒体技术结合的产物。

多媒体数据库不是对现有的数据进行界面上的包装，而是从多媒体数据与信息本身的特性出发，考虑将其引入到数据库中之后而带来的有关问题。

多媒体数据库从本质上来说，要解决三个难题。

第一是信息媒体的多样化，不仅仅是数值数据和字符数据，要扩大到多媒体数据的存储、组织、使用和管理。

第二要解决多媒体数据集成或表现集成，实现多媒体数据之间的交叉调用和融合，集成粒度越细，多媒体一体化表现才越强，应用的价值也才越大。

第三是多媒体数据与人之间的交互性。

没有交互性就没有多媒体，要改变传统数据库查询的被动性，能以多媒体方式主动表现。

JPEG标准：JPEG(Joint photographic Expert Croup)小组1991年3月提出了ISOCD10918用于连续色调灰度级或彩色图像的压缩标准，采用离散余弦变换、量化、行程与哈夫曼编码等技术，支持几种操作模式，包括无损（压缩比2：1）与各种类型的有损模式（压缩比可达30：1且没有明显的品质退化）。

MPEG系列标准：ISO于1992年制定了运动图像数据压缩编码的标准ISO CD11172，简称MPEG(Motion PictureExpert Group)标准，它是视频图像压缩的一个重要标准。

MPEG标准的视频压缩编码技术主要利用了具有运动补偿的帧间压缩编码技术以减小时间冗余度，利用DCT技术以减小图像的空间冗余度，利用熵编码则在信息表示方面减小了统计冗余度。

这几种技术的综合运用，大大增强了压缩性能。

主要有如下3表对比：
而目前视频编码压缩标准主要有MPEG-x和H.26x两大系列，如图4所示，这些压缩算法都是基于宏块，分别从三个方面改善编码效率：
1.运动估计/运动补偿（MP/MC）消除视频时间冗余；
2.图像差值的离散余弦变换（DCT）消除空间冗余；
3.量化系数的可变长编码（VLC）消除统计冗余。

图4视频压缩标准
网络多媒体传输协议：
RTP(Real-time Transport Protocol)，如图5所示是用于Internet上针对多媒体数据流的一种传输协议。

RTP被定义为在一对一或一对多的传输情况下工作，其目的是提供时间信息和实现流同步。

RTP通常使用UDP来传送数据，但RTP也可以在TCP或ATM等其他协议上工作。

当应用程序开始一个RTP会话时将使用两个端口：一个给RTP，一个给RTCP（RTCP是向会话中的所有成员周期性地发送控制包来实现的，应用程序通过接收这些控制数据包，从中获取会话参与者的相关资料，以及网络状况、分组丢失概率等反馈信息，从而能够对服务质量进行控制或者对网络状况进行诊断）。

RTP本身并不能为按顺序传送数据包提供可靠的传送机制，也不提供流量控制或拥塞控制，它依靠RTCP提供这些服务。

RTCP和RTP一起提供流量控制和拥塞控制服务。

RTP和RTCP 配合使用，它们能以有效的反馈和最小的开销使传输效率最佳化，因而特别适合传送网上的实时数据。

图5 RTP(来源)
RTSP(Real Time Streaming Protocol)是由RealNetworks和Netscape共
同提出的，该协议定义了一对多应用程序如何有效地通过IP网络传送多媒体数据。

RTSP被用于建立的控制媒体流的传输，它为多媒体服务扮演“网络远程控制”的角色。

尽管有时可以把RTSP控制信息和媒体数据流交织在一起传送，但一般情况RTSP本身并不用于转送媒体流数据。

媒体数据的传送可通过RTP/RTCP等协议来完成。

一次基本的RTSP操作过程是：首先，客户端连接到流服务器并发送一个RTSP描述命令（DESCRIBE）。

流服务器通过一个SDP 描述来进行反馈，反馈信息包括流数量、媒体类型等信息。

客户端再分析该SDP 描述，并为会话中的每一个流发送一个RTSP建立命令(SETUP)，RTSP建立命令告诉服务器客户端用于接收媒体数据的端口。

流媒体连接建立完成后，客户端发送一个播放命令(PLAY)，服务器就开始在UDP上传送媒体流（RTP包）到客户端。

在播放过程中客户端还可以向服务器发送命令来控制快进、快退和暂停等。

最后，客户端可发送一个终止命令(TERADOWN)来结束流媒体会话。

RSVP(Resource Reservation Protocol)，是一种位于第三层的信令协议，它独立于各种网络媒介，使得应用能将自己的QOS要求通过信令通知给网络，网络可以对此应用预留相应的资源。

即由于音频和视频数据流比传统数据对网络的延时更敏感，要在网络中传输高质量的音频、视频信息，除带宽要求之外，还需其他更多的条件。

总而言之，RSVP是为保证服务质量（QOS）而开发的，主机使用 RSVP协议代表应用数据流向网络请求保留一个特定量的带宽，路由器使用 RSVP协议向数据流沿途所有节点转发带宽请求，建立并且维护状态以提供所申请的服务。

1.4 技术选型
以一万的并发为例。

主要硬件和软件的选择如图6所示：
类别参数
硬件CPU:Intel Xeon E7-4820
内存：8GB
硬盘：64GB
网卡:Intel E10G42BT 万兆网卡电源：冗余双电源
软件系统软件：ubuntu 15.10 Web服务器:nginx1.7
反向代理服务器：nginx1.7 数据库：mysql5.5
动态语言：php5.6
图6技术选型图
1.5 基本架构
为提高系统的性能在架构方面我们采用集群的方式，数据库方面我们也是采取分库的策略不同的功能访问不同的库。

所谓集群，我们可以把它看作一个公司，集群里每个服务器都相当于公司的一个成员，不同的成员可以做不同的业务，也可以做相同的业务而我们这个设计就是不同的成员做相同的业务，有任务来了（请求），老总（反向代理负载均衡服务器）会判断哪个员工（成员服务器）是闲着的就把任务分配给他，然后员工处理完了，就把准备好的商品给到老总，老总会给到客户（用户），所以对于客户，他只知道老总，而不知道后面干活的员工，而且这样做还有个好处就是高可用性，不会因为哪个员工生病了（宕机了）而整个公司停止对外服务。

而数据库分库也是类似，数据库也会形成一个数据库的集群，只是不同的库的地位不是同样的。

而是不同的库有不同的数据，程序需要什么数据就可以调用不同的数据库来进行数据调取，这样就会把数据库的压力减小。

如图7所示，首先用户通过终端访问我们的页面，我们的程序会判断用户的终端类型，不同类型的终端我们的系统会给出不同的响应，从而实现响应式页面使用户具有良好的体验。

图7数据库分库
对于静态的文件，比如javascript, cs，图片、音频、视频等，我们拟采取CDN 的方式进行加速，提高用户的访问速度。

CDN的全称是Content Delivery Network，即内容分发网络。

其目的是通过
在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

CDN通常支持的协议有网页加速:：HTTP 、HTTPS，动态页面：HTTP、HTTPS，下载加速：HTTP，流媒体点播：HTTP、WMS、FMS，流媒体直播：WMS、FMS、Sliverlight。

如图8所示，在以前的生活中，网络只是一个起到分发作用的桥梁，只是从源服务器发出到网民，大部分网民并没有参与其中，只是去使用，去感受，去查找，是一个只有单向的桥梁。

但是随着网络技术的发展，新技术的应用，网民开始去学习自己作为一个主体去发起一些动作，例如写博客、上传视频、发起讨论等。

网络的规模不断扩大，Internet也越来越复杂，出现越来越多的因素影响网络数据的传输，网络的延迟，网络的不响应越来越频繁。

图8网络变化图
而CDN的出现，一种基于网络层和应用层之间的一种网络应用，通过分布的服务器群来改善internet服务质量，显而易见的提高了网站服务承载能力和网站运行的安全性。

我们可以通过图9和图10的比较，更能清楚的看见CDN的优势。

如图7是网站未做CDN加速前访问方式：①用户的域名解析请求被发往本地DNS 服务器，②请求网站DNS，返回源站点实际IP，③本地DNS服务器将该IP地址返回给用户，④用户直接访问源站点，取回请求的数据。

很容易从中看出当大量用户并发访问网站时必定会导致：对源站点压力过大、受带宽限制，网页响应速度变慢、网络传输中情况错综复杂，导致用户最终的访问速度变慢。

最终客户体验度降低。

图9网站未做CDN加速前访问方式
但是我们从图10，利用CDN网站加速后：①用户的域名解析请求被发往本地DNS服务器，②通过CNAME机制，请求被指向CDN全球负载均衡集群，③对域名进行智能解析，将响应速度最快的CDN边缘集群IP返回给本地DNS服务器，④本地DNS服务器将该IP地址返回给用户，⑤该CDN边缘集群将直接对客户进行响应。

可以看出，我们上面所出现的问题都得到了大幅度的改善，不用担心网站的访客量，访客可以在任何的时间，任何的地点，通过任何的网络运营商，都可以快速打地开网站。

图10网站加速后的访问方式
1.6 技术详细解析
对于访问量大的请求，不同类型的系统有不同的应对方式，一般来说最常用的解决方式有以下种，第一种就是提高服务器的配置，增加服务器的数量，第二种就是从代码方面来进行优化，第三种就是通过CDN进行加速，具体如何应对还需要结合系统的具体情况，找出制约系统的访问速度的瓶颈。

对于内容浏览型的系统，一般会灵活的搭配多种解决方式，具体如图11所示。

图11系统加速图
一般我们可以把静态的内容放在CDN上，例如图片，视频，js文件等，通过CDN来进行判断请求者的isp和位置来选择最近的CDN节点。

以页面常用的jQuery文件为例，我们可以用很多免费的CDN，例如如图12百度的这个例子。

图12百度网页
这个页面在加载时就不会从我们本站进行下载jquery文件，而是从百度的CDN节点下载减少了我们站点的压力。

对于视频而言为了用户的体验，我们除了使用CDN外还可以使用视频分片的方式把大的视频切片编号，加载视频时一是可以推进视频的加载速度，也可以通过cookie来存储用户的播放大概进度，实现简单的断点续传功能。

对于内容浏览型的系统，像门户网站(例如新浪，搜狐等)，信息发布类型的网站(58同城，赶集网等)，主要的速度瓶颈在于系统的硬件环境，用户的网络环境不同，数据的读取速度，web服务器的性能等。

对于用户的网络环境，我们可以采取CDN的方式，使服务器或者资源靠近用户减少数据包在网络的传输节点数量。

对于数据的读取速度，我们可以采取数据缓存的方式，选用像memcache
或者redis这样的数据缓存服务器,使数据的访问不经过硬盘直接在内存中进行读取，最大限度的提高用户数据读取所消耗的时间。

对于web服务器，我们选用是nginx这款服务器配合linux能最大限度的避免因为web服务器处理效能低下而导致的访问速度的低下问题。

“ginx(发音同engine x)是一款轻量级的Web 服务器/反向代理服务器及电
子邮件(IMAP/POP3)代理服务器，并在一个BSD-like 协议下发行。

由俄罗斯的程序设计师Igor Sysoev所开发，供俄国大型的入口网站及搜索引擎Rambler(俄文：Рамблер)使用”。

（来源百度百科
/v3826712.htm?fromTitle=Nginx）。

简而言之，ginx是一款轻量级的web服务器，一款反向代理服务器，也是一款电子邮件代理服务器。

Nginx的常用命令主要有以下这些：
Nginx的启动：假如Nginx安装在usr/local/nginx/目录下，那么启动命令就是：
#usr/local/nginx/sbin/nginx -c usr/local/nginx/conf/nginx.conf，参数-c指定nginx启动时加载的配置文件。

Nginx的停止：#usr/local/nginx/sbin/nginx –s stop，查询nginx的主进程号，使用kill–team [nginx主进程号]。

Nginx的热启动：#usr/local/nginx/sbin/nginx -s reload。

Nginx的配置文件检查：#usr/local/nginx/sbin/nginx -t。

选择ginx的理由也有很多，但是概括起来无外乎以下几点：
①高并发连接：官方测试能够支撑5万并发连接，在实际生产环境中跑到2～3万并发连接数。

②内存消耗少：在3万并发连接下，开启的10个Nginx 进程才消耗150M内存（15M*10=150M）。

③配置文件非常简单：风格跟程序一样通俗易懂。

④成本低廉：Nginx为开源软件，可以免费使用。

而购买F5 BIG-IP、NetScaler
等硬件负载均衡交换机则需要十多万至几十万人民币。

⑤支持的概率微乎其微。

Rewrite重写规则：能够根据域名、URL的不同，将HTTP 请求分到不同的后端服务器群组。

⑥内置的健康检查功能：如果Nginx Proxy 后端的某台Web 服务器宕机了，不会影响前端访问。

⑦节省带宽：支持GZIP 压缩，可以添加浏览器本地缓存的Header 头。

⑧稳定性高：用于反向代理，宕机。

反向代理负载均衡服务器的配置：
upstream {
server 192.168.1.1:80; //成员服务器a
server 192.168.1.2:80; //成员服务器b
server 192.168.1.3:80; //成员服务器c
}
server{
listen 80;
server_name ;
location / {
proxy_pass ;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
上面的配置可以看出负载均衡服务器对成员服务器进行服务的分配，但是如果两台成员服务器的配置不同有的服务能力强有的服务能力弱，那么我们可以进行配置对服务能力强的服务器多分配一些服务，提高服务器集群的整体服务能力。

upstream {
server 192.168.1.1:80 weight=3;//成员服务器a 服务能力强
server 192.168.1.2:80 weight=2; //成员服务器b 服务能力一般
server 192.168.1.3:80 weight=1;//成员服务器c 服务能力弱
}
成员服务器的配置：
server{
listen 80;
server_name ;
index index.php index.html index.htm;
root /data0/htdocs/www;
location ~ \.php($|/) {
root /usr/share/nginx/html/xxx;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_split_path_info ^(.+\.php)(.*)$;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
gzip(GNU- ZIP)是一种压缩技术。

经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。

gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。

浏览器那里不需要我们担心，因为目前的巨大多数浏览器都支持解析gzip 过的页面。

具体如图13所示。

通过抓包发现，压缩后的大小只有原来的三分之一。

图13gzip压缩技术
所以我们的nginx最好能开启gzip服务来对返回文件例如html,js,css,图片
进行压缩。

在nginx的配置文件nginx.conf里加入下面的配置信息即可对返回文件进行压缩。

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
对于硬件的性能问题，我们只能提高服务器的配置或者增加服务器的数量来进行解决。

当然我们也可以采取云主机的方式进行部署项目，这样的话配置起来会非常方便，有些云主机，例如亚马逊aws还会提供弹性访问的功能，根据访问的并发量来灵活的启动aws新实例来解决访问拥堵的问题。

在代码层面，我们的项目基于接口，前端页面通过调用我们暴露的接口来进行相关的操作，这样做的好处是显而易见的，那就是支持多种前端表现方式，甚至是app，我们都能提供相关的服务，使表现和功能解耦，做到后端一次开发就能满足信息的多种表现方式。

在语言框架层面我们会做相关的设置来进行优化返回的信息，比如对返回的信息进行GZIP压缩打包相关的信息，对于web前段页面我们的原则是尽量减少对服务器的请求，能放在一起的js或者css文件尽量放在一起，最好能进行去空格压缩减少返回信息的大小。

对于图片我们也要进行大小的限制，满足要求即可，尽量用最少的代价去达到我们的要求。

对于大量的内容图片以及视频我们就要借助于CDN的方式来进行加速，减少对系统的请求。

除了在代码上进行优化，我们也可以在数据库上进行优化，比如我们选用的mysql数据库，因为涉及的系统是浏览类型的系统那么系统对数据库的操作以读取为多，那么我们就要选取有利于读取的数据库表引擎例如mysql的MyISAM引擎，这种表引擎最大的好处就是读取速度快。