Zusammenfassung einiger Wissenspunkte zur Webkommunikation in JavaScript (Teilen)

Webkommunikation ist ein sehr großes Thema und deckt ein breites Themenspektrum ab. Da ich kürzlich einige Webkommunikationskenntnisse in Javascript erworben habe, werde ich sie hier zusammenfassen.

1. Einführung

1. Comet-Technologie

Als Frontend von Webanwendungen verfügt der Browser über begrenzte Verarbeitungsfunktionen. Die Entwicklung von Browsern erfordert Aktualisierungen der Client-Software. Gleichzeitig wirkt sich die Vielfalt der Client-Browser-Software in gewisser Weise auch auf die Förderung neuer Browser-Technologien aus.

In Webanwendungen besteht die Hauptaufgabe des Browsers darin, Anfragen zu senden, die vom Server zurückgegebenen Informationen zu analysieren und sie in verschiedenen Stilen anzuzeigen. AJAX ist das Ergebnis der Entwicklung der Browser-Technologie. Es verbessert die Reaktionsfähigkeit von Einzelbenutzervorgängen durch das Senden asynchroner Anforderungen auf der Browserseite.

Aber das Web ist im Wesentlichen ein Mehrbenutzersystem. Für jeden Benutzer kann der Server als ein anderer Benutzer betrachtet werden. Die Entwicklung der vorhandenen AJAX-Technologie kann das Problem der Echtzeitübertragung aktualisierter Informationen an den Client in einer Mehrbenutzer-Webanwendung nicht lösen, sodass Benutzer möglicherweise mit „veralteten“ Informationen arbeiten. Durch den Einsatz von AJAX ist es möglich, Hintergrunddaten häufiger zu aktualisieren.

Mit der Entwicklung des Internets entstehen unzählige Webanwendungen, darunter verschiedene Website-Überwachungs-, Sofortangebots- und Instant-Messaging-Systeme. Um Benutzern ein besseres Erlebnis zu bieten, muss der Server häufig Informationen an den Client weiterleiten.

Entwickler verwenden im Allgemeinen die auf AJAX basierende Long-Polling-Methode oder die auf Iframe und HTML-Datei basierende Streaming-Methode. Natürlich erfordern einige Programme die Installation verschiedener Plug-Ins (Java-Applet oder Flash) auf dem Client, um „Push“-Informationen mit relativ guter Leistung zu unterstützen.

2. Lange und kurze Verbindungen im HTTP-Protokoll

Die Arbeitsschritte einer kurzen Verbindung sind: Verbindung herstellen – Datenübertragung – Verbindung schließen … Verbindung herstellen – Datenübertragung – Verbindung schließen

Der Vorgang einer langen Verbindung Die Schritte sind : Verbindung herstellen - Datenübertragung ... (Verbindung beibehalten) ... Datenübertragung - Verbindung schließen

Der Unterschied zwischen langer und kurzer Verbindung liegt hauptsächlich in den unterschiedlichen Schließstrategien von Client und Server. Eine kurze Verbindung führt nur eine Datenübertragung durch, bevor die Verbindung nach dem Verbindungsaufbau geschlossen wird, während eine lange Verbindung mehrere Datenübertragungen durchführt, bis die Verbindung geschlossen wird (die Verbindung wird über das Headerfeld „Verbindung: geschlossen“ in einer langen Verbindung geschlossen).

2. Webkommunikation

Zunächst müssen wir die verschiedenen Bereitschaftszustände von xhr verstehen.

1. Abfragen

Abfragen sind eine Arbeitsweise zum „Abrufen“ von Informationen. Stellen Sie einen Timer ein, um den Server regelmäßig zu fragen, ob Informationen vorhanden sind. Nachdem jede Verbindung zur Datenübertragung hergestellt wurde, wird die Verbindung geschlossen.

Front-End-Implementierung:

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

Wenn während des Abfragevorgangs das vorherige xhr-Objekt aus Netzwerkgründen nicht übertragen wurde, hat der Timer bereits mit der nächsten Abfrage begonnen, ob sich die letzte Übertragung noch in der Warteschlange befindet Ich habe dieses Problem nicht untersucht. Wenn Sie interessiert sind, können Sie selbst eine Ajax-Anforderungsverwaltungswarteschlange schreiben.

2. Langes Polling

Tatsächlich ist das xhr-Objekt sofort verbunden, wenn die Verbindung geschlossen wird. ~ Code anzeigen:

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

Solange die Verbindung zum Server unterbrochen ist Der Client stellt sofort eine Verbindung her, ohne dass er einen Moment ruhen muss. Dies ist eine lange Abfrage.

3. Datenfluss

Die Datenflussmethode akzeptiert Daten, bevor die hergestellte Verbindung getrennt wird, d Die Antwort kann die Hälfte der Daten betragen. Am besten definieren Sie ein Datenübertragungsprotokoll. Beispielsweise stellen die ersten 2 Bytes die Länge der Zeichenfolge dar. Anschließend erhalten Sie nur den Inhalt dieser Länge und ändern dann die Position des Cursors .

Wenn das Datenformat lautet: Daten SplitChar-Daten sind der Dateninhalt, SplitChar ist das Datenende-Flag (Länge ist 1). Dann ist der übertragene Dateninhalt 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();
};

Es gibt ein Problem mit diesem Code. Wenn der Readystate 3 ist, können die Daten abgerufen werden, aber die zu diesem Zeitpunkt erhaltenen Daten sind möglicherweise nur ein Teil davon Gesamtdaten. Dann können Sie die zweite Hälfte nicht erhalten.

readystate ändert sich erst, wenn die Datenübertragung abgeschlossen ist, was bedeutet, dass die verbleibenden Daten nicht mehr akzeptiert werden. Wir können den Bereitschaftszustand regelmäßig überwachen, wie Sie im folgenden Beispiel sehen können.

Diese Art der Verarbeitung ist nicht kompliziert, aber es gibt Probleme. Die oben genannten Abfragen und langen Abfragen werden von allen Browsern unterstützt, daher habe ich keinen IE-kompatiblen Code geschrieben, aber hier erlaubt die niedrigere Version des IE das Lesen von Daten nicht, wenn der Bereitschaftsstatus 3 ist, sodass wir andere Methoden verwenden müssen, um dies zu erreichen .

Bevor Ajax das Web-Thema betrat, hatten wir bereits eine magische Waffe, nämlich iframe. Sie können Daten weiterhin asynchron mit iframe abrufen. Bei niedrigeren Versionen von IE können Sie iframe verwenden, um Datenströme zu akzeptieren.

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插件，而且搞前端的人一般对这东西不太熟悉，如果没有封装比较好的库可以使用，那建议还是别用了。

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

Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Wissenspunkte zur Webkommunikation in JavaScript (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!