Могу ли я транслировать фон частиц и взаимодействия с помощью узла / сокета? - PullRequest
Новая
       47

Могу ли я транслировать фон частиц и взаимодействия с помощью узла / сокета?

0 голосов
/ 18 декабря 2018

Я хочу транслировать фон частиц.js, используя сокеты, которые позволяют одновременно взаимодействовать нескольким соединениям. Я транслирую функцию частиц JS, а также конфигурацию JSON и движения мыши для каждого соединения, но у меня возникают проблемы с получением щелчка / наведения мышисобытия для трансляции взаимодействия частиц.1) Server.js 

var express = require('express');

var path = require('path');

var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(__dirname + "/static"));

app.set('views', path.join(__dirname, './views'));

app.set('view engine', 'ejs');

require('./server/routes')(app);

var server = app.listen(8000);

var io = require('socket.io')(server);

io.on('connection', function(socket) {
socket.on('mouse_activity', function(data){
    console.log(data);
    socket.broadcast.emit('all_mouse_activity', {session_id: socket.id, 
coords: data})
});

socket.on('generate', function(data){
    socket.broadcast.emit('particles',data)
})

socket.on('myClick', function (data) {
    socket.broadcast.emit('myClick', data);
});

})

2) HTML 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://192.168.1.192:8000/socket.io/socket.io.js"> . 
</script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
. 
</script>
<link rel="stylesheet" href="style.css">
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"> . 
</script>
<title>Document</title>
<script>
var socket = io.connect('http://192.168.1.192:8000')

$(document).ready(function(){
    socket.emit('generate',particlesJS('particles-js',{
        "particles": {
            "number": {
            "value": 11,
            "density": {
                "enable": true,
                "value_area": 800
            }
            },
            "color": {
            "value": "#ffffff"
            },
            "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
            },
            "opacity": {
            "value": 0.64,
            "random": false,
            "anim": {
                "enable": true,
                "speed": 0.3248308849205381,
                "opacity_min": 0.13805312609122866,
                "sync": false
            }
            },
            "size": {
            "value": 114.42640803667955,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 17.053621458328248,
                "size_min": 8.932849335314796,
                "sync": false
            }
            },
            "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
            },
            "move": {
            "enable": true,
            "speed": 2.3,
            "direction": "top",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
            "onhover": {
                "enable": true,
                "mode": "bubble"
            },
            "onclick": {
                "enable": true,
                "mode": "repulse"
            },
            "resize": true
            },
            "modes": {
            "grab": {
                "distance": 400,
                "line_linked": {
                "opacity": 1
                }
            },
            "bubble": {
                "distance": 85.26810729164123,
                "size": 93.3888794146547,
                "duration": 9.826134268846276,
                "opacity": 1,
                "speed": 3
            },
            "repulse": {
                "distance": 592.8163649799819,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
            }
        },
        "retina_detect": true
        }))
})

$(document).on('mousemove', function(event){
    socket.emit('mouse_activity', {x: event.pageX, y: event.pageY})
});

socket.on('all_mouse_activity', function(data){
    if($('.pointer[session_id="'+data.session_id+'"]').length <= 0){
        $('body').append('<div class="pointer" 
session_id="'+data.session_id+'"></div>')
    }

    var $pointer = $('.pointer[session_id="'+data.session_id+'"]');

    $pointer.css('left', data.coords.x);
    $pointer.css('top', data.coords.y);
});

socket.on('particles', function(data){
    $('#bg').html(data)
})

$(document).on('click', function(event){
socket.emit('myClick', {id: event.target})
});

socket.on('myClick', function (data) {
$(data.id).trigger('click');
});



</script>
</head>
<body id="particles-js">
<script id="bg"></script>

</body>
</html>
...