http 协议与 websocket 即时通信区别

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("服务器连接关闭");
     }
  }
}