7 个回答

用page visibility api做的,当tab可见的时候发请求去判断是否有更新。你可以打开控制台,看下network

你打开控制台看看,百分百(并不是)会有个socket,socket会向多个客户端广播消息。
你这情况就是,页面1更新的时候,会发送个信息到socket服务器上(类似事件监听),然后这个socket服务接收到该信息,会向指定用户广播事件
你页面2就接收到了这个事件,为什么能接收到,是因为你登陆的是同一个账号,服务器做了识别,然后你页面2接收到事件,前端做一个处理(弹框),就出现了你这个效果
PS:看了一下楼下回复,补充一下,确实没考虑到这情况,同一个浏览器(不同浏览器不行)完全不需要socket,有storage事件可以帮助实现一样的功能(indexdb没试)并且不需要占带宽

浏览器中同时打开一篇笔记,那就假设是在本地同一浏览器里面打开了 2 个标签去了。

可以用 BroadcastChannel 来实现通信

刚刚去语雀验证了一下,同一台机器上没有 websocket, 页签展示时没有发请求,所以同一台机器的方案可以排除以下两种:

  • websocket 实时通信
  • 切换页签显示时发送请求,判断是否内容有更新

估计是采用了本地缓存的方案,猜测流程如下

  1. 当文档内容变更时,会同步一个与文档 id 关联的标识到本地缓存中(indexDB 或 cache),localStorage可以排除,确认过了,没有发现相关信息
  2. 切换页签时,用页签的 visibility 事件触发更新监测,比较 页签内存 和 本地缓存 的差异,文档有更新就会显示弹窗
  3. 点击确认同步,就是简单的 http 获取最新内容了

这种我写过,挺简单的:

  1. 就是编辑文档提交时,同时也往localStore中存一份;
  2. 每次点编辑从server获取到最新文档后,与本地localstore中的做一下对比,不一样那就是远端有人更新了,你就给个提示框,点重新加载后,更新文档(同时把最新数据往localStore中存一下)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏