-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (110 loc) · 4.46 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
<header>
<title>Mobile Chat Layout</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</header>
<body>
<div style="overscroll-behavior: none">
<div class="fixed w-full bg-green-400 h-16 pt-2 text-white flex justify-between shadow-md"
style="top: 0px; overscroll-behavior: none">
<!-- back button -->
<router-link to="/chat">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-12 h-12 my-1 text-green-100 ml-2">
<path class="text-green-100 fill-current"
d="M9.41 11H17a1 1 0 0 1 0 2H9.41l2.3 2.3a1 1 0 1 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L9.4 11z" />
</svg>
</router-link>
<div id="username" class="my-3 text-green-100 font-bold text-lg tracking-wide">
@rallipi
</div>
<!-- 3 dots -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-dots-vertical w-8 h-8 mt-2 mr-2">
<path class="text-green-100 fill-current" fill-rule="evenodd"
d="M12 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" />
</svg>
</div>
<div class="mt-20 mb-16" id="chat-box">
<div class="clearfix">
<div class="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg">
this is a basic mobile chat layout, build with tailwind css
</div>
</div>
<div class="clearfix">
<div class="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
It will be used for a full tutorial about building a chat app with
vue, tailwind and firebase.
</div>
</div>
<div class="clearfix">
<div class="bg-green-300 float-right w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
check my twitter to see when it will be released.
</div>
</div>
</div>
</div>
<div class="fixed w-full flex justify-between bg-green-100" style="bottom: 0px">
<textarea class="flex-grow m-2 py-2 px-4 mr-1 rounded-full border border-gray-300 bg-gray-200 resize-none" rows="1"
placeholder="Message..." style="outline: none"></textarea>
<button class="m-2" style="outline: none" id="sendBtn">
<svg class="svg-inline--fa text-green-400 fa-paper-plane fa-w-16 w-12 h-12 py-2 mr-2" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z" />
</svg>
</button>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
<script>
let socketClients = [];
const socket = io("http://localhost:3000", {
// const socket = io("http://134.209.145.75:3000", {
});
socket.on("connect", () => {
document.getElementById("username").innerText = `Connecting...`;
if (socket.connected) {
console.log(`I'm connected: ${socket.id} = ${socket.io.engine.id}`);
document.getElementById("username").innerText = `@${socket.id}`;
}
});
// retrieve all socket clients
socket.on("client-ids", (clients) => socketClients = clients);
// received new message
socket.on("send-message", (e) => {
const message = `
<div class="clearfix">
<div class="bg-green-300 float-right w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
${e}
</div>
</div>`;
$("#chat-box").append(message);
});
socket.on("reconnect", () => {
document.getElementById("username").innerText = `@${socket.id}`;
});
socket.on("disconnect", () => {
document.getElementById("username").innerText = `Disconnected`;
});
socket.on("connect_error", (e) => {
console.log(e)
});
// send message
$("textarea").on("keypress", function (e) {
// When enter key is pressed
if (e.which === 13) {
e.preventDefault();
const message = $(this).val()
socket.emit("send-message", message);
$(this).val("");
}
});
socket.onAny((event, data) => {
console.log(`Emit: "${event}"`);
console.log(data);
console.log("\n");
});
</script>
</html>