Web全栈技术指南-3.8 服务器推送 - 书目录

Web全栈技术指南-3.8 服务器推送

3.8 服务器推送

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

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

轮询(polling)

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

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

长轮询(long polling)

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

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

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

WebSocket

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

一个简单的例子如下1

<!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对象。该对象具有onopenoncloseonmessage事件,以及sendclose方法,使用起来十分简单。

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

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

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

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_server/server_push.html