获取前端输入框的数据 ==> 通过``WebSocket 实例对象身上的
send方法将数据发送
服务器` ==>
后端服务器 通过``onMessage` 方法来响应前端发送的数据==> 后台进行数据的处理 以及下一步的操作
前端客户端 勇敢``message` 事件 来监听后台的消息推送,==> 接收数据,进行处理
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示例代码:
// 创建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() 构造函数
语法:
var aWebSocket = new WebSocket(url [, protocols]);
参数说明:
- url : 要``连接的 URL; 这应该是WebSocket 服务器将响应的 URL`。
- protocols [ 可选 ] : 一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个 WebSocket 子协议(例如,您可能希望一台服务器能够根据指定的协议(
protocol
)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串
示例:
// 初始化webScoket 实例
const ws = new WebSocket('ws:localhost:8000')
2. WebSocket 实例属性
readyState
描述 : 返回当前 WebSocket
的链接状态,只读。
语法:
var readyState = WebSocket.readyState;
值:
值 | 描述 |
---|---|
0 (WebSocket.CONNECTING ) | 正在链接中 |
1 (WebSocket.OPEN ) | 已经链接并且可以通讯 |
2 (WebSocket.CLOSING ) | 连接正在关闭 |
3 (WebSocket.CLOSED ) | 连接已关闭 或者 没有链接成功 |
URL
描述:
**WebSocket.url
**是一个只读属性,返回值为当构造函数创建WebSocket
实例对象时 URL 的绝对路径。
语法:
var url = aWebSocket.url;
返回值:
String
3. WebSocket 实例方法
Send()
描述:
WebSocket.send()
方法将需要通过 WebSocket 链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes 的大小来增加 bufferedAmount
的值。若数据无法传输(例如数据需要缓存而缓冲区已满)时,连接字会自行关闭。
语法:
WebSocket.send("Hello server!");
参数:
data : 用于传输至 服务器
的数据
, 它必须是以下类型之一
文本字符串。字符串将以 UTF-8 格式添加到缓冲区,并且
bufferedAmount
将加上该字符串以 UTF-8 格式编码时的字节数的值。
您可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,
bufferedAmount
将加上所需字节数的值。
Blob
类型将队列 blob 中的原始数据以二进制中传输。bufferedAmount
将加上原始数据的字节数的值。
您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ;其二进制数据内容将被队列于缓冲区中。值
bufferedAmount
将加上必要字节数的值。
4. WebSocket 事件
1. open
描述:
当WebSocket连接打开时,此事件被触发。
代码:
ws.addEventListener('open', handleOpne, false)
function handleOpne() {
console.log('WebSocket open')
}
2. onclose
描述:
WebSocket.onclose
属性返回一个事件监听器,这个事件监听器将在 WebSocket 连接的readyState
变为 CLOSED
时被调用,它接收一个名字为“close”的 CloseEvent
事件。
语法:
WebSocket.onclose = function(event) {
console.log("WebSocket is closed now.");
};
另外一种写法
// 初始化webScoket 实例
const ws = new WebSocket('ws:localhost:8000')
ws.addEventListener('close', handleClose, false)
// ws 关闭函数
function handleClose() {
console.log("websocket close");
}
3. onerror
描述:
当websocket
的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个error
事件将被引发。
语法:
// 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
接收到新消息时被触发。
语法:
// 创建一个 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 ws
2. 创建 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 服务器:
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 忽略某些文件或目录:
nodemon --ignore public/ app.js
除了自动重启服务器外,Nodemon 还提供了很多附加功能,例如:
- 支持设置环境变量
- 监视指定的文件和目录
- 自定义忽略文件和目录
- 支持事件监听和命令执行
总之,Nodemon 是一个非常实用的工具,可以大幅提高 Node.js 应用程序
的开发效率
,特别是在开发时频繁修改代码时非常有用
。
即时通信聊天室
WebSocket
1. 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 (点击按钮发送信息)
后端
1. open
- close
- error
- message
- connection
后端需要一个包
ws or nodejs-websocket