介绍一种实时更新网页的方案

传统模式

传统模式下网页对数据库的读写类似于下面这种:
传统模式

  1. 张三通过浏览器访问web服务器,修改数据;

  2. web服务器把新数据写入数据库;

  3. 李四并不知道数据库是否有变化,他必须刷新浏览器页面,浏览器访问服务器;

  4. 服务器再次访问数据库;

  5. 数据库把新的结果返回给服务器;

  6. 服务器返回新页面给李四。

meteor模式

meteor提供了一种新的思路:
meteor模式

  1. 张三通过浏览器访问web服务器;

  2. web服务器把新数据写入数据库;

  3. 数据库通知web服务器有新数据产生;

  4. web服务器通知浏览器有新数据,浏览器自动变化页面,李四就看到结果了。

meteor原理

在后面一张图中,第4步的动作比较好理解,就是通过在web服务器和浏览器之间建立一条websocket通道,就能实现服务器和浏览器之间的双向通讯。

奇怪的是第3步,数据库是怎么通知web服务器有数据变化的呢?

当你在安装meteor-mysql插件后,再次启动meteor时,它会不停地告诫你:你需要开启mysqlbin_log。mysql的bin_log是干什么用的呢?几乎所有资料都会谈到什么主从架构。

实际上,meteor在这里只是把自己伪装成是一个mysql的从服务器。大家都知道,数据库的主从服务器是需要数据同步的,也就是说当主mysql服务器的数据发生变更时,它会以bin_log的形式通知从服务器,从服务器只需要检查这个bin_log就知道主服务器发生变更了。

所以,如果你没有开启bin_log的话,meteor也可以知道数据库的变化,只不过是用一种比较笨拙的轮询方式。而如果开启bin_log的话,meteor不再以轮询方式访问数据库,而是等待主服务器向自己推送数据了。

我这里写了一个简单的例子meteor如何连接mysql数据库,感兴趣的可以尝试一下。

关于如何安装和使用meteor,他们的官方网站有较详细的教程,跟着教程一步一步走下来,很快就能理解。


日新亭
苟日新,日日新,又日新。

现任北京联云天下科技有限公司技术副总裁。1994年毕业于清华大学计算机科学与技术专业;20多年软件开发...

13.3k 声望
4.7k 粉丝
0 条评论
推荐阅读
只在工作日执行的脚本
但是工作日有时候又不是简单的周一到周五,比如赶上个小长假什么的,有时候周六要上班,有时候周一又不上班,这时候这样的设置就容易乱,那我们怎么设置这个cronjob才能让他预知我们的放假排班计划,并做到丝毫不...

张京7阅读 1.4k评论 2

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.3k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功12阅读 1.5k评论 1

封面图
前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.6k

现任北京联云天下科技有限公司技术副总裁。1994年毕业于清华大学计算机科学与技术专业;20多年软件开发...

13.3k 声望
4.7k 粉丝
宣传栏