I'm currently working on a project that uses socket.io for which I want to emit a sound to all clients when a user clicks a button. I've done some client/server script that updates a counter when anyone clicks the button, and now would like to use the counter increase as a trigger for a boolean to play the sound.
I'm under the impression that all I would need to do now is construct the if/else statement on the client side, but not sure of the best way to go about it. Any feedback or suggestions would be greatly appreciated. Stay safe!
server.js:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var clickCount = 0;
users = [];
connections = [];
//serve static files
app.use(express.static(__dirname + '/public'));
//redirect / to index.html file
app.get('/', function(req,res, next) {
res.sendFile(__dirname + '/public/index.html');
});
//client connection events
io.on('connection', function(client) {
connections.push(client);
console.log("There's %s essential workers online...", connections.length);
client.on('disconnect', function(data) {
connections.splice(connections.indexOf(client), 1);
console.log('Social Distancing: %s people online...', connections.length)
});
//when server recieves 'clicked' message from client, do this
client.on('clicked', function(data) {
clickCount++;
//send a message to all the connected clients
io.emit('buttonUpdate', clickCount)
console.log('Someone is sending their thoughts', clickCount)
});
});
server.listen(3000, function() {
console.log('The server is running...');
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title>thinking of you</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio id="player">
<source src="http://newt.phys.unsw.edu.au/music/bellplates/sounds/bellplate2modes.mp3" type="audio/mp3">
</audio>
<header class="text">
<p id="title_1">[thinking of you]</p>
<button class="title_2" id="button" onclick="buttonClicked()">you're not alone</button>
<br>
<a class="title_3" id="buttonCount">0 people send their love</a>
<!-- ====== Javascript ======-->
<script src="/socket.io/socket.io.js"></script>
<script src="/js/socket.io-stream.js"></script>
<script>
// socket connection
var socket = io.connect();
var clicks = 0;
var audio = document.getElementById("player");
// Click Count - Client > Server
function buttonClicked() {
socket.emit('clicked');
}
// Click Count - Server > Client
socket.on('buttonUpdate', function(data) {
document.getElementById("buttonCount").innerHTML = data + " people send their love";
});
socket.on('buttonUpdate', function(data) {
document.getElementbyId("buttonCount") {
if (clicks > data) {
audio.play();
});
</script>
</header>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire