JavaScript의 일부 웹 커뮤니케이션 지식 포인트 요약(공유)

웹 커뮤니케이션은 매우 큰 주제이며 광범위한 주제를 다루고 있습니다. 최근 자바스크립트로 웹 커뮤니케이션 지식을 좀 배웠기 때문에 여기에 정리해보겠습니다.

1. 소개

1. Comet 기술

웹 애플리케이션의 프런트엔드인 브라우저는 제한된 처리 기능을 가지고 있습니다. 브라우저를 개발하려면 클라이언트 소프트웨어 업그레이드가 필요합니다. 동시에 클라이언트 브라우저 소프트웨어의 다양성은 어떤 의미에서는 새로운 브라우저 기술의 홍보에도 영향을 미칩니다.

웹 애플리케이션에서 브라우저의 주요 작업은 요청을 보내고, 서버에서 반환된 정보를 구문 분석하고, 이를 다양한 스타일로 표시하는 것입니다. AJAX는 브라우저 기술 개발의 결과로 브라우저 측에서 비동기 요청을 보내 단일 사용자 작업의 응답성을 향상시킵니다.

그러나 웹은 본질적으로 다중 사용자 시스템입니다. 어떤 사용자에게든 서버는 또 다른 사용자로 간주될 수 있습니다. 기존 AJAX 기술의 개발로는 다중 사용자 웹 애플리케이션에서 업데이트된 정보를 클라이언트에 실시간으로 전송하는 문제를 해결할 수 없으므로 사용자는 "오래된" 정보 하에서 작업할 수 있습니다. AJAX를 적용하면 배경 데이터를 더 자주 업데이트할 수 있습니다.

인터넷의 발달과 함께 다양한 웹사이트 모니터링, 인스턴트 견적, 인스턴트 메시징 시스템 등 웹 애플리케이션이 끝없이 등장하고 있습니다. 사용자에게 더 나은 경험을 제공하려면 서버가 클라이언트에 정보를 자주 푸시해야 합니다.

개발자들은 일반적으로 AJAX 기반의 롱 폴링 방식이나 iframe 및 htmlfile 기반의 스트리밍 방식을 사용합니다. 물론 일부 프로그램에서는 비교적 좋은 성능으로 "푸시" 정보를 지원하기 위해 클라이언트에 다양한 플러그인(Java 애플릿 또는 플래시)을 설치해야 합니다.

2. HTTP 프로토콜의 긴 연결과 짧은 연결

짧은 연결의 작업 단계는 다음과 같습니다: 연결 설정-데이터 전송-연결 닫기...연결 설정-데이터 전송-연결 닫기

긴 연결의 작업 단계는 다음과 같습니다. : 연결 설정 - 데이터 전송...(연결 유지)...데이터 전송 - 연결 닫기

긴 연결과 짧은 연결의 차이점은 주로 클라이언트와 서버가 채택하는 다양한 종료 전략에 있습니다. 짧은 연결은 연결이 설정된 후 연결을 끊기 전에 한 번의 데이터 전송만 수행하는 반면, 긴 연결은 연결이 끊어질 때까지 여러 번의 데이터 전송을 수행합니다(긴 연결에서는 Connection:closed 헤더 필드를 통해 연결이 닫힙니다).

2. 웹 통신

우선 xhr의 다양한 레디상태를 이해해야 합니다.

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. Long-polling

사실 Long Polling에는 특별한 것이 없습니다. 연결이 끊어지면 즉시 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. 데이터 흐름

데이터 흐름 방법은 설정된 연결이 끊어지기 전에, 즉 준비 상태가 3일 때 데이터를 허용하지만, 데이터가 전송되고 xhr이 발생하기 때문에 문제가 발생합니다. 응답은 데이터의 절반일 수 있습니다. 예를 들어 처음 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는 데이터 전송이 완료될 때까지 변경되지 않습니다. 즉, 남은 데이터를 계속 수락하지 않는다는 의미입니다. 아래 예에서 볼 수 있듯이 우리는 정기적으로 Readystate를 모니터링할 수 있습니다.

이런 종류의 처리는 복잡하지 않지만 문제가 있습니다. 위의 폴링과 롱 폴링은 모든 브라우저에서 지원되므로 IE 호환 코드를 작성하지 않았지만 여기서는 하위 버전의 IE에서는 Readystate가 3일 때 데이터 읽기를 허용하지 않으므로 이를 달성하려면 다른 방법을 사용해야 합니다. .

Ajax가 웹 주제를 시작하기 전에 우리는 이미 마법의 무기, 즉 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의 일부 웹 커뮤니케이션 지식 포인트 요약(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!