socket push notification

Signed-off-by: maulana saputra <[email protected]>

README.md

@@ -15,6 +15,12 @@ production
 
 open browser menggunakan https dengan domain https://mern-excercise.local
 
+message broker http://localhost:15672
+`$ user : user`
+`$ pass : password`
+
+websocket http://localhost:8080
+
 ### reference
 - [MERN Stack](https://github.com/bradtraversy/devconnector_2.0)
 - [local ssl](https://hackerrdave.com/https-local-docker-nginx/)

backend/config/messageBroker.js

@@ -12,11 +12,14 @@ const connect = async () => {
   }
 };
 
-const consume = async () => {
+const consume = async (socket) => {
   try {
     connect().then(channel => {
       channel.assertQueue('notification', { durable: false });
-      channel.consume('notification', msg => console.log('- Received', msg.content.toString()), { noAck: true });
+      channel.consume('notification', msg => {
+        console.log('- Received', msg.content.toString());
+        socket.emit('notification', msg.content.toString());
+      }, { noAck: true });
     });
     console.log("RabbitMQ Consume...");
   } catch (err) {

backend/package.json

@@ -5,12 +5,14 @@
     "bcryptjs": "^2.4.3",
     "config": "^3.3.7",
     "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
     "express": "^4.18.1",
     "express-validator": "^6.14.2",
     "gravatar": "^1.8.2",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^6.5.3",
-    "normalize-url": "^5.3.0"
+    "normalize-url": "^5.3.0",
+    "socket.io": "^4.5.3"
   },
   "devDependencies": {
     "concurrently": "^7.4.0",

backend/server.js

@@ -7,8 +7,15 @@ const app = express();
 db.connect();
 db.open();
 
+const cors = require('cors');
+app.use(cors());
+
+const server = app.listen(8080, () => console.log("WebSocket Connected..."));
+const io = require('socket.io')(server, {cors: {origin: "*"}});
+const socket = io.of('/');
+
 messageBroker.connect();
-messageBroker.consume();
+messageBroker.consume(socket);
 
 app.use(cookieParser());
 app.use(express.json());

docker-compose.dev.yml

@@ -28,6 +28,8 @@ services:
     volumes:
       - ./backend/:/app
       - /app/node_modules
+    ports:
+      - 8080:8080
     restart: unless-stopped
     depends_on:
       - mongo

docker-compose.yml

@@ -28,6 +28,8 @@ services:
     volumes:
       - ./backend/:/app
       - /app/node_modules
+    ports:
+      - 8080:8080
     restart: unless-stopped
     depends_on:
       - mongo

frontend/package.json

@@ -15,6 +15,7 @@
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
+    "socket.io-client": "^4.5.3",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import io from 'socket.io-client';
 import Navbar from './components/layout/Navbar';
 import Landing from './components/layout/Landing';
 import Register from './components/auth/Register';
@@ -15,6 +16,7 @@ import Posts from './components/posts/Posts';
 import Post from './components/post/Post';
 import NotFound from './components/layout/NotFound';
 import PrivateRoute from './components/routing/PrivateRoute';
+import { setAlert } from './actions/alert';
 
 // Redux
 import { Provider } from 'react-redux';
@@ -24,9 +26,14 @@ import { loadUser } from './actions/auth';
 import './App.css';
 
 const App = () => {
+  const socket = io("http://localhost:8080");
   useEffect(() => {
     // will get a 401 response from our API
     store.dispatch(loadUser());
+    socket.on("notification", (response) => {
+      const result = JSON.parse(response);
+      store.dispatch(setAlert(result.message, "success"));
+    });
   }, []);
 
   return (