✨ NEW: websocket

Author: rifandani

src/scripts/index.js

@@ -13,7 +13,7 @@ import '../styles/resto-fav.css';
 // js
 import App from './views/App';
 import swRegister from './utils/sw-register';
-import WebSocketInitiator from './utils/websocket-initiator';
+import { WebSocketInitiator } from './utils/websocket-initiator';
 import CONFIG from './global/config';
 // components
 import './components/navbar';

src/scripts/utils/post-review.js

@@ -30,7 +30,10 @@ const PostReview = async (url, name, review) => {
 
   // POST review
   const reviewResponse = await RestaurantSource.postRestaurantReview(dataInput);
-  console.log(reviewResponse);
+  console.log(
+    '🚀 ~ file: post-review.js ~ line 33 ~ PostReview ~ reviewResponse',
+    reviewResponse,
+  );
 
   // append newReview to the review container
   reviewContainer.innerHTML += newReview;

src/scripts/utils/websocket-initiator.js

@@ -1,20 +1,24 @@
 import WebsocketNotif from './websocket-notif';
 
+let socket = null;
+
 const WebSocketInitiator = {
   init(url) {
-    const ws = new WebSocket(url);
-    console.log('ws connected to ', ws.url);
+    socket = new WebSocket(url);
+    console.log('ws connected to => ', socket.url);
 
-    ws.onmessage = this._onMessageHandler;
+    socket.onmessage = this._onMessageHandler;
   },
 
   _onMessageHandler(message) {
-    console.log('websocket onmessage handler => ', message.data);
+    console.log('websocket onmessage handler => ', message);
+
+    const reviewData = JSON.parse(message.data);
 
     WebsocketNotif.sendNotification({
-      title: 'Welcome to Resto',
+      title: reviewData.name,
       options: {
-        body: 'Our restaurants offer more than just great food',
+        body: reviewData.review,
         icon: 'icons/192x192.png',
         image: 'https://i.ibb.co/nBh3jrM/roompy-android-web.png',
         vibrate: [200, 100, 200],
@@ -23,4 +27,10 @@ const WebSocketInitiator = {
   },
 };
 
-export default WebSocketInitiator;
+const sendDataToWebsocket = (reviewData) => {
+  const data = JSON.stringify(reviewData);
+
+  socket.send(data);
+};
+
+export { WebSocketInitiator, sendDataToWebsocket };

src/scripts/views/pages/detail.js

@@ -5,6 +5,7 @@ import restoDetail from '../templates/resto-detail';
 import LikeButtonInitiator from '../../utils/like-button-initiator';
 import PostReview from '../../utils/post-review';
 import { initSwalError } from '../../utils/swal-initiator';
+import { sendDataToWebsocket } from '../../utils/websocket-initiator';
 
 const Detail = {
   async render() {
@@ -79,6 +80,12 @@ const Detail = {
         // POST review
         await PostReview(url, nameInput.value, reviewInput.value);
 
+        // Send message to websocket server
+        sendDataToWebsocket({
+          name: nameInput.value,
+          review: reviewInput.value,
+        });
+
         // clear form input
         nameInput.value = '';
         reviewInput.value = '';