AJAX或socket.io？

Question

I am currently making a script, which should work as following: When you click a button the knob next to the button should insert a value. This have to be done in real time. So, now I would like to know what I should use for this. I researched a little and came up with ajax or socket.io, but which is better?

Some code:

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

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

Animation for knob:

<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>

I got the animation for the knob in another file and it works when I refresh, so I just have to get it into the real page.

Answer 1

Answer: Websockets.

With clever ajax you can try to simulate real time. Otherwise websocket is the way to go.

Based on one of the comments on my answer you may be interested in the Javascript framework socket.io

From Mozilla

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

See this example pulled from WebSocket that will definitely help you get started.

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

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

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

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

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

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

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

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

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

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

</div>