Add ability to scrape og meta tags on first link in chat message and show them

Author: C-Garza

server/package-lock.json

@@ -16,9 +16,11 @@
     "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
+    "open-graph-scraper": "^4.9.0",
     "peer": "^0.6.1",
     "socket.io": "^4.0.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "validator": "^13.6.0"
   },
   "devDependencies": {
     "nodemon": "^2.0.7"

server/package.json

@@ -85,9 +85,9 @@ const peerSocketConnection = (server) => {
         socket.emit("messages-list", lastMessages);
       });
 
-      socket.on("send-message", (message) => {
-        addMessage(roomID, message);
-        io.to(roomID).emit("message-received", message);
+      socket.on("send-message", async (message) => {
+        const newMessage = await addMessage(roomID, message);
+        io.to(roomID).emit("message-received", newMessage);
       });
 
       socket.on("get-older-messages", offset => {

server/sockets/peerSocket.js

@@ -1,4 +1,6 @@
 const {v4: uuidV4} = require("uuid");
+const {isURL} = require("validator");
+const ogs = require("open-graph-scraper");
 
 let messages = {};
 // messages = {
@@ -13,8 +15,28 @@ const addMessageRoom = (id) => {
 };
 
 const addMessage = (id, message) => {
-  message.id = uuidV4() + message.createdAt;
-  messages[id].messages.push(message);
+  let messageArr = message.message.replace(/\n/g, " ").split(" ");
+  let linksArray = messageArr.filter(msg => isURL(msg, {require_protocol: true}));
+
+  if(!linksArray.length) {
+    message.id = uuidV4() + message.createdAt;
+    messages[id].messages.push(message);
+    return message;
+  }
+
+  const options = {url: linksArray[0]};
+  return ogs(options).then(data => {
+    const {error, result} = data;
+    message.id = uuidV4() + message.createdAt;
+    messages[id].messages.push(message);
+    message.ogMeta = {...result};
+    return message;
+  }).catch(err => {
+    console.log(err);
+    message.id = uuidV4() + message.createdAt;
+    messages[id].messages.push(message);
+    return message;
+  });
 };
 
 const getRoomMessages = (id) => {

server/utils/messages.js

@@ -67,18 +67,22 @@ const ChatMessages = () => {
     let currentUser = messages[0];
     currentUser.message = [currentUser.message];
     currentUser.id = [currentUser.id];
+    currentUser.ogMeta = [currentUser.ogMeta];
 
     for(let i = 1; i < messages.length; i++) {
       if(!Array.isArray(currentUser.message)) currentUser.message = [currentUser.message];
       if(messages[i].streamID === currentUser.streamID) {
         currentUser.message = [...currentUser.message, messages[i].message];
         currentUser.id = [...currentUser.id, messages[i].id];
+        currentUser.ogMeta = [...currentUser.ogMeta, messages[i].ogMeta];
+        
       }
       else {
         newMessages.push(currentUser);
         currentUser = messages[i];
         currentUser.message = [currentUser.message];
         currentUser.id = [currentUser.id];
+        currentUser.ogMeta = [currentUser.ogMeta];
       }
     }
 

streams-react/src/components/ChatMessages/ChatMessages.js

@@ -7,7 +7,7 @@ const ChatUser = ({messageData}) => {
 
   const renderMessage = () => {
     return messageData.message.map((message, i) => {
-      return <ChatUserMessage key={messageData.id[i]} message={message} />
+      return <ChatUserMessage key={messageData.id[i]} message={message} ogMeta={messageData.ogMeta[i]} />
     });
   };
 

streams-react/src/components/ChatUser/ChatUser.js

@@ -16,7 +16,7 @@
   overflow: hidden;
   background-color: #212121;
 }
-.container img {
+.identicon img {
   height: 30px;
 }
 .message__header {

streams-react/src/components/ChatUser/ChatUser.module.css

@@ -2,7 +2,7 @@ import {useState, useEffect} from "react";
 import isURL from "validator/lib/isURL";
 import styles from "./ChatUserMessage.module.css";
 
-const ChatUserMessage = ({message}) => {
+const ChatUserMessage = ({message, ogMeta}) => {
   const [hasURL, setHasURL] = useState(false);
   const [srcURL, setSrcURL] = useState("");
 
@@ -53,7 +53,7 @@ const ChatUserMessage = ({message}) => {
 
     return finalMessageArray.map((msg, i) => {
       if(typeof msg === "string") return <span key={i}>{msg}</span>
-      return <a key={i} href={msg.link} className={styles.link} target="_blank" rel="noopener noreferrer" >{msg.link}</a>;
+      return <a key={i} href={msg.link} className={styles.link} target="_blank" rel="noopener noreferrer">{msg.link}</a>;
     });
   };
 
@@ -73,6 +73,18 @@ const ChatUserMessage = ({message}) => {
           ></iframe>
         </div>
       }
+      {!hasURL && ogMeta.success && 
+        <div className={styles.ogCard__container}>
+          <a href={ogMeta.requestUrl} className={styles.ogCard__link} target="_blank" rel="noopener noreferrer">
+            <div className={styles.ogCard__image__container}>
+              <img src={ogMeta.ogImage.url} alt={ogMeta.ogTitle} className={styles.ogCard__image} />
+            </div>
+            <div className={styles.ogCard__description__container}>
+              <p className={styles.ogCard__description}>{ogMeta.ogTitle}</p>
+            </div>
+          </a>
+        </div>
+      }
     </div>
   );
 };

streams-react/src/components/ChatUserMessage/ChatUserMessage.js

@@ -26,4 +26,55 @@
 }
 iframe {
   width: 100%;
+}
+.ogCard__container {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.ogCard__link {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.ogCard__container:hover .ogCard__description__container,
+.ogCard__link:focus .ogCard__description__container  {
+  background-color: #C2C2C2;
+}
+.ogCard__container:hover .ogCard__image,
+.ogCard__link:focus .ogCard__image {
+  transform: scale(1.1);
+}
+.ogCard__image__container {
+  display: flex;
+  justify-content: center;
+  height: 150px;
+  width: 100%;
+  border-top: 2px solid #212121;
+  overflow: hidden;
+}
+.ogCard__image {
+  height: 100%;
+  transition: all 0.1s ease-out;
+}
+.ogCard__description__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  min-height: 50px;
+  padding: 5px;
+  font-weight: bold;
+  background-color: #DBDBDB;
+  transition: all 0.1s ease-out;
+}
+.ogCard__description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }