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

传统模式

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

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

张京7阅读 1.7k评论 2

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 6.1k评论 3

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 1.7k评论 1

封面图
第九期:前端九条启发分享
下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。

lulu_up8阅读 462

React为什么不将Vite作为默认推荐?
CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

卡颂4阅读 1.2k

封面图
如何优雅的实现网页多主题风格换肤功能?
对于网页换肤,例如最常见的深色、浅色风格已经是很常见的一个需求了。一直以来也有很多的实现方案,这里我主要介绍一下基于 CSS variable的实现方式

前端有猫腻4阅读 1.3k评论 1

封面图

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

13.4k 声望
4.7k 粉丝
宣传栏