语雀，在浏览器中同时打开一篇笔记，编辑其中一个，进入另一页面，会有提示，这怎么实现的？

Question

Answer 1

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

Answer 2

你打开控制台看看，百分百（并不是）会有个socket，socket会向多个客户端广播消息。

你这情况就是，页面1更新的时候，会发送个信息到socket服务器上(类似事件监听)，然后这个socket服务接收到该信息，会向指定用户广播事件

你页面2就接收到了这个事件，为什么能接收到，是因为你登陆的是同一个账号，服务器做了识别，然后你页面2接收到事件，前端做一个处理(弹框)，就出现了你这个效果

PS：看了一下楼下回复，补充一下，确实没考虑到这情况，同一个浏览器(不同浏览器不行)完全不需要socket，有storage事件可以帮助实现一样的功能（indexdb没试）并且不需要占带宽

Answer 3

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

可以用 BroadcastChannel 来实现通信

Answer 4

postMessage

Answer 5

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

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

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

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

Answer 6

这种我写过，挺简单的：

1. 就是编辑文档提交时，同时也往localStore中存一份；
2. 每次点编辑从server获取到最新文档后，与本地localstore中的做一下对比，不一样那就是远端有人更新了，你就给个提示框，点重新加载后，更新文档（同时把最新数据往localStore中存一下）

Answer 7

浏览器页面间的通信，可以参考这篇文章：面试官：前端跨页面通信，你知道哪些方法？