AJAX 还是 socket.io？答案

【问题标题】：AJAX or socket.io?AJAX 还是 socket.io？
【发布时间】：2015-12-26 09:06:26
【问题描述】：

我目前正在制作一个脚本，它的工作原理如下：单击按钮时，按钮旁边的旋钮应插入一个值。这必须实时完成。所以，现在我想知道我应该为此使用什么。我研究了一下，想出了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>

我在另一个文件中获得了旋钮的动画，并且在我刷新时它可以工作，所以我只需要将它放入实际页面即可。

【问题讨论】：

标签： javascript jquery ajax sockets websocket

【解决方案1】：

回答：Websockets。

通过聪明的ajax，您可以尝试模拟实时。否则websocket 是要走的路。

根据我回答的其中一个 cmets，您可能对 Javascript 框架 socket.io 感兴趣

来自Mozilla

WebSockets 是一种先进的技术，它可以打开一个用户浏览器与服务器。使用此 API，您可以将消息发送到服务器并接收事件驱动的响应，无需轮询服务器以获取回复。

请参阅从WebSocket 提取的此示例，这肯定会帮助您入门。

	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>

【讨论】：

您确实意识到 socket.io 是对 websockets 的高级抽象，它具有自动回退到长轮询（彗星）的功能，不是吗？
不确定我会向有问题的 PHP 代码的人推荐 socket.io（或一般的套接字）...
@dandavis，我在这里或标签中没有看到任何 PHP 代码
也许你需要一个更大的屏幕，它被部分截断了 ;) <?php echo $number; ?>"> 是的，你可以在 php 中做 websockets，但是有些东西告诉我 OP 会有问题让它工作......
@dandavis，啊：D——我很好奇你为什么不推荐套接字。如果你想在聊天中解释一下，我很乐意为你挑选

【解决方案2】：

	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>

【讨论】：