3.8 服务器推送

服务器推送（Server Push）是一种由服务器发起的消息推送技术，用于把服务器端产生的消息即时地推送给客户端，典型的应用场景如Web聊天、微博消息等。

服务器推送与通常的HTTP请求不同——后者都是由客户端发起的，但实际上在WebSocket出现以前，Web原生的服务器推送技术都是用普通的HTTP来模拟的，如果不借助于Flash或者Applet这样的第三方工具的话。下面让我们来了解一些主要的推送技术，并重点了解一下WebSocket。

轮询（polling）

这是一种最简单的模拟推送技术：客户端以一定时间间隔定期向服务器发起HTTP请求。

这种技术简单、实用，但如果间隔时间太长（如几分钟）则即时性不高，间隔太短（如几秒钟）则对服务器的压力较大（考虑到同时有N个用户的话）。所以对它的应用要考虑具体场景。

长轮询（long polling）

这也是一种模拟推送技术，其基本方式是：

客户端发起一个HTTP请求；
如果服务器有更新则返回更新，否则阻塞；
客户端在收到更新后立即发起一个新的HTTP请求，如此循环往复

长轮询可以通过Ajax实现。它是一种在WebSocket出现之前或当后者不可用时的一种有效的服务器推送技术，属于Comet技术的一种。但这种技术，包括Comet的其他技术，在实现上比较复杂，参考这里了解更多：

WebSocket

WebSocket作为HTML5的一部分在2008年被提出，如今已经被主要的浏览器实现。它可以让Web服务器和Web客户端通过一个全双工（full-duplex）的TCP连接进行通讯。TCP即传输控制协议（Transmission Control Protocol），它提供一种稳定的端到端传输。TCP连接就象一个管道，任何一端都可以向其中读／写数据。

一个简单的例子如下¹：

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">

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

</script>

<h2>WebSocket Test</h2>

<div id="output"></div>

你可以把以上代码保存在一个文件中，用浏览器打开就能看到效果。

在上面的代码中：

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

定义了一个WebSocket服务器的URI，以ws://开头。另外还有一种以wss://开头的URI，代表一个SSL加密的WebSocket URI。

  websocket = new WebSocket(wsUri);

这行代码创建了一个WebSocket对象。该对象具有onopen、onclose和onmessage事件，以及send和close方法，使用起来十分简单。

WebSocket还需要服务器端的实现，即WebSocket服务器，它可以由HTTP服务器同时提供，参考这里了解更多： https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers 一般来说各主要编程语言都有自己的实现，我们只要选择合适的即可。

更多关于WebSocket可参考：https://en.wikipedia.org/wiki/WebSocket

¹. 来自于 https://www.websocket.org/echo.html ↩

3.8 服务器推送