demo page added

Ayyoub-ESSADEQ · Jul 15, 2023 · 9f4151e · 9f4151e
1 parent fa4c9ea
commit 9f4151e
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/src/demo.html b/src/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%;">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatgpt-connect</title>
+</head>
+<body style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
+    <div>
+        <input type="text" name=""  id="question" placeholder="write your question.."><button onclick="askChatgpt()">Send</button>
+    </div>
+    <div style="margin-top: 20px;">chatgpt-answer</div>
+    <div style="width: 400px;max-height: 500px;min-height: 100px;border-style: solid;margin-top: 20px;border-radius: 13px;overflow-y: auto;padding: 10px;" id="answerArea"></div>
+</body>
+
+<script>
+    const questionEle = document.getElementById('question');
+    const answerArea = document.getElementById('answerArea');
+
+
+    function askChatgpt(){
+        const question = questionEle.value;
+        const server = new WebSocket('ws://127.0.0.1:1956');
+        server.onopen = async function(){
+
+            server.send(JSON.stringify({
+                clientID : "applicationName"
+            }))
+
+            server.send(JSON.stringify({
+                conversation : {question : question},
+                source : "applicationName",
+                destination : 'chatGPT'
+            }))
+
+            server.onmessage = async function(msg){
+                //Take a look at the console to see the form of the answer
+                console.debug(msg.data);
+
+                //The whole message received
+                const data = JSON.parse(msg.data);
+
+                //The data related to the answer : 
+                const answerData = data.answer;
+
+                //The data related to the conversation
+                const conversationData = answerData.conversationData;
+
+                //The actual answer's portions :
+                const answer = conversationData.text;
+
+                answerArea.innerText = answer;
+                answerArea.scrollBy(0,answerArea.scrollHeight);
+            }
+        }
+    }
+</script>
+</html>
diff --git a/src/websocket server.js b/src/websocket server.js
@@ -0,0 +1,56 @@
+const {WebSocket} = require('ws');
+
+function runServer() {
+  //1956 : Morocco got its independence
+  const bridge = new WebSocket.Server({ port: 1956 });
+  const members = {};
+
+  bridge.on('connection', (client) => {
+    console.debug(Object.keys(members));
+
+    client.on('message', (message) => {
+      const messageAsText = message.toString();
+      const data = JSON.parse(messageAsText);
+
+      // Here we retrieve the identifier of the client
+      const clientID = data.clientID;
+
+      // Those are the data related to the question
+      const source = data.source;
+      const destination = data.destination;
+      const conversation  = data.conversation;
+
+      // Those are the data related to the answer
+      const conversationData = data.conversationData;
+      const error = data.error;
+      const done = data.done;
+
+      // The form of the answer
+      const answer = {
+        conversationData: conversationData,
+        error: error,
+        done: done,
+      };
+
+      // When the client connects to the server, we add it to the members object in order
+      // to direct the messages that correspond to it.
+
+      if (clientID) {
+        members[clientID] = client;
+      } else {
+        const target = members[destination];
+        if (target.readyState === WebSocket.OPEN) {
+          const messageBody = {
+            source: source,
+            conversation : conversation,
+            answer: answer,
+          };
+
+          target.send(JSON.stringify(messageBody));
+        }
+      }
+    });
+  });
+}
+
+runServer();