个人网站开发距离(八)四系统前端

前言

四系统的主要功能是通信!!实际上就是两个功能,一个是可以在公共聊天室进行公共的聊天,一个是可以进行私人的通信

正文

这里因为方便,我的通信手段都是用的轮询,其实我后端的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 服务器（简化示例）：

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 并配置它：

import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:3000')

  然后，在 Vue 组件中，你可以这样发送和接收消息：

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。

这里是一个例子：

const userList = ref([]); // 初始化为一个空数组
onMounted(async () => { // 等待组件挂载后再获取数据
    const result = await api.getuserapi({ uid: "all" });
    console.log("拿到的用户数据", result.data);
    userList.value = result.data; // 用返回的数据更新userList
});

然后在模板中遍历 userList.value。这样就能完全渲染

结语

差不多就这些