README

无缝集成 Hocuspocus 后端到 Laravel。

安装

您可以通过 composer 安装此包

composer require ueberdosis/hocuspocus-laravel

您可以使用以下命令发布和运行迁移

php artisan vendor:publish --provider="Hocuspocus\HocuspocusServiceProvider" --tag="hocuspocus-laravel-migrations"
php artisan migrate

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Hocuspocus\HocuspocusServiceProvider" --tag="hocuspocus-laravel-config"

使用方法

将 CanCollaborate 特性添加到您的用户模型中

use Illuminate\Foundation\Auth\User as Authenticatable;
use Hocuspocus\Traits\CanCollaborate;

class User extends Authenticatable {
    use CanCollaborate;
}

将 Collaborative 接口和 IsCollaborative 特性添加到您的文档中，并配置 collaborativeAttributes

use Illuminate\Database\Eloquent\Model;
use Hocuspocus\Contracts\Collaborative;
use Hocuspocus\Traits\IsCollaborative;

class TextDocument extends Model implements Collaborative {
    use IsCollaborative;

    protected array $collaborativeAttributes = [
        'title', 'body',
    ];
}

为您的应用添加策略，以处理模型的授权。策略方法的名称可在 hocuspocus-laravel.php 配置文件中配置。示例：

use App\Models\TextDocument;
use App\Models\User;
use Illuminate\Auth\Access\HandlesAuthorization;

class TextDocumentPolicy
{
    use HandlesAuthorization;

    public function update(User $user, TextDocument $document)
    {
        return true;
    }
}

在前端，将 collaborationAccessToken 和 collaborationDocumentName 添加到您的 WebSocket 提供者中

<script>
  window.collaborationAccessToken = '{{ optional(auth()->user())->getCollaborationAccessToken() }}';
  window.collaborationDocumentName = '{{ $yourTextDocument->getCollaborationDocumentName() }}'
</script>

import { HocuspocusProvider } from '@hocuspocus/provider'
import * as Y from 'yjs'

const provider = new HocuspocusProvider({
  document: new Y.Doc(),
  url: 'ws://localhost:1234',
  name: window.collaborationDocumentName,
  parameters: {
    access_token: window.collaborationAccessToken,
  },
})

在您的 .env 文件中配置一个随机的密钥

HOCUSPOCUS_SECRET="459824aaffa928e05f5b1caec411ae5f"

最后，使用 webhook 扩展设置 Hocuspocus

import { Server } from '@hocuspocus/server'
import { Webhook, Events } from '@hocuspocus/extension-webhook'
import { TiptapTransformer } from '@hocuspocus/transformer'

const server = Server.configure({
  extensions: [
    new Webhook({
      // url to your application
      url: 'https://example.com/api/documents',
      // the same secret you configured earlier in your .env
      secret: '459824aaffa928e05f5b1caec411ae5f',

      transformer: TiptapTransformer,
    }),
  ],
})

server.listen()

致谢

• Kris Siepert
• 所有贡献者

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件。