chore: bump socket.io to 4.0.1

package.json

@@ -5,16 +5,16 @@
     "@types/debug": "4.1.5",
     "@types/express": "4.17.11",
     "@types/node": "14.14.31",
-    "@types/socket.io": "2.1.4",
     "@typescript-eslint/eslint-plugin": "4.16.1",
     "@typescript-eslint/parser": "4.16.1",
+    "cross-env": "^7.0.3",
     "debug": "4.3.1",
     "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": "2.3.0",
+    "socket.io": "4.0.1",
     "ts-node-dev": "1.1.6",
     "typescript": "4.2.3"
   },
@@ -29,7 +29,7 @@
     "fix": "yarn fix:other && yarn fix:code",
     "prettier": "prettier . --ignore-path=.gitignore",
     "start": "node dist/index.js",
-    "start:dev": "ts-node-dev --respawn --transpile-only src/index.ts",
+    "start:dev": "cross-env PORT=3001 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"

src/index.ts

@@ -1,7 +1,7 @@
 import debug from "debug";
 import express from "express";
 import http from "http";
-import socketIO from "socket.io";
+import { Server as socketIO } from "socket.io";
 
 const serverDebug = debug("server");
 const ioDebug = debug("io");
@@ -22,16 +22,14 @@ server.listen(port, () => {
   serverDebug(`listening on port: ${port}`);
 });
 
-const io = socketIO(server, {
-  handlePreflightRequest: (req, res) => {
-    const headers = {
-      "Access-Control-Allow-Headers": "Content-Type, Authorization",
-      "Access-Control-Allow-Origin":
-        (req.header && req.header.origin) || "https://excalidraw.com",
-      "Access-Control-Allow-Credentials": true,
-    };
-    res.writeHead(200, headers);
-    res.end();
+const io = new socketIO(server, {
+  allowEIO3: true, // backwards compat with v2 clients
+  cors: {
+    allowedHeaders: ["Content-Type", "Authorization"],
+    credentials: true,
+    origin: (origin, callback) => {
+      return callback(null, origin || "https://excalidraw.com");
+    },
   },
 });
 
@@ -41,14 +39,14 @@ io.on("connection", (socket) => {
   socket.on("join-room", (roomID) => {
     socketDebug(`${socket.id} has joined ${roomID}`);
     socket.join(roomID);
-    if (io.sockets.adapter.rooms[roomID].length <= 1) {
+    if (io.sockets.adapter.rooms.get(roomID)!.size <= 1) {
       io.to(`${socket.id}`).emit("first-in-room");
     } else {
       socket.broadcast.to(roomID).emit("new-user", socket.id);
     }
     io.in(roomID).emit(
       "room-user-change",
-      Object.keys(io.sockets.adapter.rooms[roomID].sockets),
+      Array.from(io.sockets.adapter.rooms.get(roomID)?.values() || []),
     );
   });
 
@@ -72,8 +70,8 @@ io.on("connection", (socket) => {
 
   socket.on("disconnecting", () => {
     const rooms = io.sockets.adapter.rooms;
-    for (const roomID in socket.rooms) {
-      const clients = Object.keys(rooms[roomID].sockets).filter(
+    for (const roomID of socket.rooms) {
+      const clients = Array.from(rooms.get(roomID)?.values() || []).filter(
         (id) => id !== socket.id,
       );
       if (clients.length > 0) {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,