文章目录
安装Nodejs
Windows 安装
下载地址： nodejs-release-v12.17.0安装包下载_开源镜像站-阿里云 (aliyun.com)
选择x64 或者x64，下载之后，打开安装包，根据提示下一步即可
安装成功之后打开命令行工具 输入 node -v
提示输出版本号便是安装成功
Linux 源码安装
根据自己的系统版本下载不同的源码，这里以Ubuntu20.04 arm64版本为例
这里下载的是node-v12.17.0-linux-arm64.tar.gz
解压到指定的目录 ，打开之后的目录结构如下
进入bin 文件夹，打开命令行终端，将npm 和 nodejs 创建软链接 即可
sudo ln -s xxxxx/node /usr/bin/node
sudo ln -s xxxxx/npm /usr/bin/npm
终端输入npm ，显示相关信息代表配置环境成功
WebSocket简介
WebSocket 是一种在单个持久连接上提供全双工通信通道的网络技术。它允许服务器和客户端之间的信息可以随时被发送，这使得它特别适用于需要实时数据交换的应用，比如在线游戏、实时交易平台、协作工具等。WebSocket 协议在2011年被标准化为 HTML5 的一部分，现在被大多数现代浏览器支持。
一些网站确实仍然使用 AJAX 来实现数据推送，这是最基本的数据推送形式，客户端定时发送 AJAX 请求到服务器，查询是否有新数据。这种方式的实现简单，但效率低且可能造成服务器资源的浪费，因为很多请求可能返回空数据。
WebSocket 与 AJAX 轮询的区别
1. 连接方式：
- WebSocket：创建一个持久的连接，这个连接会保持打开状态，直到客户端或服务器决定关闭。在这个连接上，数据可以从任一端到另一端单向传输，也可以是双向传输。
- AJAX 轮询：客户端定期发送 HTTP 请求到服务器，询问是否有新数据可用。每次请求都需要重新建立连接和拆解连接，这在 HTTP/1.1 中尤其消耗资源（HTTP/2 提供了一些改进）。
2. 实时性：
- WebSocket：提供真正的实时功能，因为连接是持续的，数据可以随时被任一端发送。
- AJAX 轮询：存在延迟，因为请求是周期性的；实时数据的传输延迟受到轮询频率的限制。
3. 资源消耗和网络流量：
- WebSocket：由于是建立持久连接，初始握手后不需要再进行连接建立，减少了开销和网络流量。
- AJAX 轮询：每次请求都需要发送 HTTP 头部和其他信息，这在频繁请求时会导致显著的网络流量和处理时间增加。
4. 复杂性：
- WebSocket：实现相对复杂，需要服务器和客户端都支持 WebSocket 协议。但一旦建立，之后的数据交换非常高效。
- AJAX 轮询：实现简单，基于标准的 HTTP 协议，不需要特殊的服务器支持，适用于不支持 WebSocket 的环境。
5. 可伸缩性：
- WebSocket：虽然单个 WebSocket 连接的资源消耗比较小，但如果服务器需要同时处理大量的连接，仍然可能会面临资源限制问题。
- AJAX 轮询：可伸缩性较差，因为服务器必须处理大量短暂的连接，且连接频繁建立和断开会消耗更多资源。
使用js 创建webSocket对象十分简单
var ws = new WebSocket('wss://example.com/socket', 'protocol-one');
首先传入URL，第二个参数可选，指定了连接的子协议
WebSocket的属性
WebSocket.readyState
- 类型：
unsigned short - 这个属性返回 WebSocket 连接的当前状态，可能的值包括：
WebSocket.CONNECTING(0)：连接尚未建立。WebSocket.OPEN(1)：连接已建立，可以进行通信。WebSocket.CLOSING(2)：连接正在进行关闭。WebSocket.CLOSED(3)：连接已关闭或无法打开。
WebSocket.bufferedAmount
- 类型：
unsigned long - 返回还未发送至网络的 UTF-8 文本字节数。这个值在消息队列空的时候会重置为0。如果连接关闭，这个值将不会再更新。
WebSocket.url
- 类型：
DOMString - WebSocket 对象的绝对路径。这个 URL 在构造函数中指定，并且会在连接过程中不可变。
核心事件处理器
WebSocket 也提供了几个事件处理器属性，允许开发者指定函数来处理特定的事件：
- onopen
- 事件处理器，当 WebSocket 连接成功时触发。
- onmessage
- 事件处理器，当接收到消息时触发。事件对象为
MessageEvent，包含data属性，表示接收到的数据。
- 事件处理器，当接收到消息时触发。事件对象为
- onclose
- 事件处理器，当 WebSocket 连接关闭时触发。事件对象为
CloseEvent，包含有关关闭的信息，如代码和原因。
- 事件处理器，当 WebSocket 连接关闭时触发。事件对象为
- onerror
- 事件处理器，当 WebSocket 遇到错误，无法继续通信时触发。
WebSocket使用示例
设置 Node.js WebSocket 服务器
首先，确保你已安装 Node.js。接着，创建一个新的项目文件夹，并初始化一个 Node.js 项目：
mkdir websocket-demo
cd websocket-demo
npm init -y
然后，安装 ws 库：
npm install ws
创建一个名为 server.js 的文件，并添加以下代码来启动一个 WebSocket 服务器：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('A new client Connected!');
ws.send('Welcome New Client!');
ws.on('message', function incoming(message) {
console.log('received: %s', message);
// Echo the message back to the client
ws.send(`Server received: ${message}`);
});
ws.on('close', function() {
console.log('The client has disconnected.');
});
ws.on('error', function(error) {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
这段代码创建了一个运行在 8080 端口的 WebSocket 服务器。服务器监听连接事件，并对每个新客户端发送欢迎消息。同时，它也监听消息事件，将接收到的消息回显给客户端。
创建客户端 HTML 页面
在项目目录中，创建一个名为 index.html 的文件，并添加以下 HTML 和 JavaScript 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Client</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('Connected to the server');
ws.send('我是客户端，Server!');
};
ws.onmessage = function(event) {
console.log('来自服务器的消息 ', event.data);
};
ws.onclose = function() {
console.log('服务器断开连接');
};
ws.onerror = function(error) {
console.error('WebSocket error:', error);
};
});
</script>
</head>
<body>
<h1>WebSocket 客户端</h1>
<p>F12 开发者选项，打开控制台，查看通信过程.</p>
</body>
</html>
这个 HTML 页面将连接到你的 WebSocket 服务器，并在打开连接后发送一个消息。服务器的响应将显示在浏览器的控制台中。
运行 WebSocket 服务器和客户端
首先，在命令行中运行服务器：
node server.js
然后，打开 index.html 文件在浏览器中，这里使用的Vscode编写 插件使用的是live server
按下F12查看控制台，可以看到简单的通信过程
