前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议_websocket 前端通信_websocket两个网页之间怎么传数据

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on(“connection”, function(socket) {
console.log(“WebSocket连接已建立”);

// 监听接收到客户端发送的消息
socket.on(“message”, function(message) {
console.log(“接收到户端发送的消息：” + message);

// 向客户端发送消息
socket.send("Hello Client!");
1
2

});

// 监听连接关闭事件
socket.on(“close”, function() {
console.log(“WebSocket连接已关闭”);
});
});

在以上代码中，客户端通过创建WebSocket对象，并指定服务器地址"ws://example.com/socket"来建立WebSocket连接。同时，客户端通过监听onopen事件，可以在连接建立后发送消息到服务器。服务器端使用WebSocket.Server类创建WebSocket服务器，并监听"connection事件来处理连接建立后的操作。服务器端通过socket.on(“message”)来监听接收到客户端发送的消息，并通过socket.send()向客户端发送消息。


### 数据传输:


建立WebSocket连接后，客户端和服务器可以通过WebSocket对象进行双向的实时数据传输。下面是一个示例代码，演示了如何在客户端和服务器之间进行数据传输。


在客户端（JavaScript）：



1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 发送消息到服务器
socket.send(“Hello Server!”);

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
var message = event.data;
console.log(“接收到服务器发送的消息：” + message);
};

在服务器端（示例使用Node.js）：



1
2
3
4
5

// 向客户端发送消息
socket.send(“Hello Client!”);

// 监听接收到客户端发送的消息
socket.on(“message”, function(message) {
console.log(“接收到客户端发送的消息：” + message);
});

在以上代码中，客户端通过调用`socket.send()`方法将消息发送到服务器，服务器通过`socket.send()`方法将消息发送到客户端。客户端通过监听`socket.onmessage`事件来接收服务器发送的消息，服务器通过监听`socket.on("message")`事件来接收客户端发送的消息。


通过以上代码示例，你可以详细了解如何使用WebSocket建立连接并进行数据传输。请注意，示例代码中使用的服务器地址和端口号需要根据实际情况进行修改。同时，你还可以在具体应用中根据需要使用WebSocket的其他方法和事件来实现更复杂的功能。




---


## WebSocket的真实使用场景


### 即时通讯:


WebSocket非常适合用于即时通讯应用，因为它能够实现实时双向通信。以下是一个简单的即时聊天应用的代码教程。


在客户端（JavaScript）：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket(“ws://example.com/socket”);

// 监听连接建立事件
socket.onopen = function() {
console.log(“WebSocket连接已建立”);

// 监听文本框输入，按下Enter键时发送消息
var input = document.getElementById(“input”);
input.addEventListener(“keyup”, function(event) {
if (event.keyCode === 13) {
var message = input.value;
socket.send(message);
input.value = “”;
}
});
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
var message = event.data;
console.log(“接收到服务器发送的消息：” + message);

// 将接收到的消息显示在聊天窗口中
var chatWindow = document.getElementById(“chatWindow”);
chatWindow.innerHTML += “

” + message + “

”;
};

// 监听连接关闭事件
socket.onclose = function(event) {
console.log(“WebSocket连接已关闭”);
};

// 监听连接错误事件
socket.onerror = function(event) {
console.error(“WebSocket连接错误：” + event};

在服务器端（示例使用Node.js）：



1
2
3
4
5

const WebSocket = require(“ws”);

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on(“connection”, function(socket) {
console.log(“WebSocket连接已建立”);

// 监听接收到客户端发送的消息
socket.on(“message”, function(message) {
console.log(“接收到客户端发送的消息：” + message);

// 向所有连接的客户端发送消息
wss.clients.forEach(function(client) {
  client.send(message);
});
1
2
3
4

});

// 监听连接关闭事件
socket.on(“close”, function() {
console.log(“WebSocket连接已关闭”);
});
});

在上述代码中，客户端通过创建WebSocket对象连接到服务器。输入框中的文本框用于录入要发送的消息，按下Enter键时会将消息发送给服务器。服务器接收到消息后，通过遍历所有连接的客户端，向每个客户端发送消息。


这样，多个客户端就可以实时地进行聊天，并且所有的消息都会实时地在各个客户端之间同步显示。


### 多人协作:


WebSocket还可用于多人协作应用，让多个用户可以实时地协同编辑文档或画布。以下是一个简单的代码教程。


在客户端（JavaScript）：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket(“ws://example.com/socket”);

// 监听连接建立事件
socket.onopen = function() {
console.log(“WebSocket连接已建立”);

// 监听文本框输入，按下Enter键时发送绘画指令
var canvas = document.getElementById(“canvas”);
canvas.addEventListener(“mousedown”, function(event) {
// 绘画指令的数据格式可以自定义，这里使用了简单的示例
var instruction = {
type: “draw”,
position: {
x: event.clientX,
y: event.clientY
}
};
socket.send(JSON.stringify(instruction));
});
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
var message = JSON.parse(event.data);
console.log(“接收到服务器发送的消息：” + message);

// 根据消息执行相应的操作，示例中处理了绘画指令
if (message.type === “draw”) {
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
ctx.beginPath();
ctx.arc(message.position.x, message.position.y, 5, 0, 2 * Math.PI);
ctx.fill();
}
};

// 监听连接关闭事件
socket.onclose = function(event) {
console.log(“WebSocket连接已关闭”);
};

// 监听连接错误事件
socket.onerror = function(event) {
console.error(“WebSocket连接错误：” + event};

在服务器端（示例使用Node.js）：



1
2
3
4
5

const WebSocket = require(“ws”);

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on(“connection”, function(socket) {
console.log(“WebSocket连接已建立”);

// 监听接收到客户端发送的消息
socket.on(“message”, function(message) {
console.log(“接收到客户端发送的消息：” + message);

// 向所有连接的客户端发送消息
wss.clients.forEach(function(client) {
  client.send(message);
});
1
2
3
4

});

// 监听连接关闭事件
socket.on(“close”, function() {
console.log(“WebSocket连接已关闭”);
});
});

在上述代码中，客户端通过创建WebSocket对象连接到服务器。当鼠标在画布上按下时，将绘画指令发送给服务器。服务器接收到绘画指令后，将指令广播给所有连接的客户端，并在各个客户端上进行绘画操作。


这样，多个用户就可以实时地协同编辑同一个画布或文档，所有的绘画指令都会即时同步在各个客户端之间。


### 实时数据更新:


WebSocket还可以用于实时数据更新应用，例如股票交易应用中的实时股票价格更新。以下是一个简单的代码教程。


在客户端（JavaScript）：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket(“链接”);

// 监听连接建立事件
socket.onopen = function() {
console.log(“WebSocket连接已建立”);
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
var message = JSON.parse(event.data);
console.log(“接收到服务器发送的消息：” + message);

// 对接收到的实时数据进行处理
var stockPriceElement = document.getElementById(“stockPrice”);
stockPriceElement.innerText = message.price;
};

// 监听连接关闭事件
socket.onclose = function(event) {
console.log(“WebSocket连接已关闭”);
};

// 监听连接错误事件
socket.onerror = function(event) {
console.error(“WebSocket连接错误：” + event};

在服务器端（示例使用Node.js）：



1
2
3
4
5

const WebSocket = require(“ws”);

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 模拟实时股票价格更新
setInterval(function() {
var stockPrice = Math.random() * 100;

// 向所有连接的客户端发送实时数据
wss.clients.forEach(function(client) {
var data = {
price: stockPrice
};

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

s.csdn.net/topics/618166371)**

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-IymsdaBa-1715228884020)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-plAGaDR3-1715228884020)]