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"
+ }
+}