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
第二个参数：指定可接受的子协议 [可选]

使用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

<body>
<div>
    <h2>Why do you always like to stay with me？</h2>
    <button onclick="my_scoket()">查看回答</button>
</div>
<script>
    function my_scoket(){
        let scoket = new WebSocket('ws://localhost:3000');
        //向服务器发送数据
        scoket.onopen = function () {
            scoket.send("Why do you always like to stay with me?")
        };
        //接收服务器返回的数据
        scoket.onmessage = function (e) {
            alert(e.data)
        }
    }
</script>
</body>

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');//发送给客户端的数据
    })
});

效果图

点击按钮，进行数据通信

最后编辑于：2020.04.05 22:07:11