byte/syncapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated files, added Utils class

Browse Source
This commit is contained in:
Daniel
2023-08-04 22:16:09 +03:00
parent 8afb59c0ac
commit e06089d443
4 changed files with 36 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.js
View File

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

18
public/client.html
View File

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

22
public/client.js
View File

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

5
public/utils.js Normal file
View File

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