• 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/

    • 标签:
    • 服务器
    • 对象服务器
    • 消息对象
    • 事件对象
    • 属性
  • 加入的知识群:
    学习元评论 (0条)

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



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