socketio · qzhang1 · Dec 23, 2023 · Dec 23, 2023
diff --git a/examples/react-private-messaging/.eslintrc.cjs b/examples/react-private-messaging/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/react-private-messaging/.gitignore b/examples/react-private-messaging/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react-private-messaging/LICENSE b/examples/react-private-messaging/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 qzhang1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/react-private-messaging/README.md b/examples/react-private-messaging/README.md
@@ -0,0 +1,23 @@
+# Private Message in React + Vite
+
+This is an implementation of the Private messaging example in React following
+Socket.io recommendations https://socket.io/how-to/use-with-react
+
+## Running the frontend
+
+```
+npm install
+npm run dev
+```
+
+### Running the server
+
+```
+cd server
+npm install
+npm start
+```
+
+Here's what the interface looks like
+![Alt text](image.png)
+
diff --git a/examples/react-private-messaging/image.png b/examples/react-private-messaging/image.png
diff --git a/examples/react-private-messaging/index.html b/examples/react-private-messaging/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />    
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Socket.io</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react-private-messaging/package.json b/examples/react-private-messaging/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "basic-crud-socket-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/examples/react-private-messaging/server/cluster.js b/examples/react-private-messaging/server/cluster.js
@@ -0,0 +1,31 @@
+const cluster = require("cluster");
+const http = require("http");
+const { setupMaster } = require("@socket.io/sticky");
+
+const WORKERS_COUNT = 4;
+
+if (cluster.isMaster) {
+  console.log(`Master ${process.pid} is running`);
+
+  for (let i = 0; i < WORKERS_COUNT; i++) {
+    cluster.fork();
+  }
+
+  cluster.on("exit", (worker) => {
+    console.log(`Worker ${worker.process.pid} died`);
+    cluster.fork();
+  });
+
+  const httpServer = http.createServer();
+  setupMaster(httpServer, {
+    loadBalancingMethod: "least-connection", // either "random", "round-robin" or "least-connection"
+  });
+  const PORT = process.env.PORT || 3000;
+
+  httpServer.listen(PORT, () =>
+    console.log(`server listening at http://localhost:${PORT}`)
+  );
+} else {
+  console.log(`Worker ${process.pid} started`);
+  require("./index");
+}
diff --git a/examples/react-private-messaging/server/docker-compose.yml b/examples/react-private-messaging/server/docker-compose.yml
@@ -0,0 +1,7 @@
+version: "3"
+
+services:
+  redis:
+    image: redis:5
+    ports:
+      - "6379:6379"
diff --git a/examples/react-private-messaging/server/index.js b/examples/react-private-messaging/server/index.js
@@ -0,0 +1,125 @@
+const httpServer = require("http").createServer();
+const Redis = require("ioredis");
+const redisClient = new Redis();
+const io = require("socket.io")(httpServer, {
+  cors: {
+    origin: "http://localhost:8080",
+  },
+  adapter: require("socket.io-redis")({
+    pubClient: redisClient,
+    subClient: redisClient.duplicate(),
+  }),
+});
+
+const { setupWorker } = require("@socket.io/sticky");
+const crypto = require("crypto");
+const randomId = () => crypto.randomBytes(8).toString("hex");
+
+const { RedisSessionStore } = require("./sessionStore");
+const sessionStore = new RedisSessionStore(redisClient);
+
+const { RedisMessageStore } = require("./messageStore");
+const messageStore = new RedisMessageStore(redisClient);
+
+io.use(async (socket, next) => {
+  const sessionID = socket.handshake.auth.sessionID;
+  if (sessionID) {
+    const session = await sessionStore.findSession(sessionID);
+    if (session) {
+      socket.sessionID = sessionID;
+      socket.userID = session.userID;
+      socket.username = session.username;
+      return next();
+    }
+  }
+  const username = socket.handshake.auth.username;
+  if (!username) {
+    return next(new Error("invalid username"));
+  }
+  socket.sessionID = randomId();
+  socket.userID = randomId();
+  socket.username = username;
+  next();
+});
+
+io.on("connection", async (socket) => {
+  // persist session
+  sessionStore.saveSession(socket.sessionID, {
+    userID: socket.userID,
+    username: socket.username,
+    connected: true,
+  });
+
+  // emit session details
+  socket.emit("session", {
+    sessionID: socket.sessionID,
+    userID: socket.userID,
+  });
+
+  // join the "userID" room
+  socket.join(socket.userID);
+
+  // fetch existing users
+  const users = [];
+  const [messages, sessions] = await Promise.all([
+    messageStore.findMessagesForUser(socket.userID),
+    sessionStore.findAllSessions(),
+  ]);
+  const messagesPerUser = new Map();
+  messages.forEach((message) => {
+    const { from, to } = message;
+    const otherUser = socket.userID === from ? to : from;
+    if (messagesPerUser.has(otherUser)) {
+      messagesPerUser.get(otherUser).push(message);
+    } else {
+      messagesPerUser.set(otherUser, [message]);
+    }
+  });
+
+  sessions.forEach((session) => {
+    users.push({
+      userID: session.userID,
+      username: session.username,
+      connected: session.connected,
+      messages: messagesPerUser.get(session.userID) || [],
+    });
+  });
+  socket.emit("users", users);
+
+  // notify existing users
+  socket.broadcast.emit("user connected", {
+    userID: socket.userID,
+    username: socket.username,
+    connected: true,
+    messages: [],
+  });
+
+  // forward the private message to the right recipient (and to other tabs of the sender)
+  socket.on("private message", ({ content, to }) => {
+    const message = {
+      content,
+      from: socket.userID,
+      to,
+    };
+    socket.to(to).to(socket.userID).emit("private message", message);
+    messageStore.saveMessage(message);
+  });
+
+  // notify users upon disconnection
+  socket.on("disconnect", async () => {
+    const matchingSockets = await io.in(socket.userID).allSockets();
+    const isDisconnected = matchingSockets.size === 0;
+    if (isDisconnected) {
+      // notify other users
+      socket.broadcast.emit("user disconnected", socket.userID);
+      // update the connection status of the session
+      sessionStore.saveSession(socket.sessionID, {
+        userID: socket.userID,
+        username: socket.username,
+        connected: false,
+      });
+    }
+  });
+});
+
+setupWorker(io);
diff --git a/examples/react-private-messaging/server/messageStore.js b/examples/react-private-messaging/server/messageStore.js
@@ -0,0 +1,54 @@
+/* abstract */ class MessageStore {
+  saveMessage(message) {}
+  findMessagesForUser(userID) {}
+}
+
+class InMemoryMessageStore extends MessageStore {
+  constructor() {
+    super();
+    this.messages = [];
+  }
+
+  saveMessage(message) {
+    this.messages.push(message);
+  }
+
+  findMessagesForUser(userID) {
+    return this.messages.filter(
+      ({ from, to }) => from === userID || to === userID
+    );
+  }
+}
+
+const CONVERSATION_TTL = 24 * 60 * 60;
+
+class RedisMessageStore extends MessageStore {
+  constructor(redisClient) {
+    super();
+    this.redisClient = redisClient;
+  }
+
+  saveMessage(message) {
+    const value = JSON.stringify(message);
+    this.redisClient
+      .multi()
+      .rpush(`messages:${message.from}`, value)
+      .rpush(`messages:${message.to}`, value)
+      .expire(`messages:${message.from}`, CONVERSATION_TTL)
+      .expire(`messages:${message.to}`, CONVERSATION_TTL)
+      .exec();
+  }
+
+  findMessagesForUser(userID) {
+    return this.redisClient
+      .lrange(`messages:${userID}`, 0, -1)
+      .then((results) => {
+        return results.map((result) => JSON.parse(result));
+      });
+  }
+}
+
+module.exports = {
+  InMemoryMessageStore,
+  RedisMessageStore,
+};
diff --git a/examples/react-private-messaging/server/package.json b/examples/react-private-messaging/server/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node cluster.js"
+  },
+  "author": "Damien Arrachequesne <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@socket.io/sticky": "^1.0.0",
+    "ioredis": "^4.22.0",
+    "socket.io": "^4.0.0",
+    "socket.io-redis": "^6.0.1"
+  }
+}