WebScoket协议的理解与使用

1. 什么是WebScoket协议？

• WebScoket是HTML5的一个持久化协议，实现了浏览器与服务器的双全工通信，同时也是跨域的一种解决方法。
• WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
• WebScoket和HTTP 都是应用层协议，其基于TCP协议。WebScoket在建立连接时需要借助HTTP协议，连接建立好了之后 客户端与浏览器之间就可以进行双向通信了，就与HTTP无关了。
• 一般有实时数据要求的会考虑 websocket
• 目前唯一的问题是：不兼容低版本的IE

2.使用 WebScoket与Ajax 有什么区别？

比如，利用很多网站的推送技术，来分析：

• 使用Ajax轮询：轮询是特定的时间间隔，对服务器发出http请求，然后服务器返回最新的数据给客户端。
  • 缺点：浏览器需要不断的向服务端发送请求，但是请求的头可能就很长，实际的数据只占一小部分，就造成了带宽的浪费。
• 使用 WebScoket协议，能更快的节省服务器资源和带宽，并且能时时通讯。
  
  交互对比图

3.WebSocket建立连接过程

由上图可以看出其连接过程

• 客户端浏览器首先要向服务器发起一个 HTTP 请求，求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求
• 服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了
• 双方就可以通过这个连接通道自由的传递信息
• 连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接

4.如何使用？

• 1.创建WebSocket对象

var Socket = new WebSocket(url, [protocol] );

• 第一个参数：指定连接的url
• 第二个参数：指定可接受的子协议 [可选]
• 2. 使用WebSocket 事件
  • open事件：建立连接时触发， 使用 send() 方法发送数据

    ws.onopen = function() {
           ws.send("发送数据");
          alert("数据发送中...");
    };
    

  • message事件：客户端接收服务端数据时触发，用于接收数据

    ws.onmessage = function (evt)  { 
           var res_data = evt.data;
           alert("数据已接收...");
     };
    

  • close事件：连接关闭时触发

    ws.onclose = function()  {
          alert("连接已关闭..."); 
     };
    

  • error事件：连接发生错误时触发

5. 使用实例

• webScoket.html

    
Why do you always like to stay with me？
    查看回答

• server.js

const express = require('express');
const app = express();
const WebSocket = require('ws');
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function (ws) {
    ws.on('message',function (data) {
        console.log(data); //接收到的客户端数据
        ws.send('I need you');//发送给客户端的数据
    })
});

• 效果图

  点击按钮，进行数据通信