mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-15 02:59:01 +08:00
add socket.io to collab demo
This commit is contained in:
Philipp Kühn
parent
aba26c7e74
commit
bdcd5c967f
@ -5,6 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import io from 'socket.io-client'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { Editor, EditorContent } from 'tiptap'
|
||||
import { Step } from 'prosemirror-transform'
|
||||
@ -19,25 +20,22 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
ws: null,
|
||||
socket: null,
|
||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
||||
collabStartVersion: 0,
|
||||
collabHistory: {
|
||||
steps: [],
|
||||
clientIDs: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEditor({ doc, version }) {
|
||||
this.collabStartVersion = version
|
||||
if (this.editor) {
|
||||
this.editor.destroy()
|
||||
}
|
||||
|
||||
this.editor = new Editor({
|
||||
content: doc,
|
||||
extensions: [
|
||||
new Collab({
|
||||
version: this.collabStartVersion,
|
||||
version,
|
||||
clientID: this.clientID,
|
||||
}),
|
||||
],
|
||||
@ -51,11 +49,7 @@ export default {
|
||||
const sendable = sendableSteps(state)
|
||||
|
||||
if (sendable) {
|
||||
this.ws.send(JSON.stringify(sendable))
|
||||
|
||||
|
||||
console.log({ sendable })
|
||||
|
||||
this.socket.emit('message', sendable)
|
||||
|
||||
const transaction = receiveTransaction(
|
||||
this.editor.state,
|
||||
@ -68,28 +62,6 @@ export default {
|
||||
}, 250),
|
||||
|
||||
receiveData({ steps }) {
|
||||
// if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
|
||||
// return
|
||||
// }
|
||||
|
||||
// steps.forEach(step => {
|
||||
// this.collabHistory.steps.push(step)
|
||||
// this.collabHistory.clientIDs.push(clientID)
|
||||
// })
|
||||
|
||||
// this.updateDoc()
|
||||
|
||||
// const { state, view, schema } = this.editor
|
||||
// const version = getVersion(state)
|
||||
// const data = this.stepsSince(version)
|
||||
// const transaction = receiveTransaction(
|
||||
// state,
|
||||
// steps,
|
||||
// steps,
|
||||
// )
|
||||
|
||||
// view.dispatch(transaction)
|
||||
|
||||
const { state, view, schema } = this.editor
|
||||
|
||||
const transaction = receiveTransaction(
|
||||
@ -106,41 +78,25 @@ export default {
|
||||
for (let i = 0; i < n; i++) result.push(val)
|
||||
return result
|
||||
},
|
||||
|
||||
// updateDoc() {
|
||||
// const { state, view, schema } = this.editor
|
||||
// const version = getVersion(state)
|
||||
// const data = this.stepsSince(version)
|
||||
// const transaction = receiveTransaction(
|
||||
// state,
|
||||
// data.steps.map(step => Step.fromJSON(schema, step)),
|
||||
// data.clientIDs,
|
||||
// )
|
||||
|
||||
// view.dispatch(transaction)
|
||||
// },
|
||||
|
||||
stepsSince(version) {
|
||||
const count = version - this.collabStartVersion
|
||||
return {
|
||||
steps: this.collabHistory.steps.slice(count),
|
||||
clientIDs: this.collabHistory.clientIDs.slice(count),
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.ws = new WebSocket('wss://tiptap-sockets-2.glitch.me')
|
||||
this.socket = io('wss://tiptap-sockets-2.glitch.me')
|
||||
|
||||
this.ws.onmessage = event => {
|
||||
const payload = JSON.parse(event.data)
|
||||
|
||||
if (payload.doc) {
|
||||
this.initEditor(payload)
|
||||
} else {
|
||||
this.receiveData(payload)
|
||||
}
|
||||
}
|
||||
this.socket
|
||||
.on('connect', () => {
|
||||
console.log('connected')
|
||||
})
|
||||
.on('disconnect', () => {
|
||||
console.log('disconnected')
|
||||
})
|
||||
.on('message', data => {
|
||||
if (data.doc) {
|
||||
this.initEditor(data)
|
||||
} else {
|
||||
this.receiveData(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
||||
@ -87,6 +87,8 @@
|
||||
"zlib": "^1.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"prosemirror-collab": "^1.1.1"
|
||||
"lodash-es": "^4.17.11",
|
||||
"prosemirror-collab": "^1.1.1",
|
||||
"socket.io-client": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
58
yarn.lock
58
yarn.lock
@ -4226,6 +4226,23 @@ engine.io-client@~3.2.0:
|
||||
xmlhttprequest-ssl "~1.5.4"
|
||||
yeast "0.1.2"
|
||||
|
||||
engine.io-client@~3.3.1:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.3.2.tgz#04e068798d75beda14375a264bb3d742d7bc33aa"
|
||||
integrity sha512-y0CPINnhMvPuwtqXfsGuWE8BB66+B6wTtCofQDRecMQPYX3MYUZXFNKDhdrSe3EVjgOu4V3rxdeqN/Tr91IgbQ==
|
||||
dependencies:
|
||||
component-emitter "1.2.1"
|
||||
component-inherit "0.0.3"
|
||||
debug "~3.1.0"
|
||||
engine.io-parser "~2.1.1"
|
||||
has-cors "1.1.0"
|
||||
indexof "0.0.1"
|
||||
parseqs "0.0.5"
|
||||
parseuri "0.0.5"
|
||||
ws "~6.1.0"
|
||||
xmlhttprequest-ssl "~1.5.4"
|
||||
yeast "0.1.2"
|
||||
|
||||
engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
|
||||
version "2.1.3"
|
||||
resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.3.tgz#757ab970fbf2dfb32c7b74b033216d5739ef79a6"
|
||||
@ -7432,6 +7449,11 @@ lock-verify@^2.0.2:
|
||||
npm-package-arg "^5.1.2 || 6"
|
||||
semver "^5.4.1"
|
||||
|
||||
lodash-es@^4.17.11:
|
||||
version "4.17.11"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
|
||||
integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
|
||||
|
||||
lodash._reinterpolate@~3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||
@ -10939,6 +10961,26 @@ socket.io-client@2.1.1, socket.io-client@^2.0.4:
|
||||
socket.io-parser "~3.2.0"
|
||||
to-array "0.1.4"
|
||||
|
||||
socket.io-client@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.2.0.tgz#84e73ee3c43d5020ccc1a258faeeb9aec2723af7"
|
||||
integrity sha512-56ZrkTDbdTLmBIyfFYesgOxsjcLnwAKoN4CiPyTVkMQj3zTUh0QAx3GbvIvLpFEOvQWu92yyWICxB0u7wkVbYA==
|
||||
dependencies:
|
||||
backo2 "1.0.2"
|
||||
base64-arraybuffer "0.1.5"
|
||||
component-bind "1.0.0"
|
||||
component-emitter "1.2.1"
|
||||
debug "~3.1.0"
|
||||
engine.io-client "~3.3.1"
|
||||
has-binary2 "~1.0.2"
|
||||
has-cors "1.1.0"
|
||||
indexof "0.0.1"
|
||||
object-component "0.0.3"
|
||||
parseqs "0.0.5"
|
||||
parseuri "0.0.5"
|
||||
socket.io-parser "~3.3.0"
|
||||
to-array "0.1.4"
|
||||
|
||||
socket.io-parser@~3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077"
|
||||
@ -10948,6 +10990,15 @@ socket.io-parser@~3.2.0:
|
||||
debug "~3.1.0"
|
||||
isarray "2.0.1"
|
||||
|
||||
socket.io-parser@~3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.0.tgz#2b52a96a509fdf31440ba40fed6094c7d4f1262f"
|
||||
integrity sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==
|
||||
dependencies:
|
||||
component-emitter "1.2.1"
|
||||
debug "~3.1.0"
|
||||
isarray "2.0.1"
|
||||
|
||||
socket.io@2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.1.1.tgz#a069c5feabee3e6b214a75b40ce0652e1cfb9980"
|
||||
@ -12432,6 +12483,13 @@ ws@~3.3.1:
|
||||
safe-buffer "~5.1.0"
|
||||
ultron "~1.1.0"
|
||||
|
||||
ws@~6.1.0:
|
||||
version "6.1.3"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.3.tgz#d2d2e5f0e3c700ef2de89080ebc0ac6e1bf3a72d"
|
||||
integrity sha512-tbSxiT+qJI223AP4iLfQbkbxkwdFcneYinM2+x46Gx2wgvbaOMO36czfdfVUBRTHvzAMRhDd98sA5d/BuWbQdg==
|
||||
dependencies:
|
||||
async-limiter "~1.0.0"
|
||||
|
||||
xml-name-validator@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user