WebSocket 学习

获取前端输入框的数据 ==> 通过``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;

返回值:

Strin

3. WebSocket 实例方法

Send()

描述:

WebSocket.send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

语法:

WebSocket.send("Hello server!");

参数:

data : 用于传输至服务器的数据, 它必须是以下类型之一

USVString
文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。

ArrayBuffer
您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount 将加上所需字节数的值。

Blob
Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。

ArrayBufferView
您可以以二进制帧的形式发送任何 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 包管理器安装该库，如下所示：

shell

npm install ws

2. 创建 WebSocket 服务器

在 Node.js 中，可以通过创建一个 HTTP 服务器并监听其连接事件，来实现 WebSocket 服务器的搭建。使用 ws 库，我们可以轻松创建 WebSocket 服务器，具体代码如下：

javascript

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

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 学习 ​

WebSocket 介绍 ​

1. WebSocket() 构造函数 ​

2. WebSocket 实例属性 ​

readyState ​

URL ​

3. WebSocket 实例方法 ​

Send() ​

4. WebSocket 事件 ​

1. open ​

2. onclose ​

3. onerror ​

4. Message ​

Node.Js 后端配置 ​

1. 安装 WebSocket 库 ​

2. 创建 WebSocket 服务器 ​

3. 运行 WebSocket 服务器 ​

4. 认识 nodemon 库 ​

即时通信聊天室 ​

WebSocket ​

前端 ​

页面 ​

后端 ​