AJAX or socket.io?

AJAX or socket.io?

本文关键字：io socket or AJAX      更新时间：2023-09-26

我目前正在制作一个脚本，它应该工作如下:当您单击按钮时，按钮旁边的旋钮应该插入一个值。这必须实时完成。现在我想知道我应该用什么来做这个。我研究了一下，想到了ajax或socket。好吧，但哪个更好呢?

一些代码:

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

我在另一个文件中得到了旋钮的动画，当我刷新时它可以工作，所以我只需要把它放到真正的页面中

答案:Websockets。

使用聪明的ajax，你可以尝试模拟实时。否则，websocket就是最好的选择。

根据对我的回答的一个评论，你可能对Javascript框架套接字感兴趣。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>

	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>

相关文章：