WebSocket的11个面试常见知识点_如果被问websocket前端初级工程师一般面试会问什么问题(1)

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

WebSocket 协议和 HTTP 协议的区别是什么？

WebSocket 是一种实时双向通信协议，与 HTTP 协议相比，有以下几个主要区别：

• 连接方式：WebSocket 提供持久的连接，通过握手过程建立连接后保持打开状态，而 HTTP 是无状态的，每次请求都需要重新建立连接。
• 数据格式：WebSocket 支持文本和二进制数据的传输，而 HTTP 主要是传输文本数据。
• 数据传输方式：WebSocket 实现了全双工通信，客户端和服务器可以同时发送和接收数据，而 HTTP 是单向的，客户端发起请求，服务器响应数据。
• 协议标识：WebSocket 使用 ws:// 或 wss:// 前缀标识，而 HTTP 使用 http:// 或 https://

WebSocket 的优势和适用场景是什么？

WebSocket 相对于传统的 HTTP 请求具有以下优势：

• 实时性：WebSocket 提供了低延迟的实时通信能力，能够在服务器端有新数据时立即推送给客户端。
• 双向通信：WebSocket 支持客户端和服务器之间的双向通信，可以实现实时聊天、实时数据更新等场景。
• 较低的网络开销：WebSocket 使用长连接，相对于频繁的短连接请求，减少了网络开销。
• 更高的性能：由于减少了 HTTP 请求的开销，WebSocket 在性能上更高效。
• 跨域支持：WebSocket 具备跨域通信的能力，可以跨域进行实时通信。

WebSocket 的适用场景包括实时聊天应用、股票行情推送、实时协作编辑、多人游戏、实时数据监控等需要实时双向通信的场景。

WebSocket 的连接建立过程是怎样的？

WebSocket 的连接建立过程包括以下步骤：

1. 客户端发送 WebSocket 握手请求，请求头包含 Upgrade 和 Connection 字段，指定协议升级和建立连接。
2. 服务器收到握手请求后，验证请求头的字段，并返回握手响应，响应头包含 Upgrade 和 Connection 字段，以及一个随机的 Sec-WebSocket-Key 字段。
3. 客户端收到握手响应后，验证响应头的字段，并生成一个 Sec-WebSocket-Accept 值进行验证。
4. 验证通过后，WebSocket 连接建立成功，客户端和服务器可以开始进行实时通信。

WebSocket 的事件有哪些？请分别描述它们的作用。

WebSocket 提供了以下几种事件：

• open：当 WebSocket 连接成功建立时触发的事件。可以在此事件中执行初始化操作或向服务器发送初始数据。
• message：当从服务器接收到新消息时触发的事件。可以在此事件中处理接收到的数据。
• error：当出现连接错误时触发的事件。错误可能包括连接失败、数据传输错误等。可以在此事件中处理错误并采取适当的措施。
• close：当 WebSocket 连接关闭时触发的事件。关闭可能是由服务器或客户端发起的，可以在此事件中执行清理操作或重新连接等操作。

这些事件可以通过设置对应的事件处理函数来处理不同的连接状态和数据传输。

在浏览器端如何创建和使用 WebSocket 对象？

在浏览器端，可以使用 JavaScript 中的 WebSocket 对象来创建和使用 WebSocket。示例代码如下：

const socket = new WebSocket('wss://example.com/socket');

其中，new WebSocket() 通过传入服务器的 WebSocket URL 来创建一个 WebSocket 对象。然后可以通过设置事件处理函数来处理 WebSocket 的事件，例如：

socket.onopen = function(event) {
  console.log('WebSocket 连接已打开');
};

socket.onmessage = function(event) {
  const message = event.data;
  console.log('接收到消息:', message);
};

socket.onerror = function(error) {
  console.error('WebSocket 错误:', error);
};

socket.onclose = function(event) {
  console.log('WebSocket 连接已关闭');
};

在连接建立成功后，可以使用 send() 方法发送消息到服务器，例如：

socket.send('Hello, server!');

如何发送和接收消息？有哪些方法可以发送二进制数据？

通过 WebSocket 的 send() 方法可以向服务器发送消息，例如：

socket.send('Hello, server!');

接收到的消息可以在 onmessage 事件处理函数中进行处理，例如：

socket.onmessage = function(event) {
  const message = event.data;
  console.log('接收到消息:', message);
};

WebSocket 除了发送和接收文本消息外，还支持发送和接收二进制数据。对于发送二进制数据，可以使用 send() 方法传递一个 ArrayBuffer 或 Blob 对象，例如：

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);

在接收二进制数据时，可以通过 event.data 获取到 ArrayBuffer 对象，然后进行处理。

如何处理错误和关闭连接？

WebSocket 在出现错误时会触发 error 事件，可以通过设置 onerror 事件处理函数来处理错误，例如：

socket.onerror = function(error) {
  console.error('WebSocket 错误:', error);
};

当 WebSocket 连接关闭时，会触发 close 事件，可以通过设置 onclose 事件处理函数来执行一些清理操作或重新连接等操作，例如：

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它