docs(examples): 1st part of the "private messaging" example

socketio · Feb 9, 2021 · 8b404f4 · 8b404f4
1 parent 12221f2
commit 8b404f4
Show file tree

Hide file tree

Showing 17 changed files with 631 additions and 0 deletions.
diff --git a/examples/private-messaging/.gitignore b/examples/private-messaging/.gitignore
@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+package-lock.json
diff --git a/examples/private-messaging/README.md b/examples/private-messaging/README.md
@@ -0,0 +1,23 @@
+# Private messaging with Socket.IO
+
+Please read the related guide:
+
+- [Part I](https://socket.io/get-started/private-messaging-part-1/): initial implementation
+- [Part II](https://socket.io/get-started/private-messaging-part-2/): persistent user ID
+- [Part III](https://socket.io/get-started/private-messaging-part-3/): persistent messages
+- [Part IV](https://socket.io/get-started/private-messaging-part-4/): scaling up
+
+## Running the frontend
+
+```
+npm install
+npm run serve
+```
+
+### Running the server
+
+```
+cd server
+npm install
+npm start
+```
diff --git a/examples/private-messaging/babel.config.js b/examples/private-messaging/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/examples/private-messaging/package.json b/examples/private-messaging/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "private-messaging",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "socket.io-client": "^3.1.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/examples/private-messaging/public/favicon.ico b/examples/private-messaging/public/favicon.ico
diff --git a/examples/private-messaging/public/fonts/Lato-Regular.ttf b/examples/private-messaging/public/fonts/Lato-Regular.ttf
diff --git a/examples/private-messaging/public/index.html b/examples/private-messaging/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>Private messaging with Socket.IO</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/private-messaging/server/index.js b/examples/private-messaging/server/index.js
@@ -0,0 +1,52 @@
+const httpServer = require("http").createServer();
+const io = require("socket.io")(httpServer, {
+  cors: {
+    origin: "http://localhost:8080",
+  },
+});
+
+io.use((socket, next) => {
+  const username = socket.handshake.auth.username;
+  if (!username) {
+    return next(new Error("invalid username"));
+  }
+  socket.username = username;
+  next();
+});
+
+io.on("connection", (socket) => {
+  // fetch existing users
+  const users = [];
+  for (let [id, socket] of io.of("/").sockets) {
+    users.push({
+      userID: id,
+      username: socket.username,
+    });
+  }
+  socket.emit("users", users);
+
+  // notify existing users
+  socket.broadcast.emit("user connected", {
+    userID: socket.id,
+    username: socket.username,
+  });
+
+  // forward the private message to the right recipient
+  socket.on("private message", ({ content, to }) => {
+    socket.to(to).emit("private message", {
+      content,
+      from: socket.id,
+    });
+  });
+
+  // notify users upon disconnection
+  socket.on("disconnect", () => {
+    socket.broadcast.emit("user disconnected", socket.id);
+  });
+});
+
+const PORT = process.env.PORT || 3000;
+
+httpServer.listen(PORT, () =>
+  console.log(`server listening at http://localhost:${PORT}`)
+);
diff --git a/examples/private-messaging/server/package.json b/examples/private-messaging/server/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "Damien Arrachequesne <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "socket.io": "^3.1.1"
+  }
+}
diff --git a/examples/private-messaging/src/App.vue b/examples/private-messaging/src/App.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="app">
+    <select-username
+      v-if="!usernameAlreadySelected"
+      @input="onUsernameSelection"
+    />
+    <chat v-else />
+  </div>
+</template>
+
+<script>
+import SelectUsername from "./components/SelectUsername";
+import Chat from "./components/Chat";
+import socket from "./socket";
+
+export default {
+  name: "App",
+  components: {
+    Chat,
+    SelectUsername,
+  },
+  data() {
+    return {
+      usernameAlreadySelected: false,
+    };
+  },
+  methods: {
+    onUsernameSelection(username) {
+      this.usernameAlreadySelected = true;
+      socket.auth = { username };
+      socket.connect();
+    },
+  },
+  created() {
+    socket.on("connect_error", (err) => {
+      if (err.message === "invalid username") {
+        this.usernameAlreadySelected = false;
+      }
+    });
+  },
+  destroyed() {
+    socket.off("connect_error");
+  },
+};
+</script>
+
+<style>
+body {
+  margin: 0;
+}
+
+@font-face {
+  font-family: Lato;
+  src: url("/fonts/Lato-Regular.ttf");
+}
+
+#app {
+  font-family: Lato, Arial, sans-serif;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/private-messaging/src/components/Chat.vue b/examples/private-messaging/src/components/Chat.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div class="left-panel">
+      <user
+        v-for="user in users"
+        :key="user.userID"
+        :user="user"
+        :selected="selectedUser === user"
+        @select="onSelectUser(user)"
+      />
+    </div>
+    <message-panel
+      v-if="selectedUser"
+      :user="selectedUser"
+      @input="onMessage"
+      class="right-panel"
+    />
+  </div>
+</template>
+
+<script>
+import socket from "../socket";
+import User from "./User";
+import MessagePanel from "./MessagePanel";
+
+export default {
+  name: "Chat",
+  components: { User, MessagePanel },
+  data() {
+    return {
+      selectedUser: null,
+      users: [],
+    };
+  },
+  methods: {
+    onMessage(content) {
+      if (this.selectedUser) {
+        socket.emit("private message", {
+          content,
+          to: this.selectedUser.userID,
+        });
+        this.selectedUser.messages.push({
+          content,
+          fromSelf: true,
+        });
+      }
+    },
+    onSelectUser(user) {
+      this.selectedUser = user;
+      user.hasNewMessages = false;
+    },
+  },
+  created() {
+    socket.on("connect", () => {
+      this.users.forEach((user) => {
+        if (user.self) {
+          user.connected = true;
+        }
+      });
+    });
+
+    socket.on("disconnect", () => {
+      this.users.forEach((user) => {
+        if (user.self) {
+          user.connected = false;
+        }
+      });
+    });
+
+    const initReactiveProperties = (user) => {
+      user.connected = true;
+      user.messages = [];
+      user.hasNewMessages = false;
+    };
+
+    socket.on("users", (users) => {
+      users.forEach((user) => {
+        user.self = user.userID === socket.id;
+        initReactiveProperties(user);
+      });
+      // put the current user first, and sort by username
+      this.users = users.sort((a, b) => {
+        if (a.self) return -1;
+        if (b.self) return 1;
+        if (a.username < b.username) return -1;
+        return a.username > b.username ? 1 : 0;
+      });
+    });
+
+    socket.on("user connected", (user) => {
+      initReactiveProperties(user);
+      this.users.push(user);
+    });
+
+    socket.on("user disconnected", (id) => {
+      for (let i = 0; i < this.users.length; i++) {
+        const user = this.users[i];
+        if (user.userID === id) {
+          user.connected = false;
+          break;
+        }
+      }
+    });
+
+    socket.on("private message", ({ content, from }) => {
+      for (let i = 0; i < this.users.length; i++) {
+        const user = this.users[i];
+        if (user.userID === from) {
+          user.messages.push({
+            content,
+            fromSelf: false,
+          });
+          if (user !== this.selectedUser) {
+            user.hasNewMessages = true;
+          }
+          break;
+        }
+      }
+    });
+  },
+  destroyed() {
+    socket.off("connect");
+    socket.off("disconnect");
+    socket.off("users");
+    socket.off("user connected");
+    socket.off("user disconnected");
+    socket.off("private message");
+  },
+};
+</script>
+
+<style scoped>
+.left-panel {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 260px;
+  overflow-x: hidden;
+  background-color: #3f0e40;
+  color: white;
+}
+
+.right-panel {
+  margin-left: 260px;
+}
+</style>