前端技术栈补全计划---websocket

本系列文章旨在总结前端技术栈中的一些通用技术
本文主要总结websocket

websocket

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当前的连接状态

constantstate codedescription
CONNECTING0连接还没开启
OPEN1连接已开启并准备好通信
CLOSING2连接正在关闭过程中
CLOSED3连接已经关闭,活着无法建立
onopen ---function

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

onmessage --- function

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

onerror --- function

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

onclose --- function

连接关闭后触发onclose事件

method

send(message)

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

close()

Websocket.close()
用于客户端主动关闭WebSocket通信

node端的WebSocketAPI此文不做介绍

暂时只做这么多介绍,更多详细内容和使用经验会会随着笔者不断学习应用逐步更新2333,希望大家共同进步
websocket-Mozila官方文档

相关推荐