前言
四系统的主要功能是通信!!实际上就是两个功能,一个是可以在公共聊天室进行公共的聊天,一个是可以进行私人的通信
正文
这里因为方便,我的通信手段都是用的轮询,其实我后端的websocket都写好了....
总之先讲一下这两个吧
轮询和websocket
先简单的介绍一下,轮询和WebSocket都是实现客户端与服务器实时通信的技术,但它们的工作方式有所不同。 1. 轮询:轮询是最基本的客户端和服务器通信的方式之一,原理很简单。客户端定时向服务器发送请求,查询是否有新的数据更新。服务器在接收到请求后,会立即返回响应,不论是否有新数据。轮询虽然简单,但是有一个显著的缺点,那就是如果更新不频繁,会产生很多无用的请求,浪费资源。 2. 长轮询: 长轮询是对基本轮询的优化。客户端发送请求到服务器,如果服务器没有任何新的数据,服务器会挂起请求,等待有新数据时再返回。响应后,客户端处理完响应信息后再发起新的请求。长轮询节省了服务器资源,但是也有挂起请求时长,以及服务器如何处理高并发长连接等问题。 3. WebSocket:WebSocket 是一个全双工的通信协议,通过一次初次的HTTP握手,建立了一个持久的连接通道。在 WebSocket 数据帧中数据是以帧的形式来回传输的,而不需要像 HTTP 请求那样需要携带大量的头信息。服务器和客户端都可以主动向对方发送或接收数据。客户端和服务端的通信交互频繁、实时性要求高的场景,WebSocket 是很好的选择。
轮询其实很简单,就是在前端设置一个定时器,每过一段间隔就向后端请求一下就成,websocket就比较复杂,这里以vue和nodejs为例,大概讲一下:
嗯,我们以一个基本的聊天应用为例,来演示如何通过 Vue 和 Node.js 来实现一个 WebSocket 客户端和服务器。 首先,我们需要安装一些必要的库。在你的 Node.js 服务器项目中,你需要安装 ws 库,它是一个轻量级的 WebSocket 库。在你的 Vue 客户端应用中,你可以安装 vue-native-websocket 库,它提供了对 WebSocket 的高级封装。 Node.js 服务器(简化示例):
javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
// echo the message back
ws.send(message);
});
});
console.log('Server is running on localhost:3000');
这个代码片段创建了一个 WebSocket 服务器,监听 3000 端口上的连接。当有一个新的连接时,服务器将监听这个连接上的消息,并在接收到消息时将其回显。 Vue 客户端(简化示例): 首先,你需要在你的 main.js 文件中引入 vue-native-websocket 并配置它:
javascript
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:3000')
然后,在 Vue 组件中,你可以这样发送和接收消息:
javascript
export default {
name: 'HelloWorld',
data() {
return {
message: 'Hello WebSocket!',
receivedMessage: ''
};
},
methods: {
sendMessage() {
this.$socket.send(this.message);
}
},
sockets: {
message(msg) {
this.receivedMessage = msg;
}
}
}
在上述的 Vue 组件中,methods 包含一个 sendMessage 函数,用于通过 WebSocket 连接发送数据。sockets 对象定义了一个 message 处理器,在这个处理器中,你可以处理从服务器接收到的消息。 值得注意的是,这只是一个简化示例,实际的项目中会更复杂,你需要为错误和断线重连等问题制定策略。
然后是我踩得一些坑的记录
比较
在比较的过程中,我意识到了值比较和引用比较的区别.
计算机科学中有几种不同的数据对比方式,常见的比如值比较(value comparison)和引用比较(reference comparison)。
值比较的意思就是比较两个变量的内容是否相同,无论它们在内存中的位置是什么。而引用比较则是比较两个变量是否指向内存中的同一个位置。
在JavaScript等很多编程语言中,基本类型如数字和字符串默认是按值比较的,这就是为什么 'hello' === 'hello'
返回 true
。
然而,当涉及到诸如对象或数组等复合数据类型时,情况就不同了。对象和数组存储在内存中的位置是动态分配的,这意味着即使两个数组的内容完全相同,但它们是两个不同的实例,分别占据内存中的两处不同的位置。所以,比如 [] === []
和 { a: 1 } === { a: 1 }
都会返回 false
,这就是引用比较。
所以,当我们使用 newvalue !== oldvalue
对对象或数组进行比较时,我们实际上是在进行引用比较,而这并不能正确地判断出两个对象或数组的内容是否相同。这就解释了你遇到的问题。通过将对象或数组转换为字符串,我们可以让比较更加准确地反映出我们想要的结果,即判断它们的内容是否相同。
异步问题
接收数据的时候数据格式是正确的,是一个包含对象的数组,每个对象都有一个 username
属性。数据的格式没有问题。但是就是渲染不出来
问题:是异步数据加载的问题,需要把 computed(我这里是为了保证响应及时)
改为 refs
,因为 Vue3 的 setup
是在 beforeCreated
和 created
之间执行,此时组件模板还没有挂载,我们无法在 setup
中直接访问模板中的数据,因此我们需要用到 refs
。
这里是一个例子:
ini
const userList = ref([]); // 初始化为一个空数组
onMounted(async () => { // 等待组件挂载后再获取数据
const result = await api.getuserapi({ uid: "all" });
console.log("拿到的用户数据", result.data);
userList.value = result.data; // 用返回的数据更新userList
});
然后在模板中遍历 userList.value
。这样就能完全渲染
结语
差不多就这些