0%

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。 以下为使用了https://github.com/sitegui/nodejs-websocket的实例 使用方法以及代码:

>> npm install nodejs-websocket

node webserver.js

New connection //代表连接成功

var ws = require(“nodejs-websocket”)

// Scream server example: “hi” -> “HI!!!”
var server = ws.createServer(function (conn) {
console.log(“New connection”)
conn.on(“text”, function (str) {
console.log(“Received “ + str)
conn.sendText(str.toUpperCase() + “!!!”)
})
conn.on(“close”, function (code, reason) {
console.log(“Connection closed”)
})
}).listen(8001)

Document

hello

$.fn.extend({
‘drag’: function () {
var dispX = 0;
var dispY = 0;
var _this = this;
$(this).mousedown(function (ev) {
dispX = ev.pageX - $(_this).offset().left;
dispY = ev.pageY - $(_this).offset().top;
$(document).mousemove(function (ev) {
$(_this).css(‘left’, ev.pageX - dispX);
$(_this).css(‘top’, ev.pageY - dispY);
});
$(document).mouseup(function (ev) {
$(document).off(‘mousemove’);
});
return false;
});
}
});

$(function () {
$(‘#div1’).drag();
});

二次封装的目的是按照项目需求直接调用,减少代码冗余。 使用方法: 调用:

$.ajaxMy().syncPost(“/http”).done(function (data) {
if (data.result.num === 200 && data.chstate.length > 0) {
$(“#StreamStatistics”).text(data.chstate[0].bps)
}
})

对应请求函数:

put、get、post、delete、patch 如需使用同步请求,只需在函数前加入sync如syncPost、syncPut。

对应参数为:

  1. 请求的url
  2. 请求的数据
  3. 请求的预期返回参数数据类型(datatype)
  4. 自定义错误的回调设置(error)
  5. 自定义always函数设置
  6. contentType设置

$.extend({
ajaxMy: function () {
//根据关键的几个参数统一创建ajax对象
function create(_url, _method, _data, _async, _dataType, _error, _always, _contentType,
_processData, _HttpLogin) {
if (_contentType == “application/json;charset=UTF-8” && typeof (_data)) {
_data = JSON.stringify(_data)
}
return $.ajax({
url: _url,
dataType: _dataType,
async: _async,
method: _method,
data: _data,
contentType: _contentType,
cache: false,
timeout: 10000,
error: _error,
complete: _always,
processData: _processData
});
}
var ajax = {}, //声明一个对象一个数组
methods = [{
name: ‘put’,
method: ‘put’,
async: true,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘get’,
method: ‘get’,
async: true,
contentType: “application/x-www-form-urlencoded; charset=UTF-8”,
processData: true
},
{
name: ‘post’,
method: ‘post’,
async: true,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘delete’,
method: ‘delete’,
async: true,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘patch’,
method: ‘patch’,
async: true,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘syncGet’,
method: ‘get’,
async: false,
contentType: “application/x-www-form-urlencoded; charset=UTF-8”,
processData: true
},
{
name: ‘syncPost’,
method: ‘post’,
async: false,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘syncPut’,
method: ‘Put’,
async: false,
contentType: “application/json; charset=UTF-8”,
processData: false
}, {
name: ‘syncDelete’,
method: ‘delete’,
async: false,
contentType: “application/json; charset=UTF-8”,
processData: false
},
{
name: ‘syncPatch’,
method: ‘patch’,
async: false,
contentType: “application/json; charset=UTF-8”,
processData: false
}
];
for (var i = 0, l = methods.length; i < l; i++) {
ajax[methods[i].name] = (function (i) {
return function () {
var _url = arguments[0],
_data = arguments[1],
_dataType = arguments[2],
_error = arguments[3] function (XMLHttpRequest, textStatus,
errorThrown) {
$.overtime(XMLHttpRequest, textStatus, errorThrown);
},
_always = arguments[4] function (XMLHttpRequest, status) {
if (status == ‘timeout’) {
alert(LT(‘error’))
}
},
_contentType = arguments[5] methods[i].contentType
_processData = methods[i].processData;
if (_contentType == “application/json; charset=UTF-8”) {
JSON.stringify(_data);
}
return create(_url, methods[i].method, _data, methods[i].async,
_dataType, _error, _always, _contentType, _processData);
}
})(i);
}
return ajax;
},
overtime: function (XMLHttpRequest, textStatus, errorThrown) {
var errAlert = function (XMLHttpRequest, errorThrown) {
if (typeof (XMLHttpRequest) != ‘undefined’) {
switch (XMLHttpRequest) {
case 200:
alert(‘内容解析错误!’);
break;
case 401:
break;
default:
alert(XMLHttpRequest);
}
}
}
errAlert(XMLHttpRequest.status)
}
});

跨浏览器且纯JavaScript检测document是否加载完成的方法是使用readyState.

if (document.readyState === ‘complete’) {
// 页面已完全加载
}

这样可以在document完全加载时监测到…

let stateCheck = setInterval(() => {
if (document.readyState === ‘complete’) {
clearInterval(stateCheck);
// document ready
}
}, 100);

或者使用onreadystatechange

document.onreadystatechange = () => {
if (document.readyState === ‘complete’) {
// document ready
}
};

使用document.readyState === 'interactive'监听DOM是否加载完成。