StackOverflow的通知如何工作？

Question

我的意思是使用什麼技術在客戶端和服務器之間發送和接收數據？當發生變化時，它如何實現接近實時的結果。

有人可以告訴我使用的代碼嗎？

Answer 1

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

AJAX是指只允許更新頁面的一部分的一組技術。通常，它涉及JavaScript（通常是jQuery）調用Web服務，該服務返回請求的數據（並可選擇更新數據）。客戶端腳本隨後根據需要顯示數據。

儘管許多變化都是圍繞某種Web服務構建的更高級的抽象，

這樣做的例子超出了stackoverflow答案的範圍。但網絡上有很多例子。您可以在文章Calling Web Services Using AJAX中看到使用WebForms和jQuery的示例。

Answer 2

StackOverflow使用websocket在客戶端和服務器之間保持開放連接，從中可以將數據從服務器傳遞到客戶端。這通常優於AJAX輪詢，因爲數據是將推送給客戶端，而不是必須通過AJAX請求進行輪詢和拉取。最有可能的SO回落到舊版本瀏覽器的舊AJAX輪詢方法不具有對網絡套接字支持

從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'); 
});