create updater socket

Author: maxchistt

client/src/Hooks/useUpdaterSocket.hook.js

@@ -0,0 +1,69 @@
+/**@file useUpdaterSocket.hook.js */
+import { useCallback } from "react"
+import useWebSocket from 'react-use-websocket'
+import useDebouncedFunction from "./useDebouncedFunction.hook"
+import { useHttp } from "./http.hook"
+
+const WS_PORT = process.env.WS_PORT || 3030
+
+/**
+ * Хук веб-сокета обновления данных
+ * @param {void} updateData 
+ * @param {*} auth 
+ */
+function useUpdaterSocket(updateData, auth) {
+    const { request } = useHttp()
+    const getSocketUrl = useCallback(async () => {
+        return new Promise(resolve => {
+            request("/getIp")
+                .then((data) => {
+                    const ip = data.ip
+                    const socketAddress = "ws://" + (ip || "localhost") + ":" + WS_PORT
+                    console.log("socketAddress", socketAddress)
+                    resolve(socketAddress)
+                })
+                .catch((err) => console.log(err))
+        })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+    const debouncedUpdate = useDebouncedFunction(updateData, 200)
+
+    const socketOptions = {
+        onOpen: (e) => {
+            sendRegisterMsg()
+            console.log("ws open", e)
+        },
+        onClose: (e) => {
+            console.log("ws close", e)
+        },
+        onMessage: (e) => {
+            console.log("ws updMessage", e)
+            debouncedUpdate()
+        },
+        onError: (e) => {
+            console.error("ws error", e)
+        },
+    }
+
+    const { sendMessage } = useWebSocket(getSocketUrl, socketOptions)
+
+    const sendMsg = (target) => {
+        const msg = JSON.stringify({
+            userId: auth.userId,
+            target
+        })
+        sendMessage(msg)
+    }
+
+    function sendUpdateMsg() {
+        sendMsg("update")
+    }
+
+    function sendRegisterMsg() {
+        sendMsg("register")
+    }
+
+    return [sendUpdateMsg]
+}
+
+export default useUpdaterSocket

client/src/Pages/NotesPage.js

@@ -17,6 +17,7 @@ import useFetchNotes from '../Hooks/useFetchNotes.hook'
 import useEditNoteId from '../Hooks/useEditNoteId.hook'
 import useNotesArr from '../Hooks/useNotesArr.hook'
 import { calcOrder, fixOrders } from '../Shared/order'
+import useUpdaterSocket from '../Hooks/useUpdaterSocket.hook'
 
 /**
  * Страница с заметками 
@@ -52,6 +53,9 @@ function NotesPage() {
     /** подключение контроллера обновления данных */
     const [updateData] = useDataLoadingController(loadDataFromServer, setLoadedNotes, auth, 60)
 
+    /** подключение сокета обновления данных */
+    const [sendUpdateMsg] = useUpdaterSocket(updateData, auth)
+
     ///////////
 
     /**
@@ -67,7 +71,7 @@ function NotesPage() {
      * @param {string} target 
      */
     function loadDataToServer(note = new Note(), target = 'set') {
-        fetchNotes(target, "POST", { note })
+        fetchNotes(target, "POST", { note }, sendUpdateMsg)
     }
 
     ///////////

jsdoc.json

@@ -6,6 +6,7 @@
       "server/routes",
       "server/models",
       "server/middleware",
+      "server/socket",
       "client",
       "client/src",
       "client/src/Shared",

server/app.js

@@ -5,30 +5,35 @@
 
 const express = require('express')
 const path = require('path')
-const dns = require('dns')
 const os = require('os')
 const mongoose = require('mongoose')
 const https = require('./middleware/https.middleware')
+const startWSS = require('./socket/wss')
 require('dotenv').config()
 
-/**
- * подключение переменных среды
- */
+//подключение переменных среды
 const devMode = process.env.NODE_ENV === "dev"
 const PORT = process.env.PORT || 5000
 const mongoUri = process.env.mongoUri
 const httpsRedirect = process.env.httpsRedirect || false
+const WS_PORT = process.env.WS_PORT || 3030
 
 const app = express()
 
 app.use(express.json({ extended: true }))
 
+app.get('/getIp', (req, res) => {
+    const ip = getIp()
+    res.status(200).json({ ip })
+})
+
 /**
  * подключение роутов
  */
 app.use('/api/auth', require('./routes/auth.routes'))
 app.use('/api/notes', require('./routes/notes.routes'))
 
+
 if (httpsRedirect) app.use(https)
 
 /**
@@ -52,6 +57,7 @@ if (!devMode) {
 async function start() {
     try {
         connectMongo(mongoUri)
+        startWSS(WS_PORT)
         app.listen(PORT, logServerStart)
     } catch (e) {
         console.log('Server Error', e.message)
@@ -81,11 +87,18 @@ async function connectMongo(mongoUri) {
  * Вывод информации о сервере
  */
 function logServerStart() {
-    dns.lookup(os.hostname(), (err, address) => {
-        const [logName, sBef, sAft] = devMode ? ['Express server', ' ', ':'] : ['React Notes App', '-', '']
-        console.log(`\n${logName} has been started`)
-        console.log(`${sBef} Local${sAft}            http://localhost:${PORT}`)
-        console.log(`${sBef} On Your Network${sAft}  http://${address}:${PORT}`)
-        if (err) console.log(err)
-    })
+    const [logName, sBef, sAft] = devMode ? ['Express server', ' ', ':'] : ['React Notes App', '-', '']
+    console.log(`\n${logName} has been started`)
+    console.log(`${sBef} Local${sAft}            http://localhost:${PORT}`)
+    console.log(`${sBef} On Your Network${sAft}  http://${getIp()}:${PORT}`, '\n')
+}
+
+/**
+ * Получение ip сервера
+ */
+function getIp() {
+    for (let key in os.networkInterfaces()) {
+        const addr = os.networkInterfaces()[key][1].address
+        if (addr != undefined) return addr
+    }
 }

server/socket/wss.js

@@ -0,0 +1,71 @@
+/**@file wss.js */
+const WebSocket = require('ws')
+
+/**
+ * Подключение WebSocket сервера
+ * @param {*} port 
+ */
+function startWSS(port) {
+    let wsCount = 0
+    const wsServer = new WebSocket.Server({ port })
+    const wsCollection = { test: [] }
+    wsServer.on('connection', (wsClient) => {
+        wsClient.num = ++wsCount
+        wsClient.on("message", (data) => {
+            try {
+                const { userId, target } = tryParce(data)
+
+                if (target == "register") {
+                    wsClient.userId = userId
+                    let clients = getClients(userId)
+                    clients.push({
+                        num: wsClient.num,
+                        send: wsClient.send
+                    })
+                    wsCollection[userId] = clients
+
+                    console.log("\ncollection \n", wsCollection, '\n')
+                }
+
+                if (target == "update") {
+                    getClients(wsClient.userId).forEach((wsc) => {
+                        if ((wsClient.num === undefined) || (wsClient.num !== wsc.num)) wsc.send(data)
+                    })
+                }
+
+                console.log("wsClient", wsClient.num, "messaged", target)
+            } catch (e) {
+                console.log("wsClient", wsClient.num, "error on messsage", e)
+            }
+        })
+        wsClient.on("open", () => console.log("wsClient", wsClient.num, "opened"))
+        wsClient.on("close", () => {
+            wsCollection[wsClient.userId] = getClients(wsClient.userId).filter((wsc) => {
+                return (wsClient.num === undefined) || (wsClient.num !== wsc.num)
+            })
+            console.log("wsClient", wsClient.num, "closed")
+        })
+        wsClient.on("error", () => console.log("wsClient", wsClient.num, "error"))
+
+        console.log("WSS connection", wsClient.num)
+    });
+    wsServer.on("close", () => console.log("WSS closed"))
+    wsServer.on("error", () => console.log("WSS error"))
+    wsServer.on("listening", () => console.log("WSS listening"))
+
+    /**
+     * Получение колекции соединений по id
+     * @param {string} userId 
+     * @returns {Array<WebSocket>}
+     */
+    function getClients(userId) {
+        return wsCollection[userId] || []
+    }
+
+    function tryParce(str) {
+        try { return JSON.parse(str) }
+        catch (e) { return str }
+    }
+}
+
+module.exports = startWSS