Vary：“卡片草稿”与“自动保存”功能：实现与思考

IOS

2024-02-01 16:35:37

在 Vary 中释放你的创作力：卡片草稿和自动保存

卡片草稿：灵感即时捕捉

灵感犹如稍纵即逝的火花，抓住它需要一种快捷的方式。Vary 的卡片草稿功能就应运而生。当你在 Vary 中浏览文章时，只需轻触卡片草稿按钮，即可将精选的文本、图像或链接快速记录到自己的草稿箱中。

这个神奇的功能背后是一个实时监听用户浏览行为的后台服务。当触发卡片草稿按钮时，服务会将当前文章链接、选定的内容以及其他详细信息记录到数据库中。

卡片草稿的优势显而易见：

灵感永不遗漏： 无需打开编辑器，就能即时捕捉灵感。
跨平台同步： Vary 的云存储机制确保了卡片草稿在不同设备之间无缝同步。
内容分类： 可使用自定义标签对草稿进行分类，方便管理。

代码示例：

// 触发卡片草稿按钮
document.getElementById('card-draft-button').addEventListener('click', function() {
  // 获取当前文章链接
  const articleUrl = window.location.href;

  // 获取选定的文本
  const selectedText = window.getSelection().toString();

  // 获取选定的图像或链接（如果有）
  const selectedImage = document.querySelector('img.selected');
  const selectedLink = document.querySelector('a.selected');

  // 将信息发送到后台服务
  const data = {
    articleUrl: articleUrl,
    selectedText: selectedText,
    selectedImage: selectedImage ? selectedImage.src : '',
    selectedLink: selectedLink ? selectedLink.href : '',
  };

  fetch('/api/card-drafts', {
    method: 'POST',
    body: JSON.stringify(data),
  });
});

自动保存：无惧灵感消逝

灵感易逝，但 Vary 的自动保存功能能确保你的创作安全无虞。与传统编辑器不同，Vary 的自动保存将内容实时同步到云端服务器。这可不是简单的本地存储，而是利用了 WebSocket 技术。当你在编辑器中输入内容时，编辑器通过 WebSocket 与服务器建立实时连接，逐字逐句地发送你的输入。

自动保存的优势不言而喻：

内容永不丢失： 即使断网或浏览器崩溃，你的内容也不会付诸东流。
随时随地访问： 无论何时何地，只要登录 Vary，就能继续编辑之前保存的内容。
协作写作： 自动保存为协作写作提供了基础，多人可以同时编辑同一篇文章，而无需担心内容冲突。

代码示例：

// 建立 WebSocket 连接
const socket = new WebSocket('wss://vary.io/socket');

// 编辑器输入事件监听器
document.getElementById('editor').addEventListener('input', function() {
  // 获取当前内容
  const content = document.getElementById('editor').value;

  // 通过 WebSocket 发送内容
  socket.send(content);
});

// WebSocket 消息接收监听器
socket.addEventListener('message', function(event) {
  // 更新云端服务器上的内容
  const data = JSON.parse(event.data);
  const serverContent = data.content;

  // 同步编辑器内容
  document.getElementById('editor').value = serverContent;
});