Demo了解Meteor进阶



通过Demo了解Meteor7大技术原则


那么,server端总得传一些东西??!传什么呢?传的是数据。这些文件里面除了编译好的js文件之外,还有一些文件,这些文件不是基于传统的http协议的,而是websocket的连接。


0.png


我们在前面的基础知识上提到过。在client和server之间,如果是meteor APP的话,它们之间有一个不间断的一个联系,不像ajax那种,请求了就call一下;不请求就没事儿了。Server端有什么想通知client端的也通知不了。在meteor不是这样的,meteor它是建立了一个websocket的连接,这个连接是始终连接在一起的,这个连接是双向的。当你的client端有什么事情,比如你做了什么操作,如果你需要向server传的话server就随时都可以传过去。然后server如果有什么东西想通知你的话,server也可以随时通知你,这个连接是一直保持的。


这个websocket的连接传了什么内容,我们现在来看一看。


1.png


首先,就是这个message,这个message被叫做DDP这个协议。


2.png


这个就是实际上client和server之间传递的东西。这些东西里面有connect、sub、server_id。


3.png


它的意思我们简单讲一下。首先我们要建立一个连接,告诉你server跟我连起来了。这个绿颜色背景的是上行的,白颜色的是下行的。


4.png


也就是说,在我们刚刚刷新页面的一瞬间上行的是,告诉server我连接起来了,版本号是多少。然后同时,我还订阅了两个东西,订阅了两个连接。在浏览器里面是跑了数据库的mini mongo,它和数据库之前的数据是通过订阅和发布来传递的,而不是像ajax call那种方式来做,这是meteor的很大的一个特点。就是通过sub来订阅的内容。


这个就是它订阅的其中一个内容。


5.png


这个就是server的回答了。


6.png


然后连接好了,就added。


7.png


这几个是什么呢?这几个是说你订阅的东西,我收到了,你订阅的这个内容又4个文档,我把这文档一一的传给你。


8.png


因为server发现你client端的数据库里面是空的。但是你订阅的这4个部分刚好在server端有。


9.png


所以就告诉前端,你得加这4个数据在你的数据库里面。
你会发现实际上传回来的数据,实际上就是这四个list。


90.png


传完了以后,就传这个ready,意思就是说告诉前端,我已经传完了。


91.png


然后这个client又订阅了其它的东西。


92.png


在订阅完了以后,后面的就相当于是一些心跳测试了。


93.png


就是告诉server端,client端还活着。这里我就是想告诉大家,这个连接是一直保持的,而且是双向的实时传递的。也就是说,当你的server建了一个新的东西,或者client建了一个新的东西,它会向上行;如果是在client建立了一个新的list,会向上行告诉server。如果是server端被建了一个新东西,或者是server端自己去产生了一个新的东西,server端会下行告诉这个浏览器这端。对于这个双向实时的,我们可以马上试验一下。


首先我们看一下数据库这块,前端是有数据库的。


94.png


还有就是,这个console是可以输入JavaScript语言的命令的。这个是我们调试的时候,要大量使用的一个东西,比如我刚才敲的这个Lists,这个是实际上是问浏览器这个变量是什么。然后这里,浏览器告诉我这是一个MongoDB的collection。


95.png


你们要注意??!我是在浏览器里面跑的,而不是在server里面跑。左边的是server,右边的是浏览器。


96.png


就是说这个浏览器里边已经建立了这么一个数据表了。
这个数据表是怎么来的,我们之前刚提到过。


97.png


是added这些东西从server端一一的加载过来的,它加几个过来,就会有几个在数据表中。
除了Lists以外,还有Todos。


98.png


这些都是一些表。
那么这表里面有些什么内容呢?我们可以通过一些简单的Mongo命令看一下。你看,这个List有4个object。


99.png


我们一看就知道这个object是什么了。正好对应的就是现实在页面上的数据了。


990.png


如果我们在这个MyList里面添加一条数据。


991.png


然后我们看看控制台,马上就能看到我们添加的数据的记录了。


992.png


只是这里因为是中文,被编码过之后,我们就不认识了。这个method告诉server端,我有东西要增加。


993.png


然后呢!server端知道你增加了以后,又下行了一个这个东西,我增加好了,告诉你这个增加了。


994.png


后面还有一系列的,包括这个list的changed。


995.png


我们看一下这个,原来是0,现在变成1了。


996.png


就是这个东西。


997.png


现在是1了,刚才没写是0。所以它需要有个changed。
然后是updated,告诉你要把它变成新的数字。


998.png


就这一套协议来保证server端和client的数据是一致的。
如果我们还进一步测试的话,你还可以把这个删除了。


999.png


在控制台马上就会有一堆新的消息过来了。


9990.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部