Звук срабатывания при увеличении счетчика - socket.io - PullRequest
Новая
       65

Звук срабатывания при увеличении счетчика - socket.io

0 голосов
/ 08 мая 2020

В настоящее время я работаю над проектом, который использует socket.io, для которого я хочу издавать звук для всех клиентов, когда пользователь нажимает кнопку. Я сделал некоторый клиент-серверный скрипт, который обновляет счетчик, когда кто-то нажимает кнопку, и теперь хотел бы использовать увеличение счетчика в качестве триггера для логического значения для воспроизведения звука.

Я нахожусь под создается впечатление, что все, что мне нужно сделать сейчас, это создать оператор if / else на стороне клиента, но я не уверен в лучшем способе go об этом.

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...');
});

индекс. 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>
...