Separated files, added Utils class

This commit is contained in:
2023-08-04 22:16:09 +03:00
parent 8afb59c0ac
commit e06089d443
4 changed files with 36 additions and 48 deletions

View File

@@ -12,8 +12,6 @@ expressWs(app);
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
// Server startup
const server = app.listen(process.env.SERVER_PORT, () => {
@@ -61,7 +59,6 @@ app.ws('/ws', (ws, req) => {
} else {
rooms.set(msg.room_id, [clients.get(msg.id)]);
}
if (room_hosts.get(msg.room_id) == null) {
room_hosts.set(msg.room_id, id);
}
@@ -70,18 +67,14 @@ app.ws('/ws', (ws, req) => {
if (msg.command == 'set_link') {
room_links[clientRoom] = msg.link;
console.log(room_links);
console.log(room_links[clientRoom]);
refreshAllClients(rooms, clientRoom);
}
if (msg.command == 'pause') {
console.log('PAUSED');
broadcastCommand(msg.room_id, 'pause');
}
if (msg.command == 'play') {
console.log('PLAYED');
broadcastCommand(msg.room_id, 'play');
}
@@ -126,7 +119,6 @@ app.ws('/ws', (ws, req) => {
// On close, deletes the client data and randomizes a new host, if it exists
ws.on('close', (data) => {
console.log('CLIENT LEFT');
clients.delete(id);
if (rooms.has(clientRoom)) {
const clients = rooms.get(clientRoom);
@@ -179,13 +171,13 @@ function broadcastCommand(room_id, command) {
}
}
function broadcastLink(room_id, link) {
const response = { command: 'set_link', link: link };
const responseJson = JSON.stringify(response);
for (const client of rooms.get(room_id)) {
client.client.send(responseJson);
}
}
// function broadcastLink(room_id, link) {
// const response = { command: 'set_link', link: link };
// const responseJson = JSON.stringify(response);
// for (const client of rooms.get(room_id)) {
// client.client.send(responseJson);
// }
// }
function broadcastRoom(room_id, message, name) {
const response = { command: 'global', message: name + ': ' + message };
@@ -206,7 +198,7 @@ function getClientsJson(room_id) {
}
// Collects and sends back updated data
app.post('/api/getRefreshData', (req, res) => {
app.post('/api/refresh', (req, res) => {
const data = req.body;
const client = clients.get(data.id);
const isHost = client.id == room_hosts.get(data.room_id) ? true : false;
@@ -216,22 +208,13 @@ app.post('/api/getRefreshData', (req, res) => {
client_data: getClientsJson(data.room_id),
link: room_links[data.room_id],
};
console.log(toSend);
res.json(toSend).status(200);
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/join.html');
res.sendFile(__dirname + '/public/client.html');
});
app.get('/img', (req, res) => {
res.sendFile(__dirname + '/public/img.png');
});
app.get('/api/file/:filename', (req, res) => {
res.sendFile(__dirname + '/movies/' + req.params.filename);
});
app.get('/a', (req, res) => {
res.sendFile(__dirname + '/public/clt.html');
app.get('/api/file/:folder/:filename', (req, res) => {
res.sendFile(__dirname + '/' + req.params.folder + '/' + req.params.filename);
});

View File

@@ -32,11 +32,11 @@
<body>
<div id="form-container">
<form id="roomForm">
<h2>Room ID Form</h2>
<h2>Room ID</h2>
<label for="roomId">Room ID:</label>
<input type="text" id="roomId" required />
<br /><br />
<button type="submit" id="submitBtn">Submit</button>
<button type="submit" id="submitBtn">Join</button>
</form>
<div id="mainPage" style="display: none">
<div class="container text-center">
@@ -144,19 +144,19 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</div>
</div>
<script src="/utils.js"></script>
<script src="/client.js"></script>
<script>
const UTL = new Utils();
let ClientInstance;
document.addEventListener('DOMContentLoaded', function () {
const roomForm = document.getElementById('roomForm');
const mainPage = document.getElementById('mainPage');
let hasSubmitted = false;
roomForm.addEventListener('submit', function (event) {
document.addEventListener('DOMContentLoaded', () => {
const roomForm = UTL.$('roomForm');
const mainPage = UTL.$('mainPage');
roomForm.addEventListener('submit', (event) => {
event.preventDefault();
const ID = document.getElementById('roomId').value;
const ID = UTL.$('roomId').value;
mainPage.style.display = 'block';
roomForm.style.display = 'none';
hasSubmitted = true;
ClientInstance = new Client(ID);
ClientInstance.connect();
});

View File

@@ -6,16 +6,16 @@ class Client {
this.#ClientData = { name: 'Guest', id: 0, room: room_id };
this.#ClientSocket = new WebSocket('ws://93.116.13.156:3000/ws');
this.host_field = document.getElementById('host_field');
this.name_field = document.getElementById('name_field');
this.clients_field = document.getElementById('clients_field');
this.name_input = document.getElementById('name_input');
this.global_field = document.getElementById('global_field');
this.global_input = document.getElementById('global_input');
this.room_field = document.getElementById('room_field');
this.host_field = UTL.$('host_field');
this.name_field = UTL.$('name_field');
this.clients_field = UTL.$('clients_field');
this.name_input = UTL.$('name_input');
this.global_field = UTL.$('global_field');
this.global_input = UTL.$('global_input');
this.room_field = UTL.$('room_field');
this.video_field = UTL.$('video_field');
this.link_input = UTL.$('link_input');
this.room_field.textContent += room_id;
this.video_field = document.getElementById('video_field');
this.link_input = document.getElementById('link_input');
}
connect() {
@@ -49,7 +49,7 @@ class Client {
});
this.#ClientSocket.addEventListener('open', () => {
console.log('Connected');
console.log('Connected to WebSocket');
});
this.#ClientSocket.addEventListener('message', (event) => {
@@ -179,7 +179,7 @@ class Client {
refreshData() {
axios
.post('/api/getRefreshData', {
.post('/api/refresh', {
id: this.#ClientData.id,
room_id: this.#ClientData.room,
})

5
public/utils.js Normal file
View File

@@ -0,0 +1,5 @@
class Utils {
$(id) {
return document.getElementById(id);
}
}