• Chapter11 与Web服务器通信

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 向Web服务器发送消息

    XMLHttpRequest对象

    让JavaScript代码自己发送请求以便随时获取数据，请求是异步的

    使用情况：

    ①获取保存在服务器上的数据

    ②只有在服务器才能完成计算的数据

    ③其他人Web服务器上的数据

    向Web服务器提问

    服务器端代码略

    页面上：

    <script>

      var req = new XMLHttpRequest();  //创建XMLHttpRequest对象

    function askServer() {

      var number1 = document.getElementById("number1").value;

      var number2 = document.getElementById("number2").value;

      var dataToSend = "?number1=" + number1 + "&number2=" + number2;

      req.open("GET", "WebCalculator.php" + dataToSend, true);         //准备发送请求的第一步，使用open()函数。接受的参数为HTTP操作类型（GET或POST）、目标URL、浏览器是否异步工作的布尔值

      req.onreadystatechange = handleServerResponse;              //制定服务器返回信息后触发的事件

      req.send();                       //发送请求

              document.getElementById("result").innerHTML = "The request has been sent.";

    }

    function handleServerResponse() {

    //readyState的值：1—初始化完毕 | 2—请求已经发送 | 3—已经收到部分相应 | 4—请求相应完成。因此这个值为4的时候才有意义。

    //status属性保存HTTP状态码.    200—一切顺利 ； 401——不允许访问；404——没有找到；302——已经移动；503——服务器忙

      if ((req.readyState == 4) && (req.status == 200))          

     {

        var result = req.responseText;               //从response属性中取得结果

        document.getElementById("result").innerHTML = "The answer is: " + result;

      }

    }

      </script>

    取得新内容

    播放幻灯的实例，没有什么特别的，就是发送请求，获得回复之后再替换目标DIV

    http://www.prosetech.com/html5/Chapter%2011/Slides/ChinaSites.html

    function goToNewSlide() {

      if (req != null) {

        req.open("GET", "ChinaSites" + slideNumber + "_slide" + ".html", true);

        req.onreadystatechange = newSlideReceived;

        req.send();

      }

      else {

        // 有错误的处理

      }

    }

    • 服务器发送事件

    XMLHttpRequest是一对一的，服务器响应后通信就结束了

    使网页与服务器保持长期的联系可以使用轮询（例如Javascript的setInterval和setTimeout函数），不过这种方案会给服务器造成较大的负担；另一种方案就是服务器发送事件，网页与服务器保持连接，服务器任何时候都可以发送消息。（所有主流浏览器均支持服务器发送事件，除了 ie。）

    例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

    消息格式

    服务器发送事件的数据必须遵循一个简单但明确的格式，每条消息以“data:”开头，然后是实际的消息内容，再加上换行符

    如果一条消息分为多行，每行开头都需要有“data:”，结束必须要换行符

    除了消息本身，服务器还发送唯一的ID（“id:”）和一个连接超时选项（"retry:"）

    例子：

    id:495\n

    retry:15000\n

    data:Web服务器对你发送此消息\n

    通过服务器脚本发送消息

    此书中是用php写的。不过看起来就是跟ajax返回数据类型的写法

    找了个小例子：http://www.cnblogs.com/super-d2/archive/2012/10/11/2720678.html

    response.setHeader("Cache-Control", "no-cache");out.print("data: >> server Time" + new java.util.Date() );out.flush();

    在网页中处理消息

    var messageLog;

    var timeDisplay;

    var source;

    window.onload = function() {

      messageLog = document.getElementById("messageLog");

      timeDisplay = document.getElementById("timeDisplay");

    }

    function startListening() {

      source = new EventSource("TimeEvents.php");   //创建EventSource对象，，传入服务器端发送消息的脚本URL

      source.onmessage = receiveMessage;                   //将处理的函数指定给onmessage事件，这个时间会在页面接收到消息时触发

      messageLog.innerHTML += "<br>" + "Started listening for messages."

    }

    function stopListening() {              //停止接收消息

      source.close();

      messageLog.innerHTML += "<br>" + "No longer listening for messages."

    }

    function receiveMessage(event) {

      messageLog.innerHTML += "<br>" + "New web server time received: " + event.data;

      timeDisplay.innerHTML = event.data;                    //从事件对象的data属性中取得消息

    }

    轮询服务器端事件

    有意思的是当服务器有意关闭连接，浏览器还是会自动重新打开连接再次请求脚本，然后重新开始。于是可以利用这一的机制，下面这样的脚本能做到用1分钟时间更新，然后暂停服务2分钟；这种方案有助于减少Web服务器的流量，但要考虑数据更新的频率即保持数据最新的必要程度

    <?php

      header("Content-Type: text/event-stream");

      header('Cache-Control: no-cache');

      //告诉浏览器连接关闭两分钟后再重新连接

      echo "retry: 120000" . PHP_EOL;

      //保存开始时间.

      \$startTime = time();

      do {

        //发送消息

        \$currentTime = date("h:i:s", time());

        echo "data: " . \$currentTime . PHP_EOL;

        echo PHP_EOL;

        flush();

        //过了1分钟结束脚本.

        if ((time() - \$startTime) > 60) {

          die();

        }

        // 等5秒钟发送新消息.

        sleep(5);

      } while(true);

    ?>

    • Web Socket

    目的是保持浏览器与服务器的正式对话，因为服务器发送事件的通信完全是单向的。不过Web Socket还没有达到较好的跨浏览器兼容水平

    访问Web Socket

    为了使用Web Socket，需要在Web服务器端运行Web Socket服务器，负责协调各方通信并且启动后不间断地运行下去

    最好的是安装别人写好的Web Socket服务器，然后再设计网页来与之通信

    简单的Web Socket客户端

    var socket= new WebSocket("ws://localhost/socketServer.php");   //ws:开头表示Web Socket连接的新协议，还支持以wss://开头的URL

    创建好这个对象后，页面会尝试连接服务器，此时便可以使用这个对象的4个事件

    socket.onopen = connectionOpen;           //建立连接后出发此事件

    socket.onmessage = messageReceived;        //收到消息触发

    socket.onerror = erroeOcurred;

    socket.onClose = connectionClosed;

    function connectionOpen(){

        socket.send("用户名：shuiboli@126.com");     //send()方法发送消息，接受纯文本内容作为参数

    }

    function connectionClosed(){

        socket.disconnect();

    }

    使用现成的Web Socket服务器

    Java版的Web Socket服务器：http://jwebsocket.org/     上面还有很多例子哟

    应用的例子：

    ①最简单的，echo程序：http://www.websocket.org/echo.html

    ②简单的聊天程序  http://html5demos.com/web-socket

    ③多人绘图板  http://mrdoob.com/projects/multiuserpad      （不过我没打开成功这个网页）

    PS：无意间发现了另一个HTML5绘图的网站  http://muro.deviantart.com/

    • 标签：
    • 事件
    • web
    • 连接
    • var
    • 服务器
    • web服务器
    • http
    • 发送
    • 消息
    • socket
    • 与Web服务器通信
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部