前端技术栈补全计划－websocket

在WebSocket之前，http请求的主要模式是客户端发起请求，服务端负责接收，并返回数据。如果需要服务端将一些参数主动传递至客户端，下面是一些常见的方法。

1. 一种比较常见的方式是服务端携带参数，访问某个指定的前端页面，例如后端主动访问http://www.params.com?want=param1;。params页面被访问时接收到了want＝param1这个参数，其含义为，服务端想从客户端拿到param1这个字段的数据。前端就会发出对应http请求来满足服务端的需求

2. 另一种更加常见的方式就是轮询(polling)，其本质就是利用定时器，不断像服务端发送请求，直到获得想要的数据

   const polling ＝ setInterval(() => {
       // 像服务器发出请求
       http.(url, options)
           .then((data) => {
               if () {
                   // 没有新消息，继续轮询
                   ... 
               } else {
                   // 拿到新消息，推出轮询
                   ...
                   polling.clearInterval();
               }
           });
   }, 500);

这两种方法，总的来说都是妥协性实现，第一种方法对需要通过中间页面实现，不具备通用性。第二种方法则会浪费大量资源，给服务器带来不必要的压力。还有其他很多实现方法，不一一列举了。

WebSocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

关于网络协议的问题，本文不多讨论(因为笔者暂时也不懂,协议部分以后会放到别的文章里)。

WebSocket使用

与http

WebSocket的url与http最大的不同就是协议不同

http的协议是
http://(未加密）和https://（加密）
WebSocket的协议是
ws://（未加密）和 wss://（加密）

服务端

本文只以最简单的node服务端为例。
新建文件夹wsTest

// node端 ws依赖
npm install ws --save

// wsTest/server.js

const PORT = 3000;
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({port: PORT});
    wss.on('connection', function (ws) {
        console.log('client connected');
        wss.send('websocket connect success');
        wss.on('message', function(evt) {
            console.log(evt);
        }
        wss.on('error', function(evt) {
            console.log(evt);
        }
        wss.on('close', function(evt) {
            console.log(evt);
        }
});

console.log(`server start ${PORT}`);

回到命令行，输入指令node server.js就可以启动服务器了

前端

// index.html
// 本文件与服务端无关，不需要配置

<script>
  const ws = new WebSocket('ws://localhost:3000');
 
    ws.onopen = function (data) {
    };
    ws.onmessage = function (data) {
    };
    ws.onclose = function (data) {
    }
</script>

直接运行index.html，在控制台network中可以看到对应的WebSocket连接

WebSocket attr & method（前端）

(本文仅列举一些前端WebSocket常用attr，全部api可见官方文档）

attr

url ---string

WebSocket连接的目标地址

const ws = new WebSocket('ws://www.baidu.com');
ws.url       // 'ws://www.baidu.com';

readyState --- number

readyState表示WebSocket当前的连接状态

constant	state code	description
CONNECTING	0	连接还没开启
OPEN	1	连接已开启并准备好通信
CLOSING	2	连接正在关闭过程中
CLOSED	3	连接已经关闭，活着无法建立

onopen ---function

当连接已开启时触发onopen事件

onmessage --- function

当从服务端收到消息时触发onmessage事件

onerror --- function

连接抛出错误时触发onerror事件

onclose --- function

连接关闭后触发onclose事件

method

send(message)

Websocket.send(message)
用于向服务端发送一条消息

close()

Websocket.close()

用于客户端主动关闭WebSocket通信

文章来源：学什么好