From bdcd5c967f3d0b614eaa92b05be07f35417234af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 5 Feb 2019 03:07:43 +0100
Subject: [PATCH] add socket.io to collab demo

---
 .../Routes/Collaboration2/index.vue           | 88 +++++--------------
 package.json                                  |  4 +-
 yarn.lock                                     | 58 ++++++++++++
 3 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
index 1cedbe2f..c9b2bff9 100644
--- a/examples/Components/Routes/Collaboration2/index.vue
+++ b/examples/Components/Routes/Collaboration2/index.vue
@@ -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() {
diff --git a/package.json b/package.json
index 15bdc6ca..1726dbc6 100644
--- a/package.json
+++ b/package.json
@@ -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"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a50601f2..1ce1857d 100644
--- a/yarn.lock
+++ b/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"