WebSocket 介绍
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它为客户机和服务器之间的双向数据流提供了新的选择。相比HTTP协议，WebSocket具有更低的延迟和更高的效率，可以实现实时数据传输，如即时通讯、在线游戏等。
WebSocket API主要由两个类组成：
- WebSocket：创建一个新的
WebSocket对象 - WebSocket事件处理程序：处理WebSocket对象
所触发的所有事件
常用的WebSocket API及其作用如下：
使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性，来监听下面的事件。
- WebSocket(url)：构造函数，创建
WebSocket对象，并建立与指定url的服务器连接。参数url是要连接的服务器地址。 - open事件：当WebSocket
连接打开时，此事件被触发。 - message事件：当WebSocket
收到消息时，此事件被触发。 - error事件：当WebSocket
连接出错时，此事件被触发。 - close事件：当WebSocket
连接关闭时，此事件被触发。 - send(data)：向WebSocket
服务器发送数据，参数data是要发送的数据。
以下是一个简单的WebSocket示例代码：
代码语言：javascript复制 // 创建WebSocket对象
var ws = new WebSocket("ws://localhost:8080");
// 打开WebSocket连接时触发
ws.onopen = function() {
// 向WebSocket服务器发送数据
ws.send("Hello, WebSocket!");
};
// 接收WebSocket服务器发送的消息时触发
ws.onmessage = function(evt) {
console.log("Received Message: " evt.data);
// 关闭WebSocket连接
ws.close();
};
// WebSocket连接出错时触发
ws.onerror = function(evt) {
console.log("WebSocket Error: " evt.data);
};
// WebSocket连接关闭时触发
ws.onclose = function(evt) {
console.log("WebSocket Closed");
};
// 初始化webScoket 实例
const ws = new WebSocket('ws:localhost:8000')
// ws open事件
ws.addEventListener('open', handleOpne, false)
ws.addEventListener('close', handleClose, false)
ws.addEventListener('error', handleError, false)
ws.addEventListener('message', handleMessage, false)
// 发送信息函数
function handleSentClick() {
ws.send(
// Js 对象转换json 格式数据进行发送
JSON.stringify(
{
avatar,
username,
message: oMsg.value,
time: dayjs().format('YYYY/MM/DD HH:mm:ss')
}
)
)
oMsg.value = '';
}
// ws 开启函数
function handleOpne() {
console.log("websocket open");
// 用户名不存在 跳转首页进行登录
if (!username) {
location.href = 'entry.html'
}
}
// ws 关闭函数
function handleClose() {
console.log("websocket close");
}
// ws 错误捕获函数
function handleError() {
console.log("websocket error");
}
// ws 监听信息函数
function handleMessage(e) {
console.log("websocket message");
console.log(e);
let reader = new FileReader();
reader.readAsText(e.data); // 要将 Blob 对象转换成字符串，可以使用 FileReader 对象。
reader.onload = function () {
let text = JSON.parse(reader.result);
console.log(text);
olist.appendChild(createMsg(text))
}
}在这个示例中，客户端与WebSocket服务器建立连接后，向服务器发送了一条消息，当服务器回复消息时，客户端将收到该消息，并在控制台中输出。之后，客户端关闭了WebSocket连接。
需要注意的是，WebSocket协议需要特定的服务器支持，因此在使用WebSocket之前需要确保所用的服务器已经支持WebSocket协议。
1. WebSocket() 构造函数
语法:
代码语言：javascript复制 var aWebSocket = new WebSocket(url [, protocols]);参数说明:
- url : 要
连接的 URL`； 这应该是WebSocket 服务器将`响应的 URL。 - protocols [ 可选 ] : 一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（例如，您可能希望一台服务器能够根据指定的协议（
protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串
示例:
代码语言：javascript复制 // 初始化webScoket 实例
const ws = new WebSocket('ws:localhost:8000')2. WebSocket 实例属性
readyState
描述 : 返回当前 WebSocket 的链接状态，只读。
语法:
代码语言：javascript复制 var readyState = WebSocket.readyState;值:
值 | 描述 |
|---|---|
0 (WebSocket.CONNECTING) | 正在链接中 |
1 (WebSocket.OPEN) | 已经链接并且可以通讯 |
2 (WebSocket.CLOSING) | 连接正在关闭 |
3 (WebSocket.CLOSED) | 连接已关闭 或者 没有链接成功 |
URL
描述:
**WebSocket.url**是一个只读属性，返回值为当构造函数创建WebSocket实例对象时 URL 的绝对路径。
语法:
代码语言：javascript复制 var url = aWebSocket.url;返回值:
Strin
3. WebSocket 实例方法
Send()
描述:
WebSocket.send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。
语法:
代码语言：javascript复制 WebSocket.send("Hello server!");参数:
data : 用于传输至 服务器的数据, 它必须是以下类型之一
USVString文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且bufferedAmount将加上该字符串以 UTF-8 格式编码时的字节数的值。
ArrayBuffer您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount将加上所需字节数的值。
BlobBlob类型将队列 blob 中的原始数据以二进制中传输。bufferedAmount将加上原始数据的字节数的值。
ArrayBufferView您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值bufferedAmount将加上必要字节数的值。
4. WebSocket 事件
1. open
描述:
当WebSocket连接打开时，此事件被触发。
代码:
代码语言：javascript复制 ws.addEventListener('open', handleOpne, false)
function handleOpne() {
console.log('WebSocket open')
}2. onclose
描述:
WebSocket.onclose 属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用，它接收一个名字为“close”的 CloseEvent 事件。
语法:
代码语言：javascript复制 WebSocket.onclose = function(event) {
console.log("WebSocket is closed now.");
};另外一种写法
代码语言：javascript复制 // 初始化webScoket 实例
const ws = new WebSocket('ws:localhost:8000')
ws.addEventListener('close', handleClose, false)
// ws 关闭函数
function handleClose() {
console.log("websocket close");
}3. onerror
描述:
当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个error事件将被引发。
语法:
代码语言：javascript复制 // Create WebSocket connection
// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// Listen for possible errors
// 监听可能发生的错误
socket.addEventListener('error', function (event) {
console.log('WebSocket error: ', event);
});4. Message
描述:
message 事件会在 WebSocket 接收到新消息时被触发。
语法:
代码语言：javascript复制 // 创建一个 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 监听消息
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
Node.Js 后端配置
使用 Node.js 搭建 WebSocket 后端服务需要进行如下步骤：
1. 安装 WebSocket 库
Node.js 提供了 ws 库来支持 WebSocket 协议。你可以使用 npm 包管理器安装该库，如下所示：
npm install ws2. 创建 WebSocket 服务器
在 Node.js 中，可以通过创建一个HTTP 服务器并监听其连接事件，来实现 WebSocket 服务器的搭建。使用 ws 库，我们可以轻松创建 WebSocket 服务器，具体代码如下：
const WebSocket = require('ws');
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });
// 在 WebSocket 连接时触发
wss.on('connection', function connection(ws) {
console.log('client connected');
}
// 在接收到消息时触发
ws.on('message', function incoming(message) {
console.log(`received: ${message}`);
ws.send(`echo: ${message}`);
});
});上面的代码中，我们先导入 ws 库，并创建了一个 WebSocket 服务器，将其绑定到本地的 8080 端口。当有客户端连接到该服务器时，会触发 connection 事件，在该事件中我们定义了消息的处理方式。
当接收到客户端发送过来的消息时，WebSocket 服务器会触发 message 事件，并在该事件中将消息返回给客户端。
3. 运行 WebSocket 服务器
在完成服务器代码编写后，就可以使用 Node.js 运行 WebSocket 服务器了。你可以使用以下命令启动 WebSocket 服务器：
代码语言：javascript复制 node server.js上述命令会运行名为 server.js 的 JavaScript 文件，并启动后端 WebSocket 服务器。
这就是使用 Node.js 搭建 WebSocket 后端服务的基本步骤。当然，具体实现还需要结合实际业务需求进行代码编写。同时也需要注意 WebSocket 协议的安全性，在生产环境中应该使用 SSL 加密来保障数据传输安全。
4. 认识 nodemon 库
也可以使用`npm i nodemon -g 自动热更新
Nodemon 是一个基于 Node.js 开发的开源工具，可以帮助程序员自动检测应用程序中的任何更改并自动重启服务器。其实现原理是监视应用程序的文件变化，以此来判断是否需要重启应用。
Nodemon 的使用方式非常简单，在终端输入 nodemon 命令即可在当前目录下启动一个 Node.js 应用程序，并开始监视应用程序中的任何更改。例如：
nodemon app.js当然，你也可以通过传递一些参数来自定义 Nodemon 的行为。例如，你可以设置 Nodemon 忽略某些文件或目录：
代码语言：javascript复制 nodemon --ignore public/ app.js除了自动重启服务器外，Nodemon 还提供了很多附加功能，例如：
- 支持设置环境变量
- 监视指定的文件和目录
- 自定义忽略文件和目录
- 支持事件监听和命令执行
总之，Nodemon 是一个非常实用的工具，可以大幅提高 Node.js 应用程序的开发效率，特别是在开发时频繁修改代码时非常有用。
即时通信聊天室
WebSocket
- open
- close
- error
- message
- connection
前端
- open
- close
- error
- message
页面
entry.html (刚进去的页面) input for the username (输入用户名) localStorage to sava the username(本地存储用户名) click for joining the chatroo(输入完用户名点击进入聊天室) indet.html(聊天室页面) list - to show the message(显示聊天信息) input - give user promet (用户输入信息) button - to send the message (点击按钮发送信息)
后端
- open
- close
- error
- message
- connection
后端需要一个包 ws or nodejs-websocket
获取前端输入框的数据 ==> 通过WebSocket 实例对象身上的send方法将数据发送 服务器 ==>
后端服务器 通过onMessage 方法来响应前端发送的数据==> 后台进行数据的处理 以及下一步的操作
前端客户端 通过message 事件 ���监听后台的消息推送,==> 接收数据,进行处理
