Add backend and viewers count
This commit is contained in:
parent
f51308f586
commit
79fafa466b
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
24
backend/index.js
Normal file
24
backend/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
const express = require("express");
|
||||
|
||||
const app = express();
|
||||
const http = require("http");
|
||||
const server = http.createServer(app);
|
||||
const io = require("socket.io")(server);
|
||||
|
||||
usersConnected = 0
|
||||
|
||||
io.on("connection", (client) => {
|
||||
|
||||
usersConnected++;
|
||||
|
||||
client.on("disconnect", () => {
|
||||
usersConnected--;
|
||||
io.sockets.emit("update-count", {value: usersConnected});
|
||||
});
|
||||
|
||||
io.sockets.emit("update-count", {value: usersConnected});
|
||||
});
|
||||
|
||||
server.listen(3000, () => {
|
||||
console.log("Server started on port 3000");
|
||||
});
|
10
backend/package.json
Normal file
10
backend/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"express": "^4.17.3",
|
||||
"socketio": "^1.0.0"
|
||||
}
|
||||
}
|
650
backend/yarn.lock
Normal file
650
backend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
44
index.html
44
index.html
@ -7,6 +7,7 @@
|
||||
<title>DenisSlider2000™</title>
|
||||
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="title">
|
||||
@ -15,31 +16,36 @@
|
||||
<div id="mobile-title">
|
||||
<img src="./images/mobile-title.gif">
|
||||
</div>
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis_chemise.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis_chapeau.png">
|
||||
<div id="swiper-container">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis_chemise.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/saint_denis.png">
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis_chapeau.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis.png">
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/saint_denis.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="photo-container">
|
||||
<img src="./images/denis/denis.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
|
||||
<div id="counter-container">
|
||||
<span>Nombre de fans connectés : <span id="value">x</span></span>
|
||||
</div>
|
||||
<script src="http://danby.aniere.fr:3000/socket.io/socket.io.js"></script>
|
||||
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
@ -1,3 +1,11 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
var socket = io("ws://danby.aniere.fr:3000");
|
||||
|
||||
socket.on("update-count", (data) => {
|
||||
document.getElementById("value").innerText = data.value;
|
||||
});
|
||||
});
|
||||
|
||||
const swiper = new Swiper('.swiper', {
|
||||
direction: "horizontal",
|
||||
loop: true,
|
||||
|
19
style.css
19
style.css
@ -18,6 +18,25 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#swiper-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#counter-container {
|
||||
display: flex;
|
||||
margin-top: 5vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#counter-container > span {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: large ;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
|
Loading…
Reference in New Issue
Block a user