1: http: 协议是无状态协议, http 协议还是半双工协议。 也就是说,在同一时刻流量只可以单向流动。 客户端向服务器端发送请求 (单项的)。 然后服务器响应请求(也是单向的)。
2: websocket 协议:
Websocket: 是一种自然全双工,, 全双向的, 单套接字链接。 使用websocket , 一旦建立链接, 服务器端与客户端可以随时发送消息。 与HTTP 轮询的不同, Websocket 只发送一个请求, 服务器不需要的等待来自客户端的请求。 相似的, 客户端可以在
任何时候向服务器发送消息。 相比轮询, 不管是否可用消息, 每个一段时间都会发送一个请求, 单一请求大大减少延迟。
Websocket : 只是接受文档与二进制数据。
3: HTML5: 新特性就是Websocket, Websocket: 就是一种网络通信协议, Websocket 是HTML5 开始提供的一种在单个TCP 连接上 进行全双工通信的协议。
http 协议: 对应的有四大请求: get 请求, post 请求, put 请求, delete 请求。 对应 (增, 删, 改, 查);
4: http 协议是有缺陷的, http 请求只可能有客户端发起, 只可以由客户端向服务器端发起请求。(单项)
以前的没有websocket 之前就是使用事件轮询机制。
Websocket:
实现方式:
连接成功建立回调方法
ws.onopen = function() {
alert('WebSocke 连接成功')
}
连接错误发生的回调方法
ws.onerror = function() {
alert('WebSocke 连接发生错误')
}
接受到消息的回调方法
ws.onmessage = function(data) {
console.log(evemt.data)
}
关闭链接的回调方法
ws.close = function() {
alert('WebSocke 连接关闭')
}
做一个数据的实时展示: 后端配合修改吗? 如果后端不配合修改就 使用事件轮询机制。 如果后端配合修改就可以使用websocket 使用。 如果后端不支持, websocket 就搞不了。
事件轮询就是前端不断地发送请求, 后端什么没做。
// 事件轮询
之前都是使用封装好的ajax 请求
function getCharts() {
var xml = new XMLHttpRequest(); // 手写原生的 XMLHttpRequest(); 是一个对象,
// 这是浏览器提供的一个接口, 作用就是提供http, 或者https 协议的请求, 就是ajax 请求
xml.open('请求方式', '请求地址, 请求url');
xml.send();
xml.onreadsatetchange = function() {
if(xml.readyState ==4 && xml.state ==200) { // 请求状态为4, 响应状态码为200, 表示成功。
// 在成功状态下进行赋值操作
}
}
}
setInterval(getCharts, 3000) // 这里的事件
// 事件轮询的缺点:
就是在不断的发送请求, 造成服务器的压力大。
Websocket: 探析
Websocket: 探析
// 进入页面创建websocket 连接
initWebsocket() {
// 判断页面有没有存在Websocket 链接
if(window.websocket) {
let ws = new websocket("ws:// 192.168.0.115:8081")
_this.ws = ws;
ws.onopen = function(e) {
console.log("服务器连接成功");
};
ws.onerror = function() {
console.log("服务器连接出错");
};
// 成功状态下接受服务器返回的数据
ws.onmessage = function(e) {
//接收服务器返回的数据
let resData = JSON.parse(e.data);
if (resData.funName == "userCount") {
_this.count = resData.users;
_this.list = resData.chat;
console.log(resData.chat);
} else {
_this.list = [
..._this.list,
{ userId: resData.userId, content: resData.msg }
];
}
};
ws.close = function () {
console.log("服务器连接关闭");
}
}
}