前端技术栈补全计划－－－websocket
本系列文章旨在总结前端技术栈中的一些通用技术
本文主要总结websocket
websocket
WebSocket之前
在WebSocket之前，http请求的主要模式是客户端发起请求，服务端负责接收，并返回数据。如果需要服务端将一些参数主动传递至客户端，下面是一些常见的方法。
- 一种比较常见的方式是服务端携带参数，访问某个指定的前端页面，例如后端主动访问
http://www.params.com?want=param1;。params页面被访问时接收到了want＝param1这个参数，其含义为，服务端想从客户端拿到param1这个字段的数据。前端就会发出对应http请求来满足服务端的需求 另一种更加常见的方式就是轮询(
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通信
node端的WebSocketAPI此文不做介绍
暂时只做这么多介绍，更多详细内容和使用经验会会随着笔者不断学习应用逐步更新2333，希望大家共同进步
websocket-Mozila官方文档