Вы правы sockets.io не позволит вам, потому что это никак не связано с анимацией, однако они позволят вам анимировать, сообщая вашему приложению "Когда нужно анимировать".В прошлый раз, когда я проверял, sockets.io предназначался для node.js, не уверен, что они поддерживают PHP или если PHP начал поддерживать WebSockets.
WebSockets в основном устанавливает соединение между вашимклиент и сервер.Они работают над публикацией, подпиской модели.Таким образом, ваш сервер откроет соединение, и ваш клиент подпишется на него.Как только соединение между сервером и клиентом установлено, ваш сервер сможет публиковать изменения, и клиент сможет их прослушивать.Грубая реализация будет выглядеть примерно так.Сначала вам нужно открыть канал в своем клиенте, чтобы сервер и клиент могли обмениваться данными через него.
<script>
var connection = sockets.open(`user-${userID}`) // will open a channel for some user
// once the connection is established you can listen to events
connection.on('update', function(data) {
//perfect place to animate stuff and update data
})
Затем в вашем бэкэнде
<?php
$results = $conn->UpdateSomething(); // the place in your code where actions happen;
$socketConnection.trigger($channel, 'update', $results) // this will trigger update event on a $channel with data $results
?>
Вы можететакже используйте ServiceWorkers, LongPolling и ShortPolling для прослушивания изменений в реальном времени и изменения DOM для событий, запускаемых сервером
Steps To Animate
InЧтобы перейти к реальной анимации, вы можете выполнить следующие шаги
1 - Найти элемент dom, содержащий нового лидера, вы можете легко сделать это с помощью getElementById и присвоить уникальный идентификатор каждому предмету на доске.
2 - Получите предыдущего лидера, который в идеале будет по-прежнему на вершине вашей таблицы лидеров
3 - Как только закончите, следуйте этому примеру Поменяйте местами два HTML-элемента визуально и в DOM и оживите все это?.В этом примере clickedDiv - ваш новый лидер, а prev - ваш старый лидер.