Skip to content

Commit 3dbfa2b

Browse files
author
Your Name
committed
supabase ok
1 parent 74e7f8d commit 3dbfa2b

File tree

1 file changed

+64
-20
lines changed

1 file changed

+64
-20
lines changed

‎test/livechat.html

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
99
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
1010
<script src="https://pages-github.b-cdn.net/webcomponents/input.js"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gun/0.2020.1240/gun.min.js" integrity="sha512-DXhMSo4XT1xlS/IsgKbFlUz34Twe8z56oIt+NwVmwmVeN27nXfdZCN35ruF5ZLa8NfTfjugpdLIoFi2DtSyIWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gun/0.2020.1240/axe.js" integrity="sha512-2IOSn3n0le20q8/BKHvoAPwtcYiAsDh8XumTZvdbjQnh1uD/QBaBdQY20Cx6EckT/+dcT+wveJvyZtljhkjW3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
13-
11+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
1412
</head>
1513
<body>
1614
<div class="container-fluid" id="biodata-wrapper">
@@ -33,7 +31,7 @@ <h1>LiveChat</h1>
3331
<p class="m-0 text-primary" style="font-weight: bold;" id="visitor-name"></p>
3432
<p style="font-size: 12px;" id="visitor-phone"></p>
3533
</div>
36-
<div id="chat" style="height: 300px;" class="border mb-1">
34+
<div id="chat" style="height: 300px;overflow-y: scroll;" class="border mb-1">
3735
</div>
3836
<div id="input-wrapper" class="d-flex">
3937
<div class="flex-grow-1 mr-1">
@@ -49,7 +47,17 @@ <h1>LiveChat</h1>
4947
</div>
5048

5149
<script>
52-
const gun = Gun("https://ddb.bimasoft.web.id/gun");
50+
51+
const db = supabase.createClient(
52+
"https://supabase-api.b.app.web.id",
53+
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJyb2xlIjogImFub24iLAogICJpc3MiOiAic3VwYWJhc2UiLAogICJpYXQiOiAxNzI4NDg5NjAwLAogICJleHAiOiAxODg2MjU2MDAwCn0.Z0Qi_fL4s-gLFeCkTxp1hTtCHK7Nd26BDj_rNfNc4XU",
54+
);
55+
56+
const scrollDiv = () => {
57+
const chat = document.getElementById("chat");
58+
chat.scrollTop = chat.scrollHeight;
59+
};
60+
5361
const btn = document.getElementById("send-button");
5462
const btnBio = document.getElementById("save-biodata");
5563

@@ -62,15 +70,31 @@ <h1>LiveChat</h1>
6270
initChat();
6371
}
6472

65-
6673
btn.onclick = () => {
67-
const username = localStorage.getItem("nowa");
74+
if (getVal("input") === "") return;
6875

76+
const username = localStorage.getItem("nowa");
6977
const msg = `Client : ${getVal("input")}`;
70-
gun.get("bimasoft").get("livechat").get(username).set(msg);
78+
7179
setVal("input", "");
80+
// setfocus
81+
document.getElementById("input-input").focus();
82+
83+
db.from('livechat').insert({
84+
from : username,
85+
msg
86+
})
87+
.then(()=>{
88+
})
7289
};
7390

91+
document.getElementById("input-input").addEventListener("keyup", function(event) {
92+
if (event.keyCode === 13) {
93+
event.preventDefault();
94+
btn.click();
95+
}
96+
});
97+
7498
btnBio.onclick = () => {
7599
const nama = getVal("nama");
76100
const nowa = getVal("nowa");
@@ -82,27 +106,24 @@ <h1>LiveChat</h1>
82106
};
83107

84108
function initChat() {
109+
console.log("CHAT INIT !");
85110
const username = localStorage.getItem("nowa");
86111
const nama = localStorage.getItem("nama");
87112

88113
document.getElementById("visitor-name").innerText = nama;
89114
document.getElementById("visitor-phone").innerText = username;
90115

91-
gun
92-
.get('bimasoft')
93-
.get('livechat-ping')
94-
.put(username);
95-
96-
gun
97-
.get("bimasoft")
98-
.get("livechat")
99-
.get(username)
100-
.on(chats => {
116+
db
117+
.from('livechat')
118+
.select()
119+
.eq('from', username)
120+
.order('created_at', { ascending: true }).limit(100).then(data => {
121+
console.log(data);
101122
document.getElementById("chat").innerHTML = "";
102-
for (const key of Object.keys(chats)) {
123+
for (const key of Object.keys(data.data)) {
103124
if (key === "_") continue;
104125

105-
const msg = chats[key]
126+
const msg = data.data[key].msg
106127
const div = document.createElement("div");
107128
if (msg.includes("Client : ")) {
108129
div.className = "border ml-2 my-2 bg-secondary text-white py-1 px-3 rounded w-75";
@@ -113,7 +134,30 @@ <h1>LiveChat</h1>
113134
div.innerText = msg.replace("Client : ","").replace("Operator : ","");
114135
document.getElementById("chat").appendChild(div);
115136
}
137+
138+
scrollDiv();
116139
})
140+
141+
db.channel('livechat').on('postgres_changes',{
142+
schema : 'public',
143+
table : 'livechat',
144+
event : 'INSERT',
145+
filter : `from=eq.${username}`
146+
}, (payload) => {
147+
const msg = payload.new.msg;
148+
const div = document.createElement("div");
149+
if (msg.includes("Client : ")) {
150+
div.className = "border ml-2 my-2 bg-secondary text-white py-1 px-3 rounded w-75";
151+
}
152+
if (msg.includes("Operator : ")) {
153+
div.className = "border my-2 ml-auto mr-2 bg-primary text-white py-1 px-3 rounded w-75";
154+
}
155+
div.innerText = msg.replace("Client : ","").replace("Operator : ","");
156+
document.getElementById("chat").appendChild(div);
157+
158+
scrollDiv();
159+
160+
}).subscribe();
117161
}
118162
</script>
119163
</body>

0 commit comments

Comments
 (0)