🚧 Initial work on websocket communication.

frontend/src/uxbox/main/data/workspace.cljs

@@ -12,6 +12,7 @@
    [uxbox.config :as cfg]
    [uxbox.common.data :as d]
    [uxbox.common.pages :as cp]
+   [uxbox.main.websockets :as ws]
    [uxbox.main.constants :as c]
    [uxbox.main.data.icons :as udi]
    [uxbox.main.data.pages :as udp]
@@ -28,6 +29,7 @@
    [uxbox.util.perf :as perf]
    [uxbox.util.router :as rt]
    [uxbox.util.spec :as us]
+   [uxbox.util.transit :as t]
    [uxbox.util.time :as dt]
    [uxbox.util.uuid :as uuid]))
 
@@ -179,6 +181,7 @@
        (->> (rx/filter (ptk/type? ::initialized) stream)
             (rx/take 1)
             (rx/mapcat #(rx/of watch-page-changes)))))
+
     ptk/EffectEvent
     (effect [_ state stream]
       ;; Optimistic prefetch of projects if them are not already fetched
@@ -200,6 +203,35 @@
                :workspace-data data
                :workspace-page page)))))
 
+;; --- Initialize WebSocket
+
+(defn initialize-websocket
+  [file-id]
+  (ptk/reify ::initialize-websocket
+    ptk/UpdateEvent
+    (update [_ state]
+      (prn "initialize-websocket$update" file-id)
+      (let [uri (str "ws://localhost:6060/sub/" file-id)]
+        (assoc-in state [::ws file-id] (ws/open uri))))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (prn "initialize-websocket$watch" file-id)
+      (->> (ws/-stream (get-in state [::ws file-id]))
+           (rx/filter #(= :message (:type %)))
+           (rx/map :payload)
+           (rx/map t/decode)
+           (rx/tap #(js/console.log "ws-message" file-id %))
+           (rx/ignore)))))
+
+(defn finalize-websocket
+  [file-id]
+  (ptk/reify ::finalize-websocket
+    ptk/EffectEvent
+    (effect [_ state stream]
+      (prn "finalize-websocket" file-id)
+      (ws/-close (get-in state [::ws file-id])))))
+
 ;; --- Toggle layout flag
 
 (defn toggle-layout-flag

frontend/src/uxbox/main/ui/workspace.cljs

@@ -103,6 +103,12 @@
             (st/emit! (udw/initialize file-id page-id))
             #(rx/cancel! sub)))})
 
+  (mf/use-effect
+   {:deps #js [(str file-id)]
+    :fn (fn []
+          (st/emit! (udw/initialize-websocket file-id))
+          #(st/emit! (udw/finalize-websocket file-id)))})
+
   (let [layout (mf/deref refs/workspace-layout)
         file   (mf/deref refs/workspace-file)
         page   (mf/deref refs/workspace-page)

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -128,6 +128,8 @@
 
 ;; --- Viewport
 
+(declare remote-user-cursor)
+
 (mf/defc canvas-and-shapes
   {:wrap [mf/wrap-memo]}
   [props]
@@ -276,9 +278,44 @@
         (when (contains? flags :ruler)
           [:& ruler {:zoom zoom :ruler (:ruler local)}])
 
+
         ;; -- METER CURSOR MULTIUSUARIO
-        [:div.multiuser-cursor
-         [i/infocard]
-         [:span "USER_NAME"]]
+        ;;[:& remote-user-cursor]
 
         [:& selrect {:data (:selrect local)}]]])))
+
+
+(mf/defc remote-user-cursor
+  [props]
+  [:g.multiuser-cursor #_{:transform "translate(100, 100) scale(2)"}
+   [:svg {:x "100"
+          :y "100"
+          :style {:fill "#000"}
+          :width "106.824"
+          :height "20.176"
+          :viewBox "0 0 28.264 5.338"}
+    [:path {:d "M5.292 4.027L1.524.26l-.05-.01L0 0l.258 1.524 3.769 3.768zm-.45 0l-.313.314L1.139.95l.314-.314zm-.5.5l-.315.316-3.39-3.39.315-.315 3.39 3.39zM1.192.526l-.668.667L.431.646.64.43l.552.094z"
+            :font-family "sans-serif"}]
+    [:g {:transform "translate(0 -291.708)"}
+     [:rect {:width "21.415"
+             :height "5.292"
+             :x "6.849"
+             :y "291.755"
+             :fill-opacity ".893"
+             :paint-order "stroke fill markers"
+             :rx ".794"
+             :ry ".794"}]
+     [:text {:x "9.811"
+             :y "295.216"
+             :fill "#fff"
+             :stroke-width ".265"
+             :font-family "Open Sans"
+             :font-size"2.91"
+             :font-weight "400"
+             :letter-spacing"0"
+             :line-height "1.25"
+             :word-spacing "0"
+             ;; :style="line-height:1
+             }
+      "User 2"]]]])
+

frontend/src/uxbox/main/websockets.cljs

@@ -0,0 +1,51 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
+
+(ns uxbox.main.websockets
+  "A interface to webworkers exposed functionality."
+  (:require
+   [cljs.spec.alpha :as s]
+   [goog.events :as ev]
+   [beicon.core :as rx]
+   [potok.core :as ptk]
+   [uxbox.util.spec :as us])
+  (:import
+   goog.net.WebSocket
+   goog.net.WebSocket.EventType))
+
+(defprotocol IWebSocket
+  (-stream [_] "Retrienve the message stream")
+  (-send [_ message] "send a message")
+  (-close [_] "close websocket"))
+
+
+(defn open
+  [uri]
+  (let [sb (rx/subject)
+        ws (WebSocket. #js {:autoReconnect true})
+        lk1 (ev/listen ws EventType.MESSAGE
+                       #(rx/push! sb {:type :message :payload (.-message %)}))
+        lk2 (ev/listen ws EventType.ERROR
+                       #(rx/push! sb {:type :error :payload %}))
+        lk3 (ev/listen ws EventType.OPENED
+                       #(rx/push! sb {:type :opened :payload %}))]
+    (.open ws uri)
+    (reify
+      cljs.core/IDeref
+      (-deref [_] ws)
+
+      IWebSocket
+      (-stream [_] sb)
+      (-send [_ msg]
+        (when (.isOpen ws)
+          (.send ws msg)))
+      (-close [_]
+        (.close ws)
+        (rx/end! sb)
+        (ev/unlistenByKey lk1)
+        (ev/unlistenByKey lk2)
+        (ev/unlistenByKey lk3)))))
+