Dnwz99
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

热搜: 活动 交友 discuz
Dnwz99 首页 原创 技术 查看内容

写给产品经理的技术书:客户端、服务端和交互相关技术

发布者: dnwz99|2018-10-26 12:13
27 0

偶然知道生活拮据,姑姑伯伯舅舅开始偷偷塞钱给你,你手中的现金开始富余。

P2S下载(免费)

P2S=Point to Server点对服务器

除了多线程下载之外,迅雷支持从全网的其他有QQ软件的服务器下载,比如金山服务器等等,提升下载速度。

后来你认识了富二代的朋友,他们时不时请你吃饭,给你买单,你几乎不用从老爸(原始地址)那里要钱了。

P2P下载(免费)

p2p=Peer to Peer点对点

有了多线程和P2S加速之后,当其他用户同时在下载QQ时,你也可以直接从对方PC下载,而不用经过服务器。(目前手机暂不支持P2P)

再后来,你有能力了,开始计划创业了,几个天使投资人对你感兴趣,给你投资,你再也不用找家里人要钱。

会员高速CDN下载(迅雷会员)

CDN=Content Delivery Network内容分发网络

通过购买服务器,迅雷在用户下载的同时,把文件快速下载到迅雷服务器(强大的带宽和网速),用户再从距离最近的迅雷服务器进行下载(从迅雷服务器到迅雷客户端的下载速度极快)。

然后你公司慢慢做大做强,几个大型的投资机构,如日本软银、红杉资本又给你注入了资金,你已经向高富帅迈进了!

DCDN加速(迅雷会员)

DCDN=CDN 2.0

用户通过协议之后,迅雷会把相关资源片段存储在用户PC,把每一台PC都当成服务器,其他用户下载QQ时,可以获得极快下载速度。在此过程中,迅雷须向提供存储空间的用户付费,作为对用户的一种补偿。

最后,突然发现巴菲特是你失散多年的干爹!于是,化身高富帅,赢取白富美,你登上了人生巅峰!!!

以上是迅雷加速的几种原理,用户能够获得远远高于原始下载的速度,这也是迅雷下载如此迅速的原因。

3.代理服务器

代理就是代为处理的意思,现实生活中有很多事情我们不想自己亲自动手,就花点钱找个代理摆平,说的就是这个意思。这年头,各种各样的代理都有。你看到别人名片上写着阿迪王北京总代理,就应该知道他是替阿迪王公司卖鞋的;看到有人喜当爹了,就应该知道他是在替别人的孩子当爸爸。他们有个共同特点,就是代理和本人干的是一样的事情,外人很难分辨出来。

切入正题,今天我们要讲的代理服务器,是指在我们上网的过程中访问某个服务器的时候,并不是亲自访问真正的服务器,而是先找了一个代理,由它向真正的服务器发出请求。到这里各位看官应该明白了,代理服务器架在客户端和真正服务器中间,干的是替客户端访问真正服务器的工作。

那么这里有人要说了,不对啊,小学语文老师教过我们两点之间线段最短,为什么你们不直接去真正服务器拿数据,还要到代理服务器里绕个路呢?这里可能有几种情况:一是真正的服务器藏于千里之外,我们连接不上。二是我们访问真正的服务器的速度太慢,比不上我们访问代理服务器+代理服务器访问真正服务器的速度。还有一种情况,就是通过代理服务器访问真正服务器可以隐藏访问者的身份,保护访问者。同理,我们在网络世界中一定要懂得保护自己,一次看似不经意的浏览,背后可能有好多双眼睛在盯着你。他们可以通过各种途径查到你的IP地址,然后上门找到你。所以请记住一句话,代理用的好,不怕查水表。

光说理论太枯燥,我们看几个例子。下面的截图是我们通过百度搜索点开了一个网站,上面提示“原网页已由百度转码,已方便在移动设备上查看”。也就是说,这时候我们访问的并不是这个网站真正的服务器,而是百度提供的代理服务器。这个代理服务器把真正服务器的内容返回给我们的时候,把原网页的内容改成了现在这个样子,“顺便”还插入了自己的广告(下方红框)。

现在很多手机浏览器都有省流加速功能,其实就是通过代理服务器来达到节省流量的目的。假如我要访问的原网页A需要800K的流量,但是我开启了省流加速功能后,浏览器会帮我自动连接上A的代理服务器B,B从A拿到真正的数据后,进行一些数据的压缩操作,那么我再访问代理服务器B的时候,可能只需要100K就可以浏览网页A的内容了。

4.轻量级虚拟机–DOCKER

软件开发中需要面对的一个挑战就是环境管理问题,因为软件并不是独立运行的,它依赖了很多其它的软件,包括操作系统、运行时、依赖库等等,而且对每个依赖软件还有版本要求,有一个依赖关系稍微不对,那就可能造成软件的运行异常。产品同学应该有过这种经历,从开发哥那里要一个最新版的软件来体验功能,结果装在自己的电脑上打开就挂掉,这个时候找开发哥来解决,开发哥一看就会说“哦,你这环境不对,换个Win8吧,这软件只能在Win8以上运行”,或者说“这个软件需要.Net框架,你装个.Net就好了”。

Docker,改变程序世界的箱子

其实解决依赖环境的办法很简单,那就是所有机器都用同一套环境。但是对于一些web服务,它所依赖的软件及关联软件可能有上百个,让你去配一台机器已经要吐血了,如果让你把这个服务发布到100台不同的机器上,那么你就应该会阵亡了。同时,很有可能因为不同的机器已有的环境不同,你安装这些依赖的同时还要保证不能影响其它已有应用

说了这么多,其实就是三个大问题,如何解决环境依赖?如何解决大规模部署?如何解决应用与应用的互相影响?Docker就是这些问题的一种解决方案,它是一个容器,也可以说是一个软件集装箱,这个箱子里面可以塞入特定版本的操作系统、数据库、服务器程序和web应用,这样一套完整的web服务就集成在这个箱子里面了,当要发布服务的时候,直接将这个集装箱放在我们的服务器船上。如果你想发布到100台机器上,没问题,只需要ctrl-c、ctrl-v,将这些集装箱复制到100台机器上,它不会在乎船的配置高低,只要能放得下就行。

如果你想发布10个不同的服务,还是没问题,你只需将这10个不同的集装箱依次排列在服务器船上,它们之间完全不会互相影响,因为各自被锁在不同的箱子里。

有的同学可能会说了,这不就是虚拟机嘛…是的,Docker算是一种轻量级的虚拟机,它比起传统的虚拟机更快,更节省资源。打个比方,虚拟机就是轮船上的豪华包间,即使它用不了这么多资源,它也霸占着不让别人使用,而Docker容器就是一个简单的集装箱,它只占据它需要的资源。

三、交互相关

1.网页与原生App如何交互

想想平时用的 App,你非常确信在浏览一个网页,然而需要登录时,它却唤起了你手机里的 QQ 或是微信,你不再需要输入帐号和密码就可以让你浏览的网页获取你的登录信息,这一切只发生在你指尖的两次点击。

网页与原生 app 如何交互

而在手机上,网页越来越炫酷,你都很难区分你在点击的是一个原生界面(指 Native 应用程序,说人话就是 android app 或 ios 应用)或仅仅是一个 H5 页面。你的操作一直穿梭在网页与原生界面之间,比如一个网页中的电话号码,点击就可以拨打电话,这种网页和 app 交互这一切是如何实现的呢?

这项能力在安卓中叫做Js2Java(ios上也提供类似的技术),很好理解,从Js到Java,从网页到app,他们是双向通信,可互相调用的,市面上大量的App程序,都在利用这项技术,微信更是本质上利用这项技术打造了公众帐号整个体系,使得创业者用一个简简单单的网页就打通了帐号、身份、支付、客服、售后等一系列操作,虽然简单,但是真的将移动互联网的Web生态囊括了更广阔的内容,也是移动互联网较PC互联网更优越、更猛烈的点之一。

以Android系统为例,Android手机上的App是使用Java语言编写的,而网页中则运行着一些Html、Javascript编写的代码。Android的App是通过WebView(请亲理解成一个组件,想象WebView就是一个没有任何操作按钮的浏览器,你输入baidu.com他就打开了百度的页面)来展示一个网页的,同时WebView为网页和原生App建立一个桥梁,让网页和原生App能够看到彼此暴露的一些方法,从而达到互相操作的目的。

当然,这些操作是需要前端页面和终端程序互相协商的。虽然很多App遵守了一些相同的原则,使网页在不同的APP中都能具备相同的能力,但是如果你看到同一个网页在一个App中能够调用一些安卓系统的能力,而在另一个APP中却没有对应的能力也不要觉得奇怪(找对应App的开发勾兑一下就好了)。

一个原生应用为网页开放的能力越多,网页对原生系统的操作能力就越强,就越能做出逼近原生应用的体验。但是,这却是一把双刃剑,因为原生App开放的能力有可能会被恶意的页面利用,对用户造成伤害,如何控制能力的开放,也是需要产品和开发一起思考的问题。

例如微信是一个终端能力的宿主,拥有支付,登录,分享,获取App信息等能力,并以Js接口的形式提供给前端页面使用,前端开发则需要在微信申请对应的Js接口使用权限,才能够在微信中正常使用对应的能力。

最后总结一下,网页塑造界面的优势在于灵活,随时可以更新,而原生APP塑造的界面则能够提供更流畅的用户体验,但是却无法热更新,只能依靠发布版本来提供新功能。通过上面说的这种技术,就可以利用各自的优势,规避各自的劣势来提供更好用户体验,例如在微信中购物的展示是网页形式的,方便运营快速更新,通过Js接口调用起原生的支付界面,给用户更流畅的支付体验,提高支付成功率。

2.应用下载劫持

其实一次网络下载的过程,就像一次“网购”,当我们点击下载按钮时,就跟下载服务器下了一份“订单”,“订购”了一个文件(当然大部分是免费的),服务器确认“订单”后,就会将文件在网络中“快递”(传输)到用户的终端(手机、PC等)。下载劫持一般出现在“下订单”的过程中。

举个栗子,假设我们通过微信官网的链接下载微信安卓版本的客户端。链接地址为:http://dldir1.qq.com/weixin/android/weixin637android660.apk,整个流程大概是这个样子:

当点击了下载按钮后,客户端会通过url中的“域名”“dldir1.qq.com”来向DNS服务器获取确认“订单(下载)服务器”的IP地址,IP地址在互联网中相当于日常生活中“电话号码”,有了它,就可以连接到这台“订单(下载)服务器”,而DNS服务器就像一个存贮着大量“姓名”(域名)和“电话号码”(IP地址)的黄页。当客户端获得了“订单(下载)服务器”的“电话号码”(ip地址)后,就会连接“订单(下载)服务器”,并告知“订单(下载)服务器”客户端需要获取服务器上的“微信安卓版”apk文件,一般情况下,服务器在这个阶段确认了“订单”后,就会向客户端“快递”(传输)对应的apk文件,当客户端将文件下载完毕后,这次“网购”也就完成了。

下面,我们引入运营商(电信、联通等)网关的概念。运营商网关可以类比成日常生活中的“总机”,接入运营商的互联网设备想要能够“上网”,都需要经过“总机”(运营商网关)的转接。也就是说,在上图中的第二步,我们并不能直接通过“订单(下载)服务器”的“电话号码”(IP地址)联系到“订单(下载)服务器”,而是需要先连接到“总机”(网关),并且告诉它,我们要向某某某服务器下“订单”,经过“总机”的转接,我们才能真正连接到“订单(下载)服务器”。整个过程如下图:

可以发现,DNS服务器和网关的决策,确定了客户端“订单”(下载请求)的走向。而“下载劫持”也就发生在这两个关键节点上。

假设客户端获取下载服务器“电话号码”的DNS服务器被篡改,那么客户端可能会通过“dldir1.qq.com”查询到一个“骗子服务器”的“电话号码”(IP地址),当我们联系到这个“骗子服务器”时,我们的“订单”(下载请求)可能会换来一些奇奇怪怪的“商品”。

当我们遇到这种情况时,可以手动修改DNS服务器IP(具体方法请问度娘)来解决。然而当运营商的“总机”(网关)“出了问题”(这些“问题”一般是运营商主动造成的)时,就没那么容易解决了。假设当客户端拿着“订单(下载)服务器”的电话号码要求“总机”(网关)转接到我们指定的“订单(下载)服务器”时,“总机”(网关)对客户端说“哎呀,不要去A家下载微信了,你去我给你介绍的B家下载“XX助手”吧,比微信好用”(这个过程在技术上是被一个叫做302跳转的机制完成的,如果你不知道什么是302,出门左转,查询我们星期一的文章)。客户端是个实在人,就这样被“引诱”到B家的服务器上下载了。

“总机”(网关)和服务器B就这样沆瀣一气,来骗客户端的下载量。

3.前端和后台的数据交互与协议

目前,除了一些特别简单非联网类应用(比如计算器、闹钟等),几乎所有的应用均是联网应用(比如新闻客户端,微信等等),这些app客户端基本都只是负责用户的交互与数据收集与展示,真正的数据和服务均存储在云端。

那移动端究竟如何和后台来交换数据并展示呢?我们打个比喻,其实整个过程跟去烧烤店儿撸串一样一样的。

拿任意一个新闻客户端举例,当用户刷新的那一刻(你萌生了吃烧烤的想法),客户端开始组织数据请求(你开始穿衣洗脸打扮,并思考该去哪一家吃呢),当用户界面开始展示 loading 的时候(这个时候你正走在 “马大姐烧烤店” 的路上),经过几百毫秒的时间,这个时候请求数据已经到了服务器(你已经坐在了马大姐烧烤店的桌子上),服务器开始查看客户端想要请求哪方面的数据,是请求财经频道的,还是请求汽车频道的数据(服务员递来了菜单,问你想吃啥),服务器看懂了客户端的想法开始准备数据(你点了 20 个肉串,10 个大腰子),服务器看到你请求的是汽车频道和财经频道的数据(光着膀子的烤串师傅开始烤这 20 个串和 10 个大腰子),并给回到服务员,服务员一路小跑,将你要的串和腰子递到你的面前,这个时候相当于数据已经传回到了客户端,客户端 loading 消失,你看到了最新的两个频道的数据。

那客户端和服务器之间传输数据的格式是怎么样的呢?

现在流行的做法通常有两种,一种是类似于PB(Protocol Buffer,Google定义的一个数据传输协议,以简洁,省流,易用出名)的二进制数据(二进制数据的意思就是你打开这个文件你只能看到0和1组成的数字串,是没办法和你生活中任何认识的字母联系在一起的)传输,这种格式的好处是包小,重复的字段会被节省。

另一种是JSON(JavaScriptObject Notation),这也是一种轻量级的数据传输格式,就是用一堆中括号把数据组织起来,不像二进制,这种格式是人可读的,并且比较轻巧,所以也有大量的应用场景。下面这段数据就是JSON格式,简单解读一下,就是people对应了三个人,三个人分别是中括号间的三个花括号中的人。

聊聊前端和后台的数据交互与协议

总结起来,十分简单,移动端提出需求,服务器按要求组织好数据发给你,针对不同的格式,移动端自己解析,展示,完活儿。其实,不止移动端,前端网页和后台,后台和后台之间也是这个道理。

#专栏作家#

给产品经理讲技术,微信公众号(pm_teacher),人人都是产品经理专栏作家。资深程序猿,专注客户端开发若干年,对前端、后台技术略懂,热衷于对新的科技领域的探索。

本文原创发布于人人都是产品经理,未经许可,不得转载。


鲜花

握手

雷人

路过

鸡蛋

最新评论

相关分类

SIDEBAR

相关分类

QQ|Archiver|手机版|小黑屋|Dnwz99  

GMT+8, 2018-11-18 12:22 , Processed in 1.171875 second(s), 25 queries .