websocket和通信

Posted 2020-11-21 鹿

    最近默默的在学websocket,推荐的当然是阮一峰的博客了，其中也学到了不少  可以去看看咯 http://www.ruanyifeng.com/blog/2017/05/websocket.html

     WebSocket 协议在2008年诞生，2011年成为国际标准。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，就是终身平等的 哈哈。

 

      减少通信量 ：client 第一次需要与 server 建立连接，当 server 确认连接之后，两者便一直处于连接状态。

      直到一方断开连接，WebSocket 连接才断开，与HTTP相比，websocket首部信息很小，连接的开销减少，通信量减少

 

其实也有其他的通信：

HTTP的缺陷

• 请求只能从客户端开始。客户端不可以接收除响应以外的指令（通信只能由客户端发起）
• 请求 / 响应首部未经压缩就发送。首部信息越多延迟越大。
• 发送冗长的首部。每次互相发送相同的首部造成的浪费较多。

轮询（polling）    

• 在第一次请求后，服务器端没有数据更新，造成通信浪费，资源消耗
• 当发送请求间隔加大可缓解通信的浪费，但当服务器端更新数据很快时，又不满足实时性
• 每隔一段时间向服务器发送http请求，不论是否更新，都将数据发送给客户端

Ajax

    实现页面局部加载的异步通信，减少了传输数据量，但http协议本身缺陷仍然存在

websocket

 包括的特点有：

       （1）建立在 TCP 协议之上，服务器端的实现比较容易。

       （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

       （3）数据格式比较轻量，性能开销小，通信高效。

      （4）可以发送文本，也可以发送二进制数据。

      （5）没有同源限制，客户端可以与任意服务器通信。

      （6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

下面说下基本的用法咯：

var ws = new WebSocket("wss://echo.websocket.org"); // WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

ws.onopen = function(evt) { 
  console.log("Connection open ...");   // 实例对象的onopen属性，用于指定连接成功后的回调函数。
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data); // 用于指定收到服务器数据后的回调函数。
  ws.close();
};

ws.onclose = function(evt) {                  //  用于指定连接关闭后的回调函数。
  console.log("Connection closed.");     
};      

 

webSocket.readyState

readyState属性返回实例对象的当前状态，共有四种。

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

 

其实用起来也挺简单的，基本好像是那种直播，聊天上websocket会比较多，

看大家也都是结合node 来开发， 当然需要自己去实践过才知道优缺点呗，

我也在也在尝试webSocket 和 vue 结合起来写一些demo ,加强记忆。