I have integrated the collaboration feature from tiptap.dev into my NextJS application.
Initially, I used their CLI command for the Hocuspocus server which worked well on port 1234 locally and synchronized text editing across browsers seamlessly. However, I encountered an issue when I realized I needed a proper server for the frontend to connect to as it will be hosted on Vercel.
After following the documentation and setting up an Express server using code provided by tiptap.dev, I found that the frontend was not connecting as expected. I am now stuck trying to figure out what may be missing or incorrect in my setup.
You can find the express code I used here:
I suspect my struggle might be related to not fully grasping how websockets function.
Below is the frontend code snippet:
import Collaboration from "@tiptap/extension-collaboration"
import StarterKit from "@tiptap/starter-kit"
import { EditorContent, useEditor } from "@tiptap/react"
import React from "react"
import { HocuspocusProvider } from "@hocuspocus/provider"
import * as Y from "yjs"
// A new Y document
const ydoc = new Y.Doc()
// Registered with a WebRTC provider
// const provider = new WebrtcProvider('example-document', ydoc)
const provider = new HocuspocusProvider({
url: "ws://127.0.0.1:1234",
name: "example-document",
})
const TipTapEditor = () => {
const editor = useEditor({
extensions: [
StarterKit.configure({
// The Collaboration extension comes with its own history handling
history: false,
}),
// Register the document with Tiptap
Collaboration.configure({
document: provider.document,
}),
],
})
return (
<>
<EditorContent
className="w-full h-full border border-black"
editor={editor}
/>
</>
)
}
export default TipTapEditor
And this is the Express server setup:
const express = require("express")
const expressWebsockets = require("express-ws")
const cors = require("cors")
const bodyParser = require("body-parser")
const { Server } = require("@hocuspocus/server")
// Configure Hocuspocus
const server = Server.configure({
// ...
})
// Setup your express instance using the express-ws extension
const { app } = expressWebsockets(express())
app.use(cors())
app.use(bodyParser.json())
// A basic http route
app.get("/", (request, response) => {
response.send("Hello World!")
})
app.post("/", (req, res) => {
res.status(200).json({msg: "success"})
})
// Add a websocket route for Hocuspocus
// Note: make sure to include a parameter for the document name.
// You can set any contextual data like in the onConnect hook
// and pass it to the handleConnection method.
app.ws("/collaboration/:document", (websocket, request) => {
console.log("ws: ", websocket)
console.log("req: ", request)
const context = {
user: {
id: 1234,
name: "Jane",
},
}
server.handleConnection(websocket, request, context)
})
// Start the server
app.listen(3005, () => console.log("Listening on port 3005"))