JavaScript における Web コミュニケーションの知識ポイントのまとめ (共有)

Web コミュニケーションは非常に大きなテーマであり、幅広い分野をカバーしています。最近JavaScriptでのWebコミュニケーションの知識を学んだので、ここにまとめておきます。

1. はじめに

1. Comet テクノロジー

Web アプリケーションのフロントエンドであるブラウザーの処理機能は限られています。ブラウザの開発にはクライアントソフトウェアのバージョンアップが必要ですが、同時にクライアントブラウザソフトウェアの多様性は、ある意味新しいブラウザ技術の普及にも影響を及ぼします。

Web アプリケーションにおけるブラウザの主な仕事は、リクエストを送信し、サーバーから返された情報を解析し、それをさまざまなスタイルで表示することです。 AJAX はブラウザ テクノロジの発展の成果であり、ブラウザ側で非同期リクエストを送信することでシングル ユーザー操作の応答性を向上させます。

しかし、Web は本質的にマルチユーザー システムであり、どのユーザーにとってもサーバーは別のユーザーとみなすことができます。既存の AJAX テクノロジの開発では、マルチユーザー Web アプリケーションで更新情報をリアルタイムでクライアントに送信するという問題を解決できないため、ユーザーは「古い」情報の下で操作する可能性があります。 AJAX の適用により、バックグラウンド データをより頻繁に更新できるようになります。

インターネットの発展に伴い、さまざまな Web サイト監視、インスタント見積、インスタント メッセージング システムなどの Web アプリケーションが無限に登場します。ユーザーにより良いエクスペリエンスを提供するために、サーバーは頻繁に情報をプッシュする必要があります。クライアント。

開発者は通常、AJAX ベースのロング ポーリングまたは iframe および htmlfile に基づくストリーム処理を使用します。もちろん、プログラムによっては、比較的良好なパフォーマンスで「プッシュ」情報をサポートするために、さまざまなプラグイン (Java アプレットまたは Flash) をクライアントにインストールする必要があります。

2. HTTP プロトコルにおける長い接続と短い接続

短い接続の操作手順は次のとおりです: 接続の確立 - データ送信 - 接続の終了...接続の確立 - データ送信 - 接続の終了

長期接続の手順は次のとおりです: 接続の確立-データ送信...(接続を維持)...データ送信-接続を閉じる

長期接続と短期接続の違い 主な違い原因は、クライアントとサーバーで採用されているシャットダウン戦略の違いにあります。短い接続では、接続を確立した後、接続を閉じる前に 1 つのデータ送信のみが実行されますが、長い接続では、接続が閉じられるまで複数のデータ送信が実行されます (長い接続では、接続は Connection: Closed ヘッダー フィールドによって閉じられます)。

2. Webコミュニケーション

まず、xhrのreadystateのさまざまな状態を理解する必要があります。

1. ポーリング

ポーリングは、情報を「プル」する動作モードです。タイマーを設定してサーバーに情報があるかどうかを定期的に問い合わせます。データを送信するための接続が確立されるたびに、リンクが閉じられます。

フロントエンド実装:

var polling = function(url, type, data){
    var xhr = new XMLHttpRequest(), 
        type = type || "GET",
        data = data || null;

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;
        }
    };

    xhr.open(type, url, true);
    //IE的ActiveXObject("Microsoft.XMLHTTP")支持GET方法发送数据，
    //其它浏览器不支持，已测试验证
    xhr.send(type == "GET" ? null : data);
};

var timer = setInterval(function(){
    polling();
}, 1000);

ポーリング プロセス中に、ネットワーク上の理由により前の xhr オブジェクトが送信されなかった場合、タイマーは次のクエリを開始し、最後のクエリが送信はまだキュー内にありますが、この問題についてはまだ調査していません。興味があれば、ajax リクエスト管理キューを自分で作成できます。

2. ロングポーリング

実際、ロングポーリングには特別なことは何もありません。接続が閉じられたときにすぐに xhr オブジェクトに接続することです~ コードを読んでください :

var longPoll = function(type, url){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        // 状态为 4，数据传输完毕，重新连接
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;

            longPoll(type, url);
        }
    };

    xhr.open(type, url, true);
    xhr.send();
}

サーバーが切断されると、クライアントは少しの休息も与えずにすぐに接続します。これはロングポーリングです。

3. データ フロー

データ フロー方式では、確立された接続が切断される前、つまり、readystate が 3 の時点でデータを受け取りますが、厄介な点はここにもあります。送信の場合、取得する xhr.response はデータの半分になる可能性があります。データ送信プロトコルを定義するのが最善です。たとえば、最初の 2 バイトは文字列の長さを表し、この長さの内容のみを取得します。をクリックし、カーソルの位置を変更します。

データ形式が次の場合: data splitChar data はデータの内容、splitChar はデータの終了マーク (長さは 1) です。この場合、送信されるデータの内容は data splitChar data splitChar data splitChar...

var dataStream = function(type, url){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){

        // 状态为 3，数据接收中
        if(xhr.readyState == 3) {
            var i, l, s;

            s = xhr.response; //读取数据
            l = s.length;     //获取数据长度

            //从游标位置开始获取数据，并用分割数据
            s = s.slice(p, l - 1).split(splitChar);

            //循环并操作数据
            for(i in s) if(s[i])  deal(s[i]);

            p = l;  //更新游标位置

        }

        // 状态为 4，数据传输完毕，重新连接
        if(xhr.readyState == 4) {
            xhr.onreadystatechange = null;

            dataStream(type, url);
        }
    };

    xhr.open(type, url, true);
    xhr.send();
};

このコードには問題があります。readystate が 3 の場合、データは取得できますが、このとき取得されたデータは、データの一部全体である場合、後半は取得できません。

readystate は、データ送信が完了するまで変更されません。これは、残りのデータの受け入れを継続しないことを意味します。以下の例でわかるように、readystate を定期的に監視できます。

この種の処理は複雑ではありませんが、問題があります。上記のポーリングとロングポーリングはすべてのブラウザでサポートされているため、IE 互換のコードは作成しませんでしたが、ここでは、IE の下位バージョンでは、readystate が 3 のときにデータを読み取ることができないため、他の方法を使用してこれを実現する必要があります。 。

ajax が Web トピックに登場する前に、iframe という魔法の武器がすでにありました。iframe を使用すると、引き続きデータを非同期で取得できます。IE の以前のバージョンでは、iframe を使用してデータ ストリームを受け入れることができます。

if(isIE){
    var dataStream = function(url){
        var ifr = document.createElement("iframe"), doc, timer;

        ifr.src = url;
        document.body.appendChild(ifr);

        doc = ifr.contentWindow.document;

        timer = setInterval(function(){

            if(ifr.readyState == "interactive"){
                // 处理数据，同上
            }

            // 重新建立链接
            if(ifr.readyState == "complete"){
                clearInterval(timer);

                dataStream(url);
            }
        }, 16);
    };
};

定时去监听iframe的readystate的变化，从而获取数据流，不过，上面的处理方式还是存在问题。数据流实现“服务器推”数据的原理是什么呢，就是文档(数据)还没有加载完，这个时候浏览器的工作就是去服务器拿数据完成文档(数据)加载。

所以上述利用iframe的方式获取数据，会使浏览器一直处于加载状态，title上的那个圈圈一直在转动，鼠标的状态也是loading，这看着是相当不爽的。

幸好，IE提供了HTMLFile对象，这个对象就相当于一个内存中的Document对象，它会解析文档。所以我们创建一个HTMLFile对象，在里面放置一个IFRAME来连接服务器。这样，各种浏览器就都支持了。

if(isIE){
    var dataStream = function(url){
        var doc = new ActiveXObject("HTMLFile"), 
            ifr = doc.createElement("iframe"), 
            timer, d;

        doc.write("

");         ifr.src = url;         doc.body.appendChild(ifr);         d = ifr.contentWindow.document;         timer = setInterval(function(){             if(d.readyState == "interactive"){                 // 处理数据，同上             }             // 重新建立链接             if(d.readyState == "complete"){                 clearInterval(timer);                 dataStream(url);             }         }, 16);     }; };

4.websocket

websocket是前端一个神器，ajax用了这么久了，相关技术也是很成熟，不过要实现个数据的拉取确实十分不易，从上面的代码中也看到了，各种兼容性问题，各种细节处理问题。

var ws = new WebSocket("ws://www.example.com:8888");

ws.onopen = function(evt){};
ws.onmessage = function(evt){
    deal(evt.data);
};
ws.onclose  = function(evt){};

//ws.close();

新建一个WebSocket实例，一切就OK了，ws:// 是websocket的连接协议，8888为端口号码。onmessage中提供了data这个属性，相当方便

5.EventSource

HTML5中提供的EventSource这玩意儿，这是无比简洁的服务器推送信息的接受函数。

new EventSource("test.php").onmessage=function(evt){
    console.log(evt.data);
};

简洁程度和websocket是一样的啦，只是这里有一个需要注意的地方，test.php输出的数据流应该是特殊的MIME类型，要求是"text/event-stream"，如果不设置的话，你试试~ （直接抛出异常）

6.ActionScript

情非得已就别考虑这第六种方式了，虽说兼容性最好，要是不懂as，出了点bug你也不会调试。

具体实现方法：在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash 程序。JavaScript 通过调用此 Flash 程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到服务器端以 XML 格式传送的信息后可以很容易地控制 HTML 页面的内容显示。

7.Java Applet套接口

三、后端处理方式

本文主要是总结Javascript的各种通讯方式，后端配合node来处理，应该是挺给力的。

var conns = new Array();

var ws = require("websocket-server");
var server = ws.createServer();

server.addListener("connection", function(connection){
  console.log("Connection request on Websocket-Server");
  conns.push(connection);
  connection.addListener('message',function(msg){
        console.log(msg);
        for(var i=0; i<conns.length server.listen><p>下面是一个php的测试demo。</p>
<pre class="brush:php;toolbar:false">header('Content-Type:text/html; charset=utf-8');
while(1){
    echo date('Y-m-d H:i:s');
    flush();
    sleep(1);
};

四、web 通信方式利弊分析

轮询，这种方式应该是最没技术含量的，操作起来最方便，不过是及时性不强，把定时器的间隔时间设置的短一些可以稍微得到缓和。

长轮询，算是比较不错的一个web通讯方式，不过每次断开连接，比较耗服务器资源，客户端到无所谓。

数据流，他和长轮询不同之处是接受数据的时间不一样，数据流是readystate为3的时候接受，低版本IE不太兼容，处理起来略麻烦，而且还要自己设计数据传输协议。不过他对资源的消耗比上面几种都可观。

websocket和EventSource，两个利器，不过，没几个浏览器支持，这是比较让人伤心~

ActionScript和Java Applet，两者都是需要在客户端安装插件的，一个是Flash插件，一个是Java插件，而且搞前端的人一般对这东西不太熟悉，如果没有封装比较好的库可以使用，那建议还是别用了。

更多编程相关知识，请访问：编程视频！！

以上がJavaScript における Web コミュニケーションの知識ポイントのまとめ (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。