| Server IP : 209.209.40.120 / Your IP : 216.73.217.112 Web Server : Microsoft-IIS/10.0 System : Windows NT NEWWWW 10.0 build 17763 (Windows Server 2019) i586 User : NEWWWW$ ( 0) PHP Version : 8.3.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/New folder/New folder/software/advanced-chat-app/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatApp_Socket</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<div id="app">
// Component Code added here
<div class="container">
<div class="col-lg-6 offset-lg-3">
<div v-if="ready">
<p v-for="(user, i) in info" :key="i">
{{ user.username }} {{ user.type }}
</p>
</div>
<div v-if="!ready">
<h4>Enter your username</h4>
<form @submit.prevent="addUser">
<div class="form-group row">
<input
type="text"
class="form-control col-9"
v-model="username"
placeholder="Enter username here"
/>
<input
type="submit"
value="Join"
class="btn btn-sm btn-info ml-1"
/>
</div>
</form>
</div>
<h2 v-else>{{ username }}</h2>
<div class="card bg-info" v-if="ready">
<div class="card-header text-white">
<h4>
My Chat App
<span class="float-right">{{ connections }} connections</span>
</h4>
</div>
<ul class="list-group list-group-flush text-right">
<small v-if="typing" class="text-white">{{ typing }} is typing</small>
<li class="list-group-item" v-for="(message, i) in messages" :key="i">
<span :class="{ 'float-left': message.type === 1 }">
{{ message.message }}
<small>:{{ message.user }}</small>
</span>
</li>
</ul>
<div class="card-body">
<form @submit.prevent="send">
<div class="form-group">
<input
type="text"
class="form-control"
v-model="newMessage"
placeholder="Enter message here"
/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="http://unpkg.com/vue@next"></script>
<script>
const socket = io();
const { createApp, ref, watch, reactive, watchEffect } = Vue;
const Chat = {
name: "Chat",
setup() {
let newMessage = ref(null);
let typing = ref(false);
let ready = ref(false);
let info = reactive([]);
let connections = ref(0);
const messages = reactive([]);
const username = ref(null);
window.onbeforeunload = () => {
socket.emit("leave", username.value);
};
socket.on("chat-message", (data) => {
messages.push({
message: data.message,
type: 1,
user: data.user,
});
});
socket.on("typing", (data) => {
typing.value = data;
});
socket.on("stopTyping", () => {
typing.value = false;
});
socket.on("joined", (data) => {
info.push({
username: data.name,
type: "joined",
});
messages.push(...data.messages);
setTimeout(() => {
info.length = 0;
}, 5000);
});
socket.on("leave", (data) => {
info.push({
username: data,
type: "left",
});
setTimeout(() => {
info.length = 0;
}, 5000);
});
socket.on("connections", (data) => {
connections.value = data;
});
watch(newMessage, (newMessage, preNewMessage) => {
newMessage
? socket.emit("typing", username.value)
: socket.emit("stopTyping");
});
function send() {
messages.push({
message: newMessage.value,
type: 0,
user: "Me",
});
socket.emit("chat-message", {
message: newMessage.value,
user: username.value,
});
newMessage.value = null;
}
function addUser() {
ready.value = true;
socket.emit("joined", username.value);
}
return {
addUser,
send,
newMessage,
messages,
typing,
username,
ready,
info,
connections,
};
},
};
createApp(Chat).mount("#app");
</script>
</body>
</html>