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

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

• 连接方式：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 事件处理函数来执行一些清理操作或重新连接等操作，例如：

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


##### 数据结构与算法

 这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：**数组、链表、队列、栈、Set、Map、哈希表等**，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。**算法部分主要分为两大块，排序算法与一些其他算法题**。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

- 二叉树层序遍历
- B 树的特性，B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘？递归的方法会出现什么问题？
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理？复杂度？
- 几种常见的排序算法，手写
- 数组的去重，尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

![](https://img-blog.csdnimg.cn/img_convert/85d2fe0f3399226570627e81b062f9f7.webp?x-oss-process=image/format,png)



有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中...(img-UIpjx2Ao-1715167861724)]