阐述 JavaScript 中的 Web Locks API，它如何解决浏览器环境下资源互斥访问的问题。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，早上好！今天咱们来聊聊 JavaScript 里一个低调但关键的家伙——Web Locks API。这玩意儿，说白了，就是给咱们的浏览器环境里搞了个锁，解决资源互斥访问的问题。这就像是你家厕所，你用的时候得把门锁上，不然别人一推门进来，场面就尴尬了。

一、啥是资源互斥访问？

先来掰扯掰扯啥是资源互斥访问。想象一下，你和你的小伙伴同时编辑一个在线文档。如果你们俩同时保存，后保存的就把先保存的覆盖了，先写的就白写了，这就很悲催。这就是典型的资源竞争，或者说，非互斥访问。

资源互斥访问，就是说同一时刻，只有一个线程或者进程能访问某个共享资源，其他人都得等着。这就像排队上厕所一样，一个个来，不能抢。

在浏览器环境里，哪些算是共享资源呢？

IndexedDB 数据库：多个标签页或者 Web Worker 可能同时读写同一个数据库。
LocalStorage/SessionStorage：虽然简单，但多个标签页也可能同时修改它们。
WebSocket 连接：多个页面可能需要通过同一个 WebSocket 连接发送数据。
文件系统 API：多个页面可能需要同时读写同一个文件。
内存中的共享数据：Web Workers 之间可以通过 SharedArrayBuffer 共享内存。

如果没有互斥机制，这些共享资源就容易出问题，数据错乱、内容丢失都是常有的事儿。

二、Web Locks API 闪亮登场

Web Locks API 就是来解决这个问题的。它提供了一种机制，让你的 JavaScript 代码能够获取和释放锁，确保同一时刻只有一个代码块能访问特定的资源。

这API非常简单，核心就一个navigator.locks对象，它提供了两个主要的方法：

request(name, options, callback)：请求获取一个名为 name 的锁。options 可以配置锁的行为，callback 是一个函数，当锁被成功获取时执行。
query()：查询当前已持有的锁。

三、request() 方法详解

咱们重点聊聊 request() 方法，它是核心。

navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  // 成功获取锁后执行的代码
  try {
    console.log('成功获取锁！');
    // 在这里访问共享资源
    await doSomethingWithResource();
  } finally {
    // 锁用完一定要释放！
    console.log('释放锁！');
  }
});

'my-resource'： 锁的名称。这个名称可以是任意字符串，用来标识你想要保护的资源。不同的页面或 Worker 只要用相同的名称，就可以实现对同一个资源的互斥访问。这就像厕所的编号，用编号来区分不同的厕所。
{ mode: 'exclusive' }： 锁的模式。有两种模式：
- 'exclusive'： 独占锁。只有唯一的一个请求能成功获取到锁。这就像厕所单人间，一次只能进一个人。
- 'shared'： 共享锁。多个请求可以同时获取到锁，但是需要资源本身支持并发访问。这就像阅览室，可以同时很多人看书，但是不能同时在同一本书上写字。对于大多数情况，exclusive 模式就够用了。
async lock => { ... }： 回调函数。这个回调函数只有在成功获取到锁之后才会执行。lock 参数是一个 Lock 对象，代表你持有的锁。这个对象本身没什么用，主要是用来表示你已经持有锁了。

注意： 回调函数必须返回一个 Promise。当 Promise resolve 时，锁会自动释放。这就是为什么上面的代码用 async 函数，并且在 finally 块中不写任何释放锁的代码。如果回调函数抛出异常，Promise 会 reject，锁也会自动释放。

重要的事情说三遍： 回调函数返回的 Promise resolve 时，锁会自动释放！ 回调函数返回的 Promise resolve 时，锁会自动释放！ 回调函数返回的 Promise resolve 时，锁会自动释放！

如果你不返回 Promise，锁会一直持有，直到页面关闭或者 Worker 终止，这就会造成死锁！
finally 块： finally 块中的代码无论如何都会执行，包括成功获取锁并执行完操作，或者获取锁失败。虽然锁会自动释放，但是你可以在 finally 块中做一些清理工作，比如恢复 UI 状态，或者记录日志。

四、锁的等待机制

如果当前已经有其他页面或者 Worker 持有锁，那么 request() 方法会进入等待状态，直到锁被释放。浏览器会自动管理这个等待队列，按照请求的顺序依次授予锁。

你也可以通过 options 来配置等待行为：

ifAvailable: true： 如果锁当前可用，立即获取；如果不可用，立即返回 undefined，不进入等待队列。

navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, async lock => {
  if (lock) {
    console.log('成功获取锁！');
    await doSomethingWithResource();
  } else {
    console.log('锁当前不可用！');
  }
});

steal: true： 强制抢占锁。如果当前有其他页面或者 Worker 持有锁，立即中断它们的执行，并把锁授予当前请求。 慎用！ 除非你知道自己在做什么，否则不要使用 steal 模式，因为它可能导致数据损坏或者不一致。
```
navigator.locks.request('my-resource', { mode: 'exclusive', steal: true }, async lock => {
  console.log('成功抢占锁！');
  await doSomethingWithResource();
});
```

signal: AbortSignal： 使用 AbortSignal 来取消锁的请求。这在你需要超时或者用户取消操作时非常有用。

const controller = new AbortController();
const signal = controller.signal;

navigator.locks.request('my-resource', { mode: 'exclusive', signal }, async lock => {
  console.log('成功获取锁！');
  await doSomethingWithResource();
});

// 5 秒后取消锁的请求
setTimeout(() => {
  controller.abort();
  console.log('取消锁的请求！');
}, 5000);

五、query() 方法详解

query() 方法可以用来查询当前已持有的锁的信息。它返回一个 Promise，resolve 的值是一个对象，包含以下属性：

held： 一个数组，包含当前页面或者 Worker 持有的锁的名称。
pending： 一个数组，包含当前页面或者 Worker 正在等待获取的锁的名称。

navigator.locks.query().then(locks => {
  console.log('当前持有的锁：', locks.held);
  console.log('当前等待获取的锁：', locks.pending);
});

这个方法主要用来调试和监控锁的状态，实际开发中用得不多。

六、Web Locks API 的应用场景

Web Locks API 在很多场景下都能发挥作用：

防止并发写入 IndexedDB： 确保只有一个页面或者 Worker 能够写入 IndexedDB 数据库，避免数据冲突。

async function writeToDatabase(data) {
  return navigator.locks.request('indexeddb-write', async lock => {
    const db = await openDatabase();
    const transaction = db.transaction(['my-store'], 'readwrite');
    const store = transaction.objectStore('my-store');
    await store.put(data);
    await transaction.complete;
    console.log('数据写入成功！');
  });
}

协调多个页面之间的 WebSocket 连接： 确保只有一个页面负责处理 WebSocket 连接，避免重复发送或者接收消息。

let socket;

async function connectWebSocket() {
  return navigator.locks.request('websocket-connect', async lock => {
    if (!socket) {
      socket = new WebSocket('ws://example.com');
      socket.onopen = () => console.log('WebSocket 连接成功！');
      socket.onmessage = (event) => console.log('收到消息：', event.data);
      socket.onclose = () => {
        console.log('WebSocket 连接关闭！');
        socket = null;
      };
    }
  });
}

避免重复提交表单： 防止用户多次点击提交按钮，导致重复提交表单。

const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', async () => {
  submitButton.disabled = true; // 禁用按钮

  try {
    await navigator.locks.request('form-submit', async lock => {
      await submitForm(); // 提交表单
      console.log('表单提交成功！');
    });
  } finally {
    submitButton.disabled = false; // 重新启用按钮
  }
});

管理 Web Workers 之间的共享内存： 确保对 SharedArrayBuffer 的并发访问是安全的。

const sab = new SharedArrayBuffer(1024);
const array = new Int32Array(sab);

async function updateSharedArrayBuffer(index, value) {
  return navigator.locks.request('shared-array-buffer', async lock => {
    Atomics.store(array, index, value);
    Atomics.notify(array, index, 1);
    console.log('共享内存更新成功！');
  });
}

七、Web Locks API 的注意事项

锁是基于 origin 的： 只有相同 origin 的页面或者 Worker 才能共享同一个锁。这意味着 http://example.com 和 https://example.com 无法共享锁，example.com 和 sub.example.com 也无法共享锁。
锁是临时的： 锁只在页面或者 Worker 的生命周期内有效。当页面关闭或者 Worker 终止时，锁会自动释放。因此，Web Locks API 不能用来实现持久化的锁。
锁是建议性的： Web Locks API 只是一种建议性的机制，它并不能强制阻止对资源的访问。如果你的代码不遵守锁的协议，仍然可以绕过锁直接访问资源。因此，你需要确保所有的代码都使用 Web Locks API 来保护共享资源。
死锁： 如果你的代码设计不合理，可能会导致死锁。例如，两个页面互相等待对方释放锁，导致谁也无法继续执行。因此，你需要仔细设计你的锁的策略，避免出现死锁的情况。
性能： 频繁地获取和释放锁可能会影响性能。因此，你需要尽量减少锁的竞争，避免在不必要的地方使用锁。

八、Web Locks API 的兼容性

Web Locks API 的兼容性还不错，主流浏览器都支持。

浏览器	支持版本
Chrome	73+
Firefox	79+
Safari	14.1+
Edge	79+
Opera	60+

你可以使用 navigator.locks 来检测浏览器是否支持 Web Locks API。

if ('locks' in navigator) {
  console.log('浏览器支持 Web Locks API！');
} else {
  console.log('浏览器不支持 Web Locks API！');
}

九、总结

Web Locks API 是一个简单而强大的工具，可以帮助你解决浏览器环境下的资源互斥访问问题。虽然它有一些限制，但是只要你理解了它的原理和注意事项，就能在很多场景下发挥作用。

记住，锁就像安全套，用对了保护自己，用错了适得其反。

好了，今天的讲座就到这里，大家有什么问题可以提出来，我们一起讨论。散会！

发表回复 取消回复

发表回复取消回复