fix NODE_ENV port priority (#356)

* added cors to env dev

* updated socket.io

* tweaked pm2 configs

* tweaked readme

* slight refactor of index

* removed types for socket.io as it is part of main package

* clean up and setting default ports

.env.development

@@ -0,0 +1,2 @@
+PORT=
+CORS_ORIGIN=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@excalidraw/eslint-config"
+}

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"

.github/workflows/lint.yml

@@ -2,23 +2,17 @@ name: Lint
 
 on:
   push:
-    branches:
-      - master
-  pull_request:
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v1
-
+      - name: Setup Node.js 14.x
-      - name: Setup Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
-
+      - name: Install dependencies
-      - name: Install and lint
+        run: yarn --frozen-lockfile
-        run: |
+      - name: Lint
-          yarn
+        run: yarn test:other
-          yarn lint

.github/workflows/publish-docker.yml

@@ -8,7 +8,6 @@ on:
 jobs:
   publish-docker:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
       - uses: docker/build-push-action@v1

.github/workflows/test.yml

@@ -0,0 +1,20 @@
+name: Test & Build
+
+on:
+  push:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+      - name: Test and Build
+        run: |
+          yarn test:code
+          yarn build

.gitignore

@@ -71,6 +71,7 @@ typings/
 # dotenv environment variables file
 .env
 .env.test
+.env.production
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

.prettierrc

@@ -1 +0,0 @@
-{}

README.md

@@ -1,3 +1,27 @@
-# collab-server
+# Example of excalidraw collaboration server
 
-Excalidraw collaboration server
+Collaboration server for Excalidraw
+
+If you need to use cluster mode with pm2. Checkout: https://socket.io/docs/v4/pm2/
+
+If you are not familiar with pm2: https://pm2.keymetrics.io/docs/usage/quick-start/
+
+# Development
+
+- install
+
+  ```sh
+  yarn
+  ```
+
+- run development server
+
+  ```sh
+  yarn start:dev
+  ```
+
+# Start with pm2
+
+```
+pm2 start pm2.production.json
+```

package.json

@@ -1,72 +1,39 @@
 {
-  "name": "excalidraw-room",
+  "dependencies": {
-  "version": "1.0.0",
+    "@excalidraw/eslint-config": "1.0.1",
-  "description": "Excalidraw collaboration server",
+    "@excalidraw/prettier-config": "1.0.2",
-  "main": "index.js",
+    "@types/debug": "4.1.5",
+    "@types/express": "4.17.11",
+    "@types/node": "14.14.31",
+    "@typescript-eslint/eslint-plugin": "4.16.1",
+    "@typescript-eslint/parser": "4.16.1",
+    "cross-env": "^7.0.3",
+    "debug": "4.3.1",
+    "dotenv": "^10.0.0",
+    "eslint": "7.21.0",
+    "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-prettier": "3.3.1",
+    "express": "4.17.1",
+    "prettier": "2.2.1",
+    "socket.io": "^4.6.1",
+    "ts-node-dev": "^1.1.8",
+    "typescript": "4.2.3"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "name": "excalidraw-portal",
+  "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build": "tsc",
-    "fix": "yarn prettier --write",
+    "fix:code": "yarn test:code --fix",
-    "lint": "yarn prettier --list-different",
+    "fix:other": "yarn prettier --write",
-    "prettier": "prettier \"**/*.{ts,md,json,yaml,yml}\"",
+    "fix": "yarn fix:other && yarn fix:code",
+    "prettier": "prettier . --ignore-path=.gitignore",
     "start": "node dist/index.js",
-    "test": "yarn lint"
+    "start:dev": "cross-env NODE_ENV=development ts-node-dev --respawn --transpile-only src/index.ts",
+    "test:code": "eslint --ext .ts .",
+    "test:other": "yarn prettier --list-different",
+    "test": "yarn test:other && yarn test:code"
   },
-  "repository": {
+  "version": "1.0.0"
-    "type": "git",
-    "url": "git+https://github.com/excalidraw/excalidraw-room.git"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/excalidraw/excalidraw-room/issues"
-  },
-  "homepage": "https://github.com/excalidraw/excalidraw-room#readme",
-  "dependencies": {
-    "debug": "4.1.1",
-    "eslint": "7.3.1",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "express": "4.17.1",
-    "prettier": "2.0.5",
-    "socket.io": "2.3.0"
-  },
-  "devDependencies": {
-    "@types/socket.io": "2.1.11",
-    "@types/debug": "4.1.5",
-    "@types/express": "4.17.7",
-    "@types/node": "13.9.8",
-    "typescript": "4.0.2"
-  },
-  "eslintConfig": {
-    "extends": [
-      "prettier"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "curly": "warn",
-      "no-console": [
-        "warn",
-        {
-          "allow": [
-            "warn",
-            "error",
-            "info"
-          ]
-        }
-      ],
-      "no-else-return": "warn",
-      "no-useless-return": "warn",
-      "prefer-const": [
-        "warn",
-        {
-          "destructuring": "all"
-        }
-      ],
-      "prefer-template": "warn",
-      "prettier/prettier": "warn"
-    }
-  }
 }

pm2.json

@@ -0,0 +1,14 @@
+{
+  "name": "excalidraw-collab-dev",
+  "script": "./dist/index.js",
+  "watch": ["src/"],
+  "ignore_watch": ["node_modules", "public"],
+  "autorestart": false,
+  "exec_mode": "fork_mode",
+  "instances": 1,
+  "env": {
+    "NODE_ENV": "development",
+    "TZ": "Europe/London"
+  },
+  "node_args": ["--inspect=127.0.0.1:9320"]
+}

pm2.production.json

@@ -0,0 +1,15 @@
+{
+  "name": "excalidraw-collab",
+  "script": "./dist/index.js",
+  "ignore_watch": ["node_modules", "public"],
+  "max_memory_restart": "4G",
+  "watch": false,
+  "wait_ready": true,
+  "log_date_format": "YYYY-MM-DD HH:mm Z",
+  "autorestart": true,
+  "exec_mode": "fork_mode",
+  "instances": 1,
+  "env": {
+    "NODE_ENV": "production"
+  }
+}

src/index.ts

@@ -1,14 +1,27 @@
-import express from "express";
-import http, { ServerResponse } from "http";
-import socketIO from "socket.io";
 import debug from "debug";
+import express from "express";
+import http from "http";
+import { Server as SocketIO } from "socket.io";
 
 const serverDebug = debug("server");
 const ioDebug = debug("io");
 const socketDebug = debug("socket");
 
+require("dotenv").config(
+  process.env.NODE_ENV !== "development"
+    ? { path: ".env.production" }
+    : { path: ".env.development" },
+);
+
 const app = express();
-const port = process.env.PORT || 80; // default port to listen
+const port =
+  process.env.PORT || (process.env.NODE_ENV !== "development" ? 80 : 3002); // default port to listen
+
+app.use(express.static("public"));
+
+app.get("/", (req, res) => {
+  res.send("Excalidraw collaboration server is up :)");
+});
 
 const server = http.createServer(app);
 
@@ -16,32 +29,34 @@ server.listen(port, () => {
   serverDebug(`listening on port: ${port}`);
 });
 
-const io = socketIO(server, {
+try {
-  handlePreflightRequest: function (req, res) {
+  const io = new SocketIO(server, {
-    var headers = {
+    transports: ["websocket", "polling"],
-      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    cors: {
-      "Access-Control-Allow-Origin": req.header ? req.header.origin : "*",
+      allowedHeaders: ["Content-Type", "Authorization"],
-      "Access-Control-Allow-Credentials": true,
+      origin: process.env.CORS_ORIGIN || "*",
-    };
+      credentials: true,
-    res.writeHead(200, headers);
-    res.end();
     },
-});
+    allowEIO3: true,
+  });
 
-io.on("connection", (socket) => {
+  io.on("connection", (socket) => {
     ioDebug("connection established!");
     io.to(`${socket.id}`).emit("init-room");
-  socket.on("join-room", (roomID) => {
+    socket.on("join-room", async (roomID) => {
       socketDebug(`${socket.id} has joined ${roomID}`);
-    socket.join(roomID);
+      await socket.join(roomID);
-    if (io.sockets.adapter.rooms[roomID].length <= 1) {
+      const sockets = await io.in(roomID).fetchSockets();
+      if (sockets.length <= 1) {
         io.to(`${socket.id}`).emit("first-in-room");
       } else {
+        socketDebug(`${socket.id} new-user emitted to room ${roomID}`);
         socket.broadcast.to(roomID).emit("new-user", socket.id);
       }
+
       io.in(roomID).emit(
         "room-user-change",
-      Object.keys(io.sockets.adapter.rooms[roomID].sockets)
+        sockets.map((socket) => socket.id),
       );
     });
 
@@ -50,7 +65,7 @@ io.on("connection", (socket) => {
       (roomID: string, encryptedData: ArrayBuffer, iv: Uint8Array) => {
         socketDebug(`${socket.id} sends update to ${roomID}`);
         socket.broadcast.to(roomID).emit("client-broadcast", encryptedData, iv);
-    }
+      },
     );
 
     socket.on(
@@ -60,22 +75,30 @@ io.on("connection", (socket) => {
         socket.volatile.broadcast
           .to(roomID)
           .emit("client-broadcast", encryptedData, iv);
-    }
+      },
     );
 
-  socket.on("disconnecting", () => {
+    socket.on("disconnecting", async () => {
-    const rooms = io.sockets.adapter.rooms;
+      socketDebug(`${socket.id} has disconnected`);
       for (const roomID in socket.rooms) {
-      const clients = Object.keys(rooms[roomID].sockets).filter(
+        const otherClients = (await io.in(roomID).fetchSockets()).filter(
-        (id) => id !== socket.id
+          (_socket) => _socket.id !== socket.id,
+        );
+
+        if (otherClients.length > 0) {
+          socket.broadcast.to(roomID).emit(
+            "room-user-change",
+            otherClients.map((socket) => socket.id),
           );
-      if (clients.length > 0) {
-        socket.broadcast.to(roomID).emit("room-user-change", clients);
         }
       }
     });
 
     socket.on("disconnect", () => {
       socket.removeAllListeners();
+      socket.disconnect();
     });
-});
+  });
+} catch (error) {
+  console.error(error);
+}