Nodejs—创建简易WebSocket通信过程详解

文章目录

- 安装Nodejs
- - Windows 安装
  - Linux 源码安装
- WebSocket简介
- - WebSocket 与 AJAX 轮询的区别
  - WebSocket的属性
  - 核心事件处理器
- WebSocket使用示例
- - 设置 Node.js WebSocket 服务器
  - 创建客户端 HTML 页面
  - 运行 WebSocket 服务器和客户端

安装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，包含有关关闭的信息，如代码和原因。
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 clientws.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>