Synthèse de quelques points de connaissances en communication web en JavaScript (partage)

La communication Web est un très vaste sujet et couvre un large éventail de domaines. Parce que j'ai récemment acquis quelques connaissances en communication web en javascript, je vais les résumer ici.

1. Avant-propos

1. Technologie Comet

En tant que frontal des applications Web, le navigateur a des fonctions de traitement limitées. Le développement des navigateurs nécessite des mises à niveau des logiciels clients. Dans le même temps, la diversité des logiciels de navigation clients affecte également, dans un certain sens, la promotion des nouvelles technologies de navigateur.

Dans les applications Web, la tâche principale du navigateur est d'envoyer des requêtes, d'analyser les informations renvoyées par le serveur et de les afficher dans différents styles. AJAX est le résultat du développement de la technologie des navigateurs. Il améliore la réactivité des opérations mono-utilisateur en envoyant des requêtes asynchrones côté navigateur.

Mais le Web est essentiellement un système multi-utilisateurs. Pour tout utilisateur, le serveur peut être considéré comme un autre utilisateur. Le développement de la technologie AJAX existante ne peut pas résoudre le problème de la transmission d'informations mises à jour au client en temps réel dans une application Web multi-utilisateurs, de sorte que les utilisateurs peuvent opérer avec des informations « obsolètes ». L'application d'AJAX permet de mettre à jour les données d'arrière-plan plus fréquemment.

Avec le développement d'Internet, des applications Web apparaissent à l'infini, notamment divers systèmes de surveillance de sites Web, de cotations instantanées et de messagerie instantanée. Afin d'offrir aux utilisateurs une meilleure expérience, le serveur doit fréquemment transmettre des informations. le client.

Les développeurs utilisent généralement des interrogations longues ou un traitement de flux basés sur AJAX basés sur iframe et htmlfile. Bien entendu, certains programmes nécessitent l'installation de divers plug-ins (applet Java ou Flash) sur le client pour prendre en charge les informations « push » avec des performances relativement bonnes.

2. Connexions longues et courtes dans le protocole HTTP

Les étapes de fonctionnement de la connexion courte sont : établissement de la connexion - transmission des données - fermeture de la connexion... établissement de la connexion - transmission des données - Fermer la connexion

Les étapes pour une connexion longue sont : Établir une connexion - transmission de données...(garder la connexion)...transmission de données - fermer la connexion

La différence entre une connexion longue connexion et une connexion courte La principale différence réside dans les différentes stratégies d'arrêt adoptées par le client et le serveur. Une connexion courte n'effectue qu'une seule transmission de données avant de fermer la connexion après avoir établi la connexion, tandis qu'une connexion longue effectue plusieurs transmissions de données jusqu'à ce que la connexion soit fermée (la connexion est fermée via le champ d'en-tête Connection: fermé dans une connexion longue).

2. Communication Web

Tout d'abord, il faut comprendre les différents états de préparation du xhr.

1. Sondage

Le sondage est un mode de travail consistant à « extraire » des informations. Réglez une minuterie pour demander périodiquement au serveur s'il y a des informations. Une fois chaque connexion établie pour transmettre des données, le lien sera fermé.

Implémentation frontale :

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

Pendant le processus d'interrogation, si l'objet xhr précédent n'a pas été transmis pour des raisons de réseau, le minuteur a démarré la requête suivante et la dernière si la transmission sera toujours dans la file d'attente, je n'ai pas étudié cette question. Si vous êtes intéressé, vous pouvez écrire vous-même une file d’attente de gestion des requêtes ajax.

2. Long-polling

En fait, il n'y a rien de spécial à propos du long polling, c'est-à-dire que lorsque l'objet xhr ferme la connexion, il est immédiatement connecté à lui~ Lisez le code :

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

Tant que le serveur se déconnecte, le client se connectera immédiatement sans lui laisser un instant de repos. C'est une longue interrogation.

3. Flux de données

La méthode du flux de données accepte les données avant que la connexion établie ne soit déconnectée, c'est-à-dire lorsque l'état prêt est 3, mais le problème est aussi là, car les données sont étant Pour la transmission, le xhr.response que vous obtenez peut représenter la moitié des données. Il est préférable de définir un protocole de transmission de données. Par exemple, les 2 premiers octets représentent la longueur de la chaîne, et vous n'obtiendrez ensuite que le contenu de celle-ci. longueur, puis modifiez la position du curseur.

Si le format des données est : data splitChar data est le contenu des données, splitChar est l'indicateur de fin des données (la longueur est 1). Ensuite, le contenu des données transmises est 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();
};

Il y a un problème avec ce code Lorsque l'état prêt est 3, les données peuvent être obtenues, mais les données obtenues à ce moment-là ne peuvent être obtenues que. être la totalité de la partie des données, la seconde moitié ne peut pas être obtenue.

readystate ne changera pas tant que la transmission des données n'est pas terminée, ce qui signifie qu'il ne continuera pas à accepter les données restantes. Nous pouvons surveiller régulièrement l'état de préparation, comme vous pouvez le voir dans l'exemple ci-dessous.

Ce type de traitement n'est pas compliqué, mais il y a des problèmes. Les interrogations ci-dessus et les interrogations longues sont prises en charge par tous les navigateurs, donc je n'ai pas écrit de code compatible avec IE, mais ici, la version inférieure d'IE ne permet pas de lire les données lorsque l'état prêt est 3, nous devons donc utiliser d'autres méthodes pour y parvenir. .

Avant qu'Ajax n'entre dans le sujet Web, nous avions déjà une arme magique, à savoir l'iframe, qui peut toujours obtenir des données de manière asynchrone. Pour les versions inférieures d'IE, l'iframe peut être utilisée pour accepter des flux de données.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!