Merge pull request #564 from talkjs/chore/update-nodejs-example

Update Node.js tutorial
talkjs · Jan 6, 2025 · 6a34d28 · 6a34d28
2 parents 6bfc3a5 + 044006a
commit 6a34d28
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 88 deletions.
diff --git a/nodejs/basic-example/talkjs-backend/file.json b/nodejs/basic-example/talkjs-backend/file.json
diff --git a/nodejs/basic-example/talkjs-backend/server.js b/nodejs/basic-example/talkjs-backend/server.js
@@ -5,7 +5,7 @@ import bodyParser from "body-parser";
 
 import { LowSync, JSONFileSync } from "lowdb";
 
-const adapter = new JSONFileSync("file.json");
+const adapter = new JSONFileSync("users.json");
 const db = new LowSync(adapter);
 db.read();
 db.data ||= { users: [] };
@@ -23,7 +23,6 @@ app.post("/createUser", (req, res) => {
   const email = req.body.email;
   const photoUrl = req.body.photoUrl;
   const role = req.body.role;
-  console.log(id, name, email, photoUrl, role);
   db.data.users.push({
     id: id,
     name: name,
@@ -47,4 +46,4 @@ app.get("/getUser/:id", (req, res) => {
   }
 });
 
-app.listen(port, () => console.log(`Server up and running at port ${port}!`));
+app.listen(port, () => console.log(`Server up and running on port ${port}`));
diff --git a/nodejs/basic-example/talkjs-backend/users.json b/nodejs/basic-example/talkjs-backend/users.json
@@ -0,0 +1,20 @@
+{
+  "users": [
+    {
+      "id": "1",
+      "name": "Alice",
+      "email": "[email protected]",
+      "photoUrl": "https://talkjs.com/new-web/avatar-7.jpg",
+      "role": "default",
+      "welcomeMessage": "Hi 👋"
+    },
+    {
+      "id": "2",
+      "name": "Sebastian",
+      "email": "[email protected]",
+      "photoUrl": "https://talkjs.com/new-web/avatar-2.jpg",
+      "role": "default",
+      "welcomeMessage": "Hello there!"
+    }
+  ]
+}
diff --git a/nodejs/basic-example/talkjs-frontend/index.html b/nodejs/basic-example/talkjs-frontend/index.html
@@ -1,48 +1,43 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>TalkJS Node JS Integration</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-
-<body>
-
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
 
+  <body>
     <script src="script.js" async defer></script>
     <script>
-        (function (t, a, l, k, j, s) {
-            s = a.createElement('script');
-            s.async = 1;
-            s.src = "https://cdn.talkjs.com/talk.js";
-            a.head.appendChild(s);
-            k = t.Promise;
-            t.Talk = {
-                v: 3,
-                ready: {
-                    then: function (f) {
-                        if (k) return new k(function (r, e) {
-                            l.push([f, r, e])
-                        });
-                        l
-                            .push([f])
-                    },
-                    catch: function () {
-                        return k && new k()
-                    },
-                    c: l
-                }
-            };
-        })(window, document, []);
+      (function (t, a, l, k, j, s) {
+        s = a.createElement("script");
+        s.async = 1;
+        s.src = "https://cdn.talkjs.com/talk.js";
+        a.head.appendChild(s);
+        k = t.Promise;
+        t.Talk = {
+          v: 3,
+          ready: {
+            then: function (f) {
+              if (k)
+                return new k(function (r, e) {
+                  l.push([f, r, e]);
+                });
+              l.push([f]);
+            },
+            catch: function () {
+              return k && new k();
+            },
+            c: l,
+          },
+        };
+      })(window, document, []);
     </script>
-    <script src = "https://unpkg.com/axios/dist/axios.min.js"></script>
     <!-- container element in which TalkJS will display a chat UI -->
     <div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
-        <i>Loading chat...</i>
+      <i>Loading chat...</i>
     </div>
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/nodejs/basic-example/talkjs-frontend/script.js b/nodejs/basic-example/talkjs-frontend/script.js
@@ -1,22 +1,10 @@
-const getAgent = async () => {
-  const response = await fetch("http://127.0.0.1:3000/getUser/1");
-  const data = await response.json();
-  let agent = new Talk.User({
-    id: data.id,
-    name: data.name,
-    photoUrl: data.dp,
-    email: data.email,
-    role: data.role,
-  });
-  return agent;
-};
-const getUser = async () => {
-  const response = await fetch("http://127.0.0.1:3000/getUser/2");
+const getUser = async (id) => {
+  const response = await fetch(`http://127.0.0.1:3000/getUser/${id}`);
   const data = await response.json();
   let user = new Talk.User({
     id: data.id,
     name: data.name,
-    photoUrl: data.dp,
+    photoUrl: data.photoUrl,
     email: data.email,
     role: data.role,
   });
@@ -25,26 +13,24 @@ const getUser = async () => {
 
 (async function () {
   await Talk.ready;
-  let agent = await getAgent();
-  let user = await getUser();
+  const alice = await getUser(1);
+  const sebastian = await getUser(2);
   const session = new Talk.Session({
-    appId: "<APP_ID>",
-    me: user,
+    appId: "<APP_ID>", // replace with your app ID
+    me: sebastian,
   });
-  var conversation = session.getOrCreateConversation(
-    Talk.oneOnOneId(user, agent)
+  const conversation = session.getOrCreateConversation(
+    "nodeJSExampleConversation"
   );
   conversation.setAttributes({
     welcomeMessages: [
-      "You can start typing your message here and one of our agents will be with you shortly.",
-      "Please do not divulge any of your personal information.",
+      "Example chat for our Node.js tutorial. Try sending a message!",
     ],
   });
-  conversation.setParticipant(user);
-  conversation.setParticipant(agent);
-  console.log(conversation);
+  conversation.setParticipant(alice);
+  conversation.setParticipant(sebastian);
 
-  var inbox = session.createInbox(conversation);
-  inbox.select(conversation);
-  inbox.mount(document.getElementById("talkjs-container"));
+  const chatbox = session.createChatbox(conversation);
+  chatbox.select(conversation);
+  chatbox.mount(document.getElementById("talkjs-container"));
 })();