websockets: partial viewer updates are now supported

common/browser-websockets.js

@@ -1,9 +1,10 @@
 import * as Window from "~/common/window";
+import * as Strings from "~/common/strings";
 
 let pingTimeout = null;
 let client = null;
 
-export const init = ({ resource = "", viewer }) => {
+export const init = ({ resource = "", viewer, onUpdate }) => {
   console.log(`${resource}: init`);
 
   if (client) {
@@ -41,7 +42,31 @@ export const init = ({ resource = "", viewer }) => {
       return;
     }
 
-    console.log(`${resource}: ${event.data}`);
+    if (Strings.isEmpty(event.data)) {
+      return;
+    }
+
+    let type;
+    let data;
+    try {
+      const response = JSON.parse(event.data);
+      type = response.type;
+      data = response.data;
+    } catch (e) {
+      console.log(e);
+    }
+
+    if (!data) {
+      return;
+    }
+
+    if (!type) {
+      return;
+    }
+
+    if (type === "UPDATE" && onUpdate) {
+      onUpdate(data);
+    }
   });
 
   client.addEventListener("close", (e) => {
@@ -49,8 +74,7 @@ export const init = ({ resource = "", viewer }) => {
       return;
     }
 
-    client.send(JSON.stringify({ type: "NOTICE", data: `closing ...` }));
+    console.log(`${resource}: closed`);
-
     clearTimeout(pingTimeout);
   });
 

components/core/Application.js

@@ -10,7 +10,7 @@ import * as FileUtilities from "~/common/file-utilities";
 import * as System from "~/components/system";
 import * as Window from "~/common/window";
 import * as Store from "~/common/store";
-import * as Websockets from "~/common/websockets";
+import * as Websockets from "~/common/browser-websockets";
 
 // NOTE(jim):
 // Scenes each have an ID and can be navigated to with _handleAction
@@ -168,6 +168,16 @@ export default class ApplicationPage extends React.Component {
     }
   }
 
+  _handleUpdateViewer = (newViewerState) => {
+    console.log({ newViewerState });
+
+    if (this.state.viewer && newViewerState.id && newViewerState.id === this.state.viewer.id) {
+      this.setState({
+        viewer: { ...this.state.viewer, ...newViewerState, type: "VIEWER" },
+      });
+    }
+  };
+
   _handleSetupWebsocket = () => {
     if (this.props.resources && !Strings.isEmpty(this.props.resources.pubsub)) {
       if (!this.state.viewer) {
@@ -178,6 +188,7 @@ export default class ApplicationPage extends React.Component {
       return Websockets.init({
         resource: this.props.resources.pubsub,
         viewer: this.state.viewer,
+        onUpdate: this._handleUpdateViewer,
       });
     }
 

node_common/environment.js

@@ -16,6 +16,7 @@ export const POSTGRES_ADMIN_USERNAME = process.env.POSTGRES_ADMIN_USERNAME;
 export const POSTGRES_HOSTNAME = process.env.POSTGRES_HOSTNAME;
 export const POSTGRES_DATABASE = process.env.POSTGRES_DATABASE;
 export const JWT_SECRET = process.env.JWT_SECRET;
+export const PUBSUB_SECRET = process.env.PUBSUB_SECRET;
 export const LOCAL_PASSWORD_ROUNDS_MANUAL = process.env.LOCAL_PASSWORD_ROUNDS_MANUAL;
 export const LOCAL_PASSWORD_ROUNDS = process.env.LOCAL_PASSWORD_ROUNDS;
 export const LOCAL_PASSWORD_SECRET = `$2b$${LOCAL_PASSWORD_ROUNDS}$${

node_common/managers/viewer.js

@@ -4,12 +4,14 @@ import { grpc } from "@improbable-eng/grpc-web";
 import { WebsocketTransport } from "@textile/grpc-transport";
 grpc.setDefaultTransport(WebsocketTransport());
 
+import * as Environment from "~/node_common/environment";
 import * as Utilities from "~/node_common/utilities";
 import * as Data from "~/node_common/data";
 import * as Constants from "~/node_common/constants";
 import * as Serializers from "~/node_common/serializers";
 import * as Social from "~/node_common/social";
 import * as Strings from "~/common/strings";
+import * as Websocket from "~/node_common/nodejs-websocket";
 
 const STAGING_DEAL_BUCKET = "stage-deal";
 
@@ -17,6 +19,47 @@ const delay = async (waitMs) => {
   return await new Promise((resolve) => setTimeout(resolve, waitMs));
 };
 
+Websocket.create();
+
+export const hydratePartialViewer = async (user) => {
+  const data = {
+    ...Serializers.user(user),
+    type: "PARTIAL_VIEWER",
+    library: user.data.library,
+    onboarding: user.data.onboarding || {},
+
+    // TODO(jim): Move this elsewhere.
+    allow_filecoin_directory_listing: user.data.allow_filecoin_directory_listing
+      ? user.data.allow_filecoin_directory_listing
+      : null,
+    allow_automatic_data_storage: user.data.allow_automatic_data_storage
+      ? user.data.allow_automatic_data_storage
+      : null,
+    allow_encrypted_data_storage: user.data.allow_encrypted_data_storage
+      ? user.data.allow_encrypted_data_storage
+      : null,
+  };
+
+  if (Strings.isEmpty(Environment.PUBSUB_SECRET)) {
+    return;
+  }
+
+  const ws = Websocket.get();
+  const encryptedData = await Utilities.encryptWithSecret(
+    JSON.stringify(data),
+    Environment.PUBSUB_SECRET
+  );
+
+  // NOTE(jim): Only allow this to be passed around encrypted.
+  ws.send(
+    JSON.stringify({
+      type: "UPDATE",
+      iv: encryptedData.iv,
+      data: encryptedData.hex,
+    })
+  );
+};
+
 // TODO(jim): Work on better serialization when adoption starts occuring.
 export const getById = async ({ id }) => {
   const user = await Data.getUserById({

node_common/nodejs-websocket.js

@@ -0,0 +1,41 @@
+import * as Environment from "~/node_common/environment";
+import * as ScriptLogging from "~/node_common/script-logging";
+import * as Strings from "~/common/strings";
+
+import WebSocket from "ws";
+
+let ws;
+
+export const create = () => {
+  if (ws) {
+    return;
+  }
+
+  if (Strings.isEmpty(Environment.RESOURCE_URI_PUBSUB)) {
+    return;
+  }
+
+  ws = new WebSocket(Environment.RESOURCE_URI_PUBSUB, {
+    perMessageDeflate: false,
+  });
+
+  ws.on("ping", function() {
+    clearTimeout(this.pingTimeout);
+
+    this.pingTimeout = setTimeout(() => {
+      this.terminate();
+    }, 30000 + 1000);
+  });
+
+  ws.on("open", () => {
+    ws.send(JSON.stringify({ type: "SUBSCRIBE_HOST", data: {} }));
+  });
+
+  ws.on("close", () => {
+    console.log("Websocket disconnected");
+  });
+
+  return ws;
+};
+
+export const get = () => ws;

node_common/utilities.js

@@ -3,9 +3,13 @@ import * as Strings from "~/common/strings";
 import * as Constants from "~/node_common/constants";
 import * as Social from "~/node_common/social";
 
+import crypto from "crypto";
 import JWT from "jsonwebtoken";
 import BCrypt from "bcrypt";
 
+const ENCRYPTION_ALGORITHM = "aes-256-ctr";
+const ENCRYPTION_IV = crypto.randomBytes(16);
+
 import { Buckets, PrivateKey, Pow, Client, ThreadID } from "@textile/hub";
 
 const BUCKET_NAME = "data";
@@ -71,6 +75,16 @@ export const getIdFromCookie = (req) => {
   return id;
 };
 
+export const encryptWithSecret = async (text, secret) => {
+  const cipher = crypto.createCipheriv(ENCRYPTION_ALGORITHM, secret, ENCRYPTION_IV);
+  const encrypted = Buffer.concat([cipher.update(text), cipher.final()]);
+
+  return {
+    iv: ENCRYPTION_IV.toString("hex"),
+    hex: encrypted.toString("hex"),
+  };
+};
+
 export const encryptPassword = async (text, salt) => {
   if (!text) {
     return null;

pages/api/users/update.js

@@ -3,15 +3,14 @@ import * as Data from "~/node_common/data";
 import * as Utilities from "~/node_common/utilities";
 import * as Validations from "~/common/validations";
 import * as Social from "~/node_common/social";
+import * as ViewerManager from "~/node_common/managers/viewer";
 
 import BCrypt from "bcrypt";
 
 export default async (req, res) => {
   const id = Utilities.getIdFromCookie(req);
   if (!id) {
-    return res
+    return res.status(500).send({ decorator: "SERVER_USER_UPDATE", error: true });
-      .status(500)
-      .send({ decorator: "SERVER_USER_UPDATE", error: true });
   }
 
   const user = await Data.getUserById({
@@ -19,19 +18,16 @@ export default async (req, res) => {
   });
 
   if (!user) {
-    return res
+    return res.status(404).send({ decorator: "SERVER_USER_UPDATE_USER_NOT_FOUND", error: true });
-      .status(404)
-      .send({ decorator: "SERVER_USER_UPDATE_USER_NOT_FOUND", error: true });
   }
 
   if (user.error) {
-    return res
+    return res.status(500).send({ decorator: "SERVER_USER_UPDATE_USER_NOT_FOUND", error: true });
-      .status(500)
-      .send({ decorator: "SERVER_USER_UPDATE_USER_NOT_FOUND", error: true });
   }
 
+  let unsafeResponse;
   if (req.body.data) {
-    const response = await Data.updateUserById({
+    unsafeResponse = await Data.updateUserById({
       id: user.id,
       data: { ...user.data, ...req.body.data },
     });
@@ -43,58 +39,34 @@ export default async (req, res) => {
     });
 
     if (!existing) {
-      await Data.updateUserById({
+      unsafeResponse = await Data.updateUserById({
         id: user.id,
         username: req.body.username,
       });
-    }
+    } else {
-  }
+      return res.status(500).send({ decorator: "SERVER_USERNAME_IS_TAKEN", error: true });
-
-  // TODO(jim): POWERGATE
-  // Doesn't actually work yet.
-  if (req.body.type === "SET_DEFAULT_STORAGE_CONFIG") {
-    const {
-      power,
-      powerInfo,
-      powerHealth,
-    } = await Utilities.getPowergateAPIFromUserToken({ user });
-
-    // TODO(jim): Put this call into a file for all Textile related calls.
-    let data;
-    try {
-      data = await power.ffs.setDefaultStorageConfig(req.body.config);
-    } catch (e) {
-      Social.sendTextileSlackMessage({
-        file: "/pages/api/users/update.js",
-        user: user,
-        message: e.message,
-        code: e.code,
-        functionName: `power.ffs.setDefaultStorageConfig`,
-      });
-
-      return res
-        .status(500)
-        .send({ decorator: "SERVER_USER_UPDATE_SETTINGS_CONFIG", error: true });
     }
   }
 
   if (req.body.type == "CHANGE_PASSWORD") {
     if (!Validations.password(req.body.password)) {
-      return res
+      return res.status(500).send({ decorator: "SERVER_INVALID_PASSWORD", error: true });
-        .status(500)
-        .send({ decorator: "SERVER_INVALID_PASSWORD", error: true });
     }
 
     const rounds = Number(Environment.LOCAL_PASSWORD_ROUNDS);
     const salt = await BCrypt.genSalt(rounds);
     const hash = await Utilities.encryptPassword(req.body.password, salt);
 
-    await Data.updateUserById({
+    unsafeResponse = await Data.updateUserById({
       id: user.id,
       salt,
       password: hash,
     });
   }
 
+  if (unsafeResponse) {
+    ViewerManager.hydratePartialViewer(unsafeResponse);
+  }
+
   return res.status(200).send({ decorator: "SERVER_USER_UPDATE" });
 };

server.js

@@ -1,12 +1,14 @@
 import * as Environment from "~/node_common/environment";
-import * as Validations from "~/common/validations";
 import * as Data from "~/node_common/data";
 import * as Utilities from "~/node_common/utilities";
 import * as Serializers from "~/node_common/serializers";
-import * as Window from "~/common/window";
-import * as Strings from "~/common/strings";
 import * as ViewerManager from "~/node_common/managers/viewer";
 import * as AnalyticsManager from "~/node_common/managers/analytics";
+import * as Websocket from "~/node_common/nodejs-websocket";
+
+import * as Validations from "~/common/validations";
+import * as Window from "~/common/window";
+import * as Strings from "~/common/strings";
 
 import express from "express";
 import next from "next";