使用websocket替代ajax加快网站访问速度

一个使用websocket技术的实例

之前「17CE」网址：http://www.17ce.com 测速使用 ajax 轮询需要多个 http 请求才能获取测速结果，现在测速发现快了很多，查看网络请求发现使用了 websocket 请求，只需要一次 websocket 请求就可以获取结果。

使用 ajax 轮询：

ajax 轮询请求

共有 15 个请求

使用 websocket：

websocket请求

共有 5 个请求

websocket请求

ajax 轮询在不断地建立 http 连接，然后等待服务端处理，非常被动，服务器也不能主动地发送消息给客户端。http 的每一次请求与响应结束后，服务器将客户端信息全部丢弃，下次请求，必须携带身份信息(cookie)，非常费时。使用 websocket 建立一次链接就可以了，服务器和客户端可以互相发信息。

查看网页代码看是如何实现的：

1.首先加载js文件定义websocket对象：

js文件：https://www.17ce.com/smedia/js/ws.min.js?ver=20180613

2.使用websocket获取测速结果推送

// 点击测速时会调用ajax_check()
function ajax_check(pos,type,sid){
	var res = check_verify();   //使用ajax获取权限数据

	if(res.rt){
		.
		.
		.
		reqWS('wsapi.17ce.com:8001/socket/?' + setUrlK(res.data));
	}else{
		alert(res.message);
		check_end();
	}
}


// 发送websocket请求
function reqWS(url){
    ws.init({
        url: url   // 后台接口地址
    }).connect();

    ws.onmessage = function(message) {
        var res = "string" == typeof(message.data) ? JSON.parse(message.data) : message.data;
        // console.dir("TaskAccept receive:" + JSON.stringify(res));
        if(res['rt'] == 1 && res['msg'] == 'login ok'){
            login = true; s_time = new Date(); timeoutFlag = true;
            send_tx();   //发送请求 
            checkon(); // 测速中 隐藏div
            return

        }else if(res['rt'] == 1){
				.
				.
				.
        }else{
        	alert(JSON.stringify(res.error));
        }

        check_end();
    }
    ws.onopen = function() {
        // send_tx();
    };
}

//json转url参数 setUrlK({name:"a"},true编码)
function setUrlK(ojson) {
    var s='',name, key;
    for(var p in ojson) {
        if(!ojson[p]) {return null;}
        if(ojson.hasOwnProperty(p)) { name = p };
        key = ojson[p];
        s += "&" + name + "=" + encodeURIComponent(key);
    };
    return s.substring(1,s.length);
};

//使用ws.send()向服务端发送数据
function  send_tx(){
    .
    .
    .
    var postdata = getPostdata();

    ws.send(JSON.stringify(postdata))
    .
    .
    .
}