fixed bug: all sockets are now grouped in their respective rooms

MaibornWolff · Mar 29, 2019 · c1ced27 · c1ced27
1 parent 8e16d67
commit c1ced27
Show file tree

Hide file tree

Showing 17 changed files with 75 additions and 74 deletions.
diff --git a/backend/src/events/board-events.js b/backend/src/events/board-events.js
@@ -10,25 +10,25 @@ const {
 
 const UTF8 = "utf8";
 
-const createBoard = (io, client) => {
+const createBoard = (io, client, roomId) => {
   client.on(CREATE_BOARD, async (board, boardId) => {
     await fs.writeFile(getPath(boardId), stringify(board), UTF8, error => {
       if (error) logError(CREATE_BOARD, error);
-      io.sockets.emit(CREATE_BOARD, board);
+      io.to(roomId).emit(CREATE_BOARD, board);
     });
   });
 };
 
-const updateBoard = (io, client) => {
+const updateBoard = (io, client, roomId) => {
   client.on(UPDATE_BOARD, async (board, boardId) => {
     await fs.writeFile(getPath(boardId), stringify(board), UTF8, error => {
       if (error) logError(UPDATE_BOARD, error);
-      io.sockets.emit(UPDATE_BOARD, board);
+      io.to(roomId).emit(UPDATE_BOARD, board);
     });
   });
 };
 
-const joinBoard = (io, client) => {
+const joinBoard = (io, client, roomId) => {
   client.on(JOIN_BOARD, async boardId => {
     await fs.readFile(getPath(boardId), UTF8, (error, file) => {
       if (error) logError(JOIN_BOARD, error);
@@ -37,7 +37,7 @@ const joinBoard = (io, client) => {
   });
 };
 
-const unblurCards = (io, client) => {
+const unblurCards = (io, client, roomId) => {
   client.on(UNBLUR_CARDS, async boardId => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -51,7 +51,7 @@ const unblurCards = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(UNBLUR_CARDS, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });

diff --git a/backend/src/events/card-events.js b/backend/src/events/card-events.js
@@ -13,7 +13,7 @@ const {
 
 const UTF8 = "utf8";
 
-const createCard = (io, client) => {
+const createCard = (io, client, roomId) => {
   client.on(CREATE_CARD, async (card, columnId, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -26,13 +26,13 @@ const createCard = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(CREATE_CARD, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const deleteCard = (io, client) => {
+const deleteCard = (io, client, roomId) => {
   client.on(DELETE_CARD, async (cardId, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -44,13 +44,13 @@ const deleteCard = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(DELETE_CARD, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const editCard = (io, client) => {
+const editCard = (io, client, roomId) => {
   client.on(EDIT_CARD, async (author, content, cardId, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -63,13 +63,13 @@ const editCard = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(EDIT_CARD, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const upvoteCard = (io, client) => {
+const upvoteCard = (io, client, roomId) => {
   client.on(UPVOTE_CARD, async (cardId, boardId, value) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -80,7 +80,7 @@ const upvoteCard = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(UPVOTE_CARD, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });

diff --git a/backend/src/events/column-events.js b/backend/src/events/column-events.js
@@ -13,7 +13,7 @@ const {
 
 const UTF8 = "utf8";
 
-const createColumn = (io, client) => {
+const createColumn = (io, client, roomId) => {
   client.on(CREATE_COLUMN, async (column, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -25,13 +25,13 @@ const createColumn = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(CREATE_COLUMN, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const deleteColumn = (io, client) => {
+const deleteColumn = (io, client, roomId) => {
   client.on(DELETE_COLUMN, async (columnId, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -45,13 +45,13 @@ const deleteColumn = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(DELETE_COLUMN, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const sortColumn = (io, client) => {
+const sortColumn = (io, client, roomId) => {
   client.on(SORT_COLUMN, async (columnId, columnItems, boardId) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -65,13 +65,13 @@ const sortColumn = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(SORT_COLUMN, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });
 };
 
-const editColumn = (io, client) => {
+const editColumn = (io, client, roomId) => {
   client.on(EDIT_COLUMN, async (columnId, boardId, newTitle) => {
     const path = getPath(boardId);
     await fs.readFile(path, UTF8, async (error, file) => {
@@ -83,7 +83,7 @@ const editColumn = (io, client) => {
 
       await fs.writeFile(path, stringify(board), UTF8, error => {
         if (error) logError(EDIT_COLUMN, error);
-        io.sockets.emit(UPDATE_BOARD, board);
+        io.to(roomId).emit(UPDATE_BOARD, board);
       });
     });
   });

diff --git a/backend/src/events/index.js b/backend/src/events/index.js
@@ -17,25 +17,25 @@ const {
   upvoteCard
 } = require("./card-events");
 
-const boardEvents = (io, client) => {
-  createBoard(io, client);
-  updateBoard(io, client);
-  joinBoard(io, client);
-  unblurCards(io, client);
+const boardEvents = (io, client, roomId) => {
+  createBoard(io, client, roomId);
+  updateBoard(io, client, roomId);
+  joinBoard(io, client, roomId);
+  unblurCards(io, client, roomId);
 };
 
-const columnEvents = (io, client) => {
-  createColumn(io, client);
-  deleteColumn(io, client);
-  sortColumn(io, client);
-  editColumn(io, client);
+const columnEvents = (io, client, roomId) => {
+  createColumn(io, client, roomId);
+  deleteColumn(io, client, roomId);
+  sortColumn(io, client, roomId);
+  editColumn(io, client, roomId);
 };
 
-const cardEvents = (io, client) => {
-  createCard(io, client);
-  editCard(io, client);
-  deleteCard(io, client);
-  upvoteCard(io, client);
+const cardEvents = (io, client, roomId) => {
+  createCard(io, client, roomId);
+  editCard(io, client, roomId);
+  deleteCard(io, client, roomId);
+  upvoteCard(io, client, roomId);
 };
 
 module.exports = {

diff --git a/backend/src/server.js b/backend/src/server.js
@@ -58,9 +58,16 @@ app.get("/*", (req, res) => {
 });
 
 io.on(CONNECTION, client => {
-  boardEvents(io, client);
-  columnEvents(io, client);
-  cardEvents(io, client);
+  const roomId = client.handshake.query.boardId;
+  client.join(roomId);
+
+  client.on("disconnect", () => {
+    client.leave(roomId);
+  });
+
+  boardEvents(io, client, roomId);
+  columnEvents(io, client, roomId);
+  cardEvents(io, client, roomId);
 });
 
 server.listen(port, () => {

diff --git a/frontend/src/components/Board.js b/frontend/src/components/Board.js
@@ -1,13 +1,12 @@
 import React from "react";
-import io from "socket.io-client";
 import pull from "lodash/pull";
 import { Grid, withStyles } from "@material-ui/core";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 
 import BoardHeader from "./BoardHeader";
 import Columns from "./Columns";
+import { socket_connect } from "../utils";
 import { FlexContainer } from "./styled";
-import { BACKEND_ENDPOINT } from "../utils";
 import { UPDATE_BOARD } from "../events/event-names";
 import { emptyBoard } from "../utils/emptyBoard";
 import {
@@ -20,7 +19,7 @@ import {
 class Board extends React.Component {
   state = { ...emptyBoard };
 
-  socket = io(BACKEND_ENDPOINT);
+  socket = socket_connect(this.props.match.params.boardId);
 
   componentDidMount() {
     onConnect(this);

diff --git a/frontend/src/components/buttons/SortColumnButton.js b/frontend/src/components/buttons/SortColumnButton.js
@@ -1,13 +1,12 @@
 import React from "react";
-import io from "socket.io-client";
 import { IconButton, Tooltip } from "@material-ui/core";
 import SortIcon from "@material-ui/icons/Sort";
 
-import { BACKEND_ENDPOINT } from "../../utils";
+import { socket_connect } from "../../utils";
 import { SORT_COLUMN } from "../../events/event-names";
 
 const onSort = (columnId, items, boardId) => {
-  const socket = io(BACKEND_ENDPOINT);
+  const socket = socket_connect(boardId);
   socket.emit(SORT_COLUMN, columnId, items, boardId);
 };
 

diff --git a/frontend/src/components/buttons/UnblurCardsButton.js b/frontend/src/components/buttons/UnblurCardsButton.js
@@ -1,13 +1,12 @@
 import React from "react";
-import io from "socket.io-client";
 import UnblurIcon from "@material-ui/icons/BlurOff";
 import { Grid, Button } from "@material-ui/core";
 
-import { BACKEND_ENDPOINT } from "../../utils";
+import { socket_connect } from "../../utils";
 import { UNBLUR_CARDS } from "../../events/event-names";
 
 const unblur = boardId => {
-  const socket = io(BACKEND_ENDPOINT);
+  const socket = socket_connect(boardId);
   socket.emit(UNBLUR_CARDS, boardId);
 };
 

diff --git a/frontend/src/components/buttons/UpvoteItemButton.js b/frontend/src/components/buttons/UpvoteItemButton.js
@@ -1,17 +1,16 @@
 import React from "react";
-import io from "socket.io-client";
 import ThumbUpIcon from "@material-ui/icons/ThumbUp";
 import { IconButton, Tooltip } from "@material-ui/core";
 
-import { BACKEND_ENDPOINT } from "../../utils";
+import { socket_connect } from "../../utils";
 import { UPVOTE_CARD } from "../../events/event-names";
 
 const handleUpvote = (id, boardId, points) => {
   if (points >= 30) {
     alert("You reached the maximum vote count!");
   }
 
-  const socket = io(BACKEND_ENDPOINT);
+  const socket = socket_connect(boardId);
   socket.emit(UPVOTE_CARD, id, boardId, 1);
 };
 

diff --git a/frontend/src/components/dialogs/CreateBoardDialog.js b/frontend/src/components/dialogs/CreateBoardDialog.js
@@ -1,5 +1,4 @@
 import React from "react";
-import io from "socket.io-client";
 import uniqid from "uniqid";
 import AddIcon from "@material-ui/icons/Add";
 import { compose } from "recompose";
@@ -17,8 +16,8 @@ import {
   withStyles
 } from "@material-ui/core";
 
+import { socket_connect } from "../../utils";
 import { CREATE_BOARD } from "../../events/event-names";
-import { BACKEND_ENDPOINT } from "../../utils";
 import { emptyBoard } from "../../utils/emptyBoard";
 
 class CreateBoardDialog extends React.Component {
@@ -36,9 +35,9 @@ class CreateBoardDialog extends React.Component {
 
   handleSubmit = async e => {
     e.preventDefault();
-    const socket = io(BACKEND_ENDPOINT);
     const { title } = this.state;
     const boardId = uniqid("board-");
+    const socket = socket_connect(boardId);
     const isBlurred = true;
     const newBoard = { ...emptyBoard, boardId, title, isBlurred };
 

diff --git a/frontend/src/components/dialogs/CreateColumnDialog.js b/frontend/src/components/dialogs/CreateColumnDialog.js
@@ -1,5 +1,4 @@
 import React from "react";
-import io from "socket.io-client";
 import uniqid from "uniqid";
 import AddIcon from "@material-ui/icons/Add";
 import { compose } from "recompose";
@@ -14,8 +13,8 @@ import {
   withStyles
 } from "@material-ui/core";
 
+import { socket_connect } from "../../utils";
 import { CREATE_COLUMN } from "../../events/event-names";
-import { BACKEND_ENDPOINT } from "../../utils";
 
 class CreateColumnDialog extends React.Component {
   state = {
@@ -32,10 +31,10 @@ class CreateColumnDialog extends React.Component {
   handleSubmit = e => {
     e.preventDefault();
 
-    const socket = io(BACKEND_ENDPOINT);
     const id = uniqid("column-");
     const { columnTitle } = this.state;
     const { boardId } = this.props;
+    const socket = socket_connect(boardId);
     const column = { id, columnTitle, itemIds: [] };
 
     socket.emit(CREATE_COLUMN, column, boardId);

diff --git a/frontend/src/components/dialogs/CreateItemDialog.js b/frontend/src/components/dialogs/CreateItemDialog.js
@@ -1,5 +1,4 @@
 import React from "react";
-import io from "socket.io-client";
 import uniqid from "uniqid";
 import AddIcon from "@material-ui/icons/Add";
 import {
@@ -14,7 +13,7 @@ import {
   Tooltip
 } from "@material-ui/core";
 
-import { BACKEND_ENDPOINT } from "../../utils";
+import { socket_connect } from "../../utils";
 import { CREATE_CARD } from "../../events/event-names";
 
 class CreateItemDialog extends React.Component {
@@ -35,9 +34,9 @@ class CreateItemDialog extends React.Component {
   handleSubmit = e => {
     e.preventDefault();
 
-    const socket = io(BACKEND_ENDPOINT);
     const { author, content } = this.state;
     const { columnId, boardId } = this.props;
+    const socket = socket_connect(boardId);
     const id = uniqid("item-");
     const newCard = {
       id,