AJAX или socket.io?

В настоящее время я создаю скрипт, который должен работать следующим образом: Когда вы нажимаете кнопку, ручка рядом с кнопкой должна вставить значение. Это нужно делать в режиме реального времени. Итак, теперь я хотел бы знать, что я должен использовать для этого. Я немного исследовал и придумал ajax или socket.io, но что лучше?AJAX или socket.io?

Некоторый код:

<input class="knob" value="0" readonly data-width="80%"> 

<div class="button"> 
<a class="md-btn md-btn-success">Click me</a> 
</div>

Анимация для ручки:

<input class="knob animated" value="0" readonly data-width="80%" rel="<?php echo $number; ?>"> 

<script> 
     $('.knob').each(function() { 

      var $this = $(this); 
      var myVal = $this.attr("rel"); 
      $this.knob({}); 

      $({ 
       value: 0 
      }).animate({ 

       value: myVal 
      }, { 
       duration: 2000, 
       easing: 'swing', 
       step: function() { 
        $this.val(Math.ceil(this.value)).trigger('change'); 

       } 
      }) 

     }); 
</script>

Я получил анимацию за ручку в другом файле, и она работает, когда я обновить, так что я просто должен получить его в настоящая страница.

источник

2015-09-29 user3442879

Websockets.

С умным ajax вы можете попробовать имитировать реальное время. В противном случае websocket - это путь.

Основываясь на одном из комментариев на моем ответ, вы можете быть заинтересованы в рамках Javascript socket.io

От Mozilla

WebSockets является передовой технологией, которая позволяет открыть интерактивный сеанс связи между браузером пользователя и сервером . С помощью этого API вы можете отправлять сообщения на сервер и получать ответы от , не требуя опроса сервера для ответа.

См. Этот пример, снятый с WebSocket, что определенно поможет вам приступить к работе.

\t var wsUri = "ws://echo.websocket.org/"; 
 
\t var output; 
 

 
\t function init() { 
 
\t \t output = document.getElementById("output"); 
 
\t \t testWebSocket(); 
 
\t } 
 

 
\t function testWebSocket() { 
 
\t \t websocket = new WebSocket(wsUri); 
 
\t \t websocket.onopen = function(evt) { 
 
\t \t \t onOpen(evt) 
 
\t \t }; 
 
\t \t websocket.onclose = function(evt) { 
 
\t \t \t onClose(evt) 
 
\t \t }; 
 
\t \t websocket.onmessage = function(evt) { 
 
\t \t \t onMessage(evt) 
 
\t \t }; 
 
\t \t websocket.onerror = function(evt) { 
 
\t \t \t onError(evt) 
 
\t \t }; 
 
\t } 
 

 
\t function onOpen(evt) { 
 
\t \t writeToScreen("CONNECTED"); 
 
\t \t doSend("WebSocket rocks"); 
 
\t } 
 

 
\t function onClose(evt) { 
 
\t \t writeToScreen("DISCONNECTED"); 
 
\t } 
 

 
\t function onMessage(evt) { 
 
\t \t writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>'); 
 
\t \t websocket.close(); 
 
\t } 
 

 
\t function onError(evt) { 
 
\t \t writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); 
 
\t } 
 

 
\t function doSend(message) { 
 
\t \t writeToScreen("SENT: " + message); 
 
\t \t websocket.send(message); 
 
\t } 
 

 
\t function writeToScreen(message) { 
 
\t \t var pre = document.createElement("p"); 
 
\t \t pre.style.wordWrap = "break-word"; 
 
\t \t pre.innerHTML = message; 
 
\t \t output.appendChild(pre); 
 
\t } 
 
\t window.addEventListener("load", init, false);

<h2>WebSocket Test</h2> 
 
<div id="output"></div>

источник

2015-09-29 02:22:46 Jesse

Вы понимаете, что Socket.io является высоким уровнем абстракции на WebSockets, которые имеют автоматический откат к давно опросу (кометам) Дон Не так ли? – slebetman

не уверен, что я бы порекомендовал socket.io (или сокеты в общем) кому-то с PHP-кодом в вопросе ... – dandavis

@slebetman Да socket.io - хорошая структура. – Jesse

\t var wsUri = "ws://echo.websocket.org/"; 
 
\t var output; 
 

 
\t function init() { 
 
\t \t output = document.getElementById("output"); 
 
\t \t testWebSocket(); 
 
\t } 
 

 
\t function testWebSocket() { 
 
\t \t websocket = new WebSocket(wsUri); 
 
\t \t websocket.onopen = function(evt) { 
 
\t \t \t onOpen(evt) 
 
\t \t }; 
 
\t \t websocket.onclose = function(evt) { 
 
\t \t \t onClose(evt) 
 
\t \t }; 
 
\t \t websocket.onmessage = function(evt) { 
 
\t \t \t onMessage(evt) 
 
\t \t }; 
 
\t \t websocket.onerror = function(evt) { 
 
\t \t \t onError(evt) 
 
\t \t }; 
 
\t } 
 

 
\t function onOpen(evt) { 
 
\t \t writeToScreen("CONNECTED"); 
 
\t \t doSend("WebSocket rocks"); 
 
\t } 
 

 
\t function onClose(evt) { 
 
\t \t writeToScreen("DISCONNECTED"); 
 
\t } 
 

 
\t function onMessage(evt) { 
 
\t \t writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>'); 
 
\t \t websocket.close(); 
 
\t } 
 

 
\t function onError(evt) { 
 
\t \t writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); 
 
\t } 
 

 
\t function doSend(message) { 
 
\t \t writeToScreen("SENT: " + message); 
 
\t \t websocket.send(message); 
 
\t } 
 

 
\t function writeToScreen(message) { 
 
\t \t var pre = document.createElement("p"); 
 
\t \t pre.style.wordWrap = "break-word"; 
 
\t \t pre.innerHTML = message; 
 
\t \t output.appendChild(pre); 
 
\t } 
 
\t window.addEventListener("load", init, false);

<h2>WebSocket Test</h2> 
 
<div id="output"></div>

источник

2016-12-27 18:37:27

AJAX или socket.io?

ответ

Смежные вопросы