Question

我的意思是使用什么技术在客户端和服务器之间发送和接收数据？当变化发生时，它如何实现近实时结果。

有人可以告诉我使用的代码吗？

Answer 1

StackOverflow使用websockets在客户端和服务器之间保持开放连接，数据可以从服务器传递到客户端。这通常比AJAX轮询更可取，因为数据被推送到客户端，而不是必须通过AJAX请求进行轮询和拉取。对于不支持Web套接字的旧版浏览器，很可能会回归旧的AJAX轮询方法

SO networks tab screenshot

来自this pusher.com文章：

WebSockets代表了客户/服务器网络期待已久的发展技术。它们允许长期保持单个TCP套接字连接在客户端和服务器之间建立允许的双向，全双工，消息即时分发开销很小，导致连接速度非常低。

This SO post很好地解释了不同客户端 - 服务器通信方法的优缺点

实际代码如下所示：

StackExchange.realtime = function() {
  function Socket(options) {
    var array = options.split(",");
    var length = array.length;
    var i = index % length;
    var url = array[i];
    if (null != url && (0 != url.indexOf("ws://") && (0 != url.indexOf("wss://") && (url = ("https:" === document.location.protocol ? "wss://" : "ws://") + url))), "WebSocket" in window || "MozWebSocket" in window) {
      if (self) {
        try {
          publish("closing WebSocket");
          self.close();
        } catch (c) {
        }
      }
      if (!self) {
        try {
          self = "WebSocket" in window ? new WebSocket(url) : new MozWebSocket(url);
        } catch (ex) {
          return publish("Sockets disabled - " + ex.message), void 0;
        }
        self.onopen = function() {
          if (!U) {
            U = true;
          }
          index = 0;
          publish("WebSocket opened");
          f();
          handle();
          setInterval(done, 6E4);
        };
        self.onmessage = function(msg) {
          var self = $.parseJSON(msg.data);
          mockPlugin.emitEvent(self.action, [self.data]);
        };
        self.onclose = function() {
          self = null;
          publish("WebSocket closed");
          if (5 > index) {
            if (D > 0) {
              index++;
              D--;
              publish("reconnect attempt:" + index + " max retries:" + D);
              setTimeout(function() {
                StackExchange.realtime.init(options);
              }, (new Date).getTime() % 50 / 20 * 1E3);
            }
          }
        };
        self.onerror = function() {
          publish("WebSocket failed");
          self = null;
        };
      }
    }
  }
  function f() {
    if (null != self && 1 == self.readyState) {
      var i = 0;
      var l = elems.length;
      for (;l > i;i++) {
        publish("sending " + elems[i]);
        self.send(elems[i]);
      }
    }
  }
  function publish(topic) {
    if (StackExchange.options.enableLogging) {
      console.log("realtime: " + topic);
    }
  }
  function handle() {
    mockPlugin.addListener("hb", function(str) {
      self.send(str);
    });
  }
  function next(elm) {
    elems.push(elm);
    f();
  }
  function callback(i) {
    publish("unsubscribing " + i);
    var position = $.inArray(i, elems);
    if (-1 != position) {
      elems.splice(position, 1);
      if (null != self) {
        if (1 == self.readyState) {
          self.send("-" + i);
        }
      }
    }
  }

并通过以下方式调用：

StackExchange.ready(function () {
    StackExchange.realtime.init('wss://qa.sockets.stackexchange.com,ws://qa.sockets.stackexchange.com');
    StackExchange.realtime.subscribeToInboxNotifications();
    StackExchange.realtime.subscribeToReputationNotifications('1');
    StackExchange.realtime.subscribeToTopBarNotifications('1');
});

Answer 2

通常，使用某种形式的AJAX。

AJAX是指仅允许页面的一部分更新的技术组。通常，它涉及JavaScript（通常是jQuery）来调用Web服务，该服务返回所请求的数据（并且可选地更新数据）。然后，客户端脚本根据需要显示数据。

对此有很多变化，尽管许多只是围绕某种Web服务构建的更高级别的抽象。

执行此操作的示例超出了stackoverflow答案的范围。但网上有很多例子。您可以在文章Calling Web Services Using AJAX中看到使用WebForms和jQuery的示例。

Stack Overflow的通知如何工作？

2 个答案: