5分钟从0到1，学会webSocket的使用

什么是webSocket？

WebSocket是在单个TCP连接上提供全双工通信的协议。它允许双方同时进行数据传输，而不需要等待对方的响应，简单说就是他是服务器和客户端相互主动传输信息的约定协议。

优点:

• 基于TCP协议： WebSocket建立在TCP之上，这使得服务器端的实现相对容易。
• 与HTTP兼容性良好： WebSocket与HTTP协议兼容，使用HTTP协议进行握手阶段，因此默认端口与HTTP相同（80和443），且不易被屏蔽。这意味着它可以通过各种HTTP代理服务器，增加了通信的灵活性。
• 轻量级数据格式和高效通信： 在连接创建后，持久保存连接状态，并且交换数据时，用于协议控制的数据包头部相对较小；
• 支持文本和二进制数据： WebSocket不仅可以发送文本数据，还可以发送二进制数据，相对 HTTP，可以更轻松地处理二进制内容。
• 无同源限制： 与传统的AJAX请求不同，WebSocket没有同源限制，客户端可以与任意服务器通信，不需要处理跨域
• 标识符简单明了： WebSocket的协议标识符是"ws"（如果加密则为"wss"），而服务器网址就是URL本身，这使得其使用和理解都相对简单直观。
• 支持扩展性： WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议

如何使用?

常量(表示连接状态)：

常量	值	作用意义
WebSocket.CONNECTING	0	表示连接正在建立阶段。
WebSocket.OPEN	1	表示连接已经建立并且可以通信。
WebSocket.CLOSING	2	表示连接正在关闭的过程中。
WebSocket.CLOSED	3	表示连接已经关闭或者未能建立连接。

readyState属性： 是 WebSocket 对象的一个只读属性，用于表示当前 WebSocket 连接的状态

代码示例：

// 创建 WebSocket 实例，连接到指定的 WebSocket 服务器
const webSocket = new WebSocket('ws://example.com/socket');
// 检查WebSocket连接状态 
    if (webSocket.readyState === WebSocket.CONNECTING) {
         console.log("连接正在建立..."); 
    } else if (webSocket.readyState === WebSocket.OPEN) {
        console.log("连接已建立！"); 
    } else if (webSocket.readyState === WebSocket.CLOSING) {
        console.log("连接正在关闭..."); 
    } else if (webSocket.readyState === WebSocket.CLOSED) {
        console.log("连接已关闭！"); 
    }

属性：

属性	描述	作用意义
WebSocket.binaryType	使用二进制的数据类型连接。	指定连接使用的数据类型，可以是 “blob” 或 “arraybuffer”。
WebSocket.bufferedAmount	未发送至服务器的字节数。	提供了当前连接缓冲区中等待发送的字节数。
WebSocket.extensions	服务器选择的扩展。	显示了服务器选择的通信扩展。
WebSocket.onclose	连接关闭后的回调函数。	设置连接关闭时要执行的回调函数。
WebSocket.onerror	连接失败后的回调函数。	设置连接发生错误时要执行的回调函数。
WebSocket.onmessage	接收到信息时的回调函数。	设置接收到消息时要执行的回调函数。
WebSocket.onopen	连接成功后的回调函数。
WebSocket.protocol	服务器选择的下属协议。	显示服务器选择的子协议。
WebSocket.readyState	当前的链接状态。	显示当前 WebSocket 连接的状态。
WebSocket.url	WebSocket 的绝对路径。	显示当前连接的绝对路径。

代码示例：

// 创建 WebSocket 实例，连接到指定的 WebSocket 服务器
const WebSocket = new WebSocket('ws://example.com/socket');

// WebSocket 属性示例
console.log("WebSocket.binaryType:", socket.binaryType); // 预期结果: "blob" 或 "arraybuffer"
console.log("WebSocket.bufferedAmount:", socket.bufferedAmount); // 预期结果: 0 或未发送至服务器的字节数
console.log("WebSocket.extensions:", socket.extensions); // 预期结果: 服务器选择的扩展
console.log("WebSocket.protocol:", socket.protocol); // 预期结果: 服务器选择的子协议
console.log("WebSocket.readyState:", socket.readyState); // 预期结果: 0 (CONNECTING), 1 (OPEN), 2 (CLOSING), 或 3 (CLOSED)
console.log("WebSocket.url:", socket.url); // 预期结果: WebSocket 的绝对路径


// 连接成功时的回调函数
webSocket.onopen = function(event) {
    console.log('连接已建立！');  
    // 在这里可以执行连接成功后的操作，例如发送数据
    webSocket.send('Hello, WebSocket Server!');
};

// 接收到消息时的回调函数
webSocket.onmessage = function(event) {
    console.log('接收到消息：', event.data);
    // 在这里可以处理接收到的消息
};

// 连接关闭时的回调函数
webSocket.onclose = function(event) {
    if (event.wasClean) {
        console.log('连接已关闭！');
    } else {
        console.log('连接关闭：', event.code, event.reason);
    }
    // 在这里可以执行连接关闭后的操作
};

// 连接发生错误时的回调函数
webSocket.onerror = function(error) {
    console.error('连接发生错误：', error);
    // 在这里可以处理连接错误
};

方法(主动触发)：

方法	描述	作用意义
WebSocket.close([code[, reason]])	关闭当前链接。	用于关闭当前 WebSocket 连接。可以选择性地传递状态码和关闭原因。
WebSocket.send(data)	对要传输的数据进行排队。	用于将数据发送到服务器。

send方法的参数：

• data: 要发送的数据，可以是字符串、二进制数据或者 Blob 对象。

close方法的参数：

• code (可选): 一个数字，表示连接关闭的状态码。常见的状态码有 1000 表示正常关闭，1001 表示端点离开，等等。详情请参考 WebSocket 规范。
• reason (可选): 一个字符串，表示连接关闭的原因。

代码示例：

// 创建 WebSocket 实例，连接到指定的 WebSocket 服务器
const WebSocket = new WebSocket('ws://example.com/socket');

// 发送字符串数据
webSocket.send('Hello, WebSocket Server!');

// 发送 JSON 数据
const data = { message: 'Hello, WebSocket Server!', timestamp: Date.now() };
webSocket.send(JSON.stringify(data));

// 发送二进制数据
const binaryData = new Uint8Array([1, 2, 3, 4, 5]);
webSocket.send(binaryData);

// 发送 Blob 对象
const blobData = new Blob(['Hello, WebSocket Server!']);
webSocket.send(blobData);

// 关闭 WebSocket 连接，不传递状态码和原因 webSocket.close();

// 关闭 WebSocket 连接，传递状态码和原因 webSocket.close(1000, '连接已成功关闭');

事件（被动触发）：

事件	描述	作用意义
close	当一个 WebSocket 连接被关闭时触发。	表示 WebSocket 连接被关闭，允许应用程序执行相关的清理工作。
error	当一个 WebSocket 连接因错误而关闭时触发。	表示 WebSocket 连接发生错误，通常用于处理连接错误的情况。
message	当通过 WebSocket 收到数据时触发。	表示 WebSocket 接收到新的数据，允许应用程序对数据进行处理。
open	当一个 WebSocket 连接成功时触发。	表示 WebSocket 连接成功建立，可以开始进行数据交换。

• 连接成功建立时，onopen 事件触发，事件处理函数会接收到一个 event 参数，其中包含了有关连接的一些信息，例如连接的 URL、协议、是否为原始连接等。

• 接收到消息时，onmessage 事件触发，事件处理函数会接收到一个 event 参数，其中 event.data: 表示接收到的消息数据。这可以是字符串、二进制数据或者 Blob 对象，具体取决于发送方发送的数据类型。

• 连接关闭时，onclose 事件触发，事件处理函数会接收到一个 event 参数，其中event.code: 表示连接关闭的状态码。常见的状态码有 1000 表示正常关闭，1001 表示端点离开，等等。详情请参考 WebSocket 规范。 event.reason: 表示连接关闭的原因。这通常是一个字符串，描述了连接关闭的原因，但是，并不是所有的实现都会提供这个值，因此在某些情况下可能是 undefined。

• 连接发生错误时，onerror 事件触发，事件处理函数会接收到一个 error 参数，这通常是一个 Error 对象，包含了发生错误的相关信息

代码示例：

// 创建 WebSocket 实例，连接到指定的 WebSocket 服务器
const WebSocket = new WebSocket('ws://example.com/socket');

// 连接成功时触发的事件 
webSocket.onopen = function(event) {
    console.log('WebSocket 连接已建立！'); 
    // 在这里可以执行连接建立后的操作 
};

// 接收到消息时触发的事件
webSocket.onmessage = function(event) {
    console.log('收到消息：', event.data);
    // 在这里可以处理接收到的消息
};

// 连接关闭时触发的事件
webSocket.onclose = function(event) {
    if (event.wasClean) {
        console.log('WebSocket 连接已经关闭！');
    } else {
        console.log('WebSocket 连接关闭：', event.code, event.reason);
    }
    // 在这里可以执行连接关闭后的操作
};

// 连接错误时触发的事件
webSocket.onerror = function(error) {
    console.error('WebSocket 连接发生错误：', error);
    // 在这里可以处理连接发生的错误
};