-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrealtime-chat.html
104 lines (85 loc) · 3.4 KB
/
realtime-chat.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<body>
<form id="login">
<label for="email">Email</label>
<input type="email" id="email">
<label for="Password">Password</label>
<input type="password" id="password">
<input type="submit">
</form>
<ol></ol>
<form id="new">
<label for="message">Message</label>
<input type="text" id="text">
<input type="submit">
</form>
<script>
const url = 'wss://gcs-directus-demo-5awywjxlxq-uc.a.run.app/websocket'
let connection;
document.querySelector('#login').addEventListener('submit', function(event) {
event.preventDefault();
const email = event.target.elements.email.value;
const password = event.target.elements.password.value;
connection = new WebSocket(url);
// 1. Establish Connection
// 2. Authenticate
connection.addEventListener('open', function() {
console.log({ event: 'onopen' });
connection.send(JSON.stringify({
type: 'auth',
email,
password
}))
});
connection.addEventListener('message', function(message) {
receiveMessage(message);
})
});
document.querySelector('#new').addEventListener('submit', function(event) {
event.preventDefault();
const text = event.target.elements.text.value;
connection.send(JSON.stringify({
type: 'items',
collection: 'messages',
action: 'create',
data: { text }
}));
document.querySelector('#text').value = '';
})
function receiveMessage(message) {
const data = JSON.parse(message.data);
if(data.type == 'auth' && data.status == 'ok') {
connection.send(JSON.stringify({
type: 'subscribe',
collection: 'messages',
query: {
fields: ['*', 'user_created.first_name'],
sort: 'date_created'
}
}));
}
if(data.type == 'subscription' && data.event == 'init')
{
console.log('subscription started');
for(const messages of data.data) {
addMessageToList(message)
}
}
if(data.type == 'subscription' && data.event == 'create')
{
addMessageToList(data.data[0]);
}
}
function addMessageToList(message) {
const li = document.createElement('li');
li.setAttribute('id', message.id);
li.textContent = `${message.user_created.first_name}: ${message.text}`
document.querySelector('ol').appendChild(li)
}
// 3. Subscribe to messages
// 4. Add New Message functionality
// 5. Display New Messages and Historical Messages
</script>
</body>
</html>