nest+websocket+Vue获取网站当前访问人数

前言

无论是在线游戏中的多人互动、社交平台上的实时通知，还是金融交易应用中的数据更新，WebSocket 技术都为各种应用场景提供了强大的解决方案。通过在浏览器和服务器之间建立持久的连接，WebSocket 打破了传统请求-响应模式的限制，为用户带来了更流畅的体验。无论您是开发交互式应用、实时监控系统，还是构建在线聊天平台，WebSocket 都是一个不可或缺的工具，可以助力您实现更高效、更有活力的网络应用。

它的主要作用有

1. 实时通信：WebSocket 允许服务器主动向客户端推送数据，从而实现实时通信。这在在线聊天、社交媒体、实时协作和多人游戏等场景中非常重要。
2. 即时更新：对于需要及时反映数据变化的应用，WebSocket 可以使数据的更新和展示几乎同时发生，无需用户手动刷新页面。
3. 节省资源：与轮询和长轮询等方式相比，WebSocket 使用单一连接，减少了不必要的网络流量和服务器负载，从而更加高效和节省资源。

正是因为 WebSocket 在现代 Web 开发中的重要性，本文将介绍如何使用 Vue 3 和 Nest.js 集成 WebSocket，以实现获取网站当前访问人数的功能。通过这个实例，我们可以更深入地了解 WebSocket 的工作原理以及如何将其应用于实际项目中，为用户带来更好的在线体验。

前提条件

• Node.js 和 npm 或 yarn 已安装。
• 基本的 Vue.js 和 Nest.js 知识。

Nest部分

1.创建Nest.js 后端

打开命令行终端，执行以下命令来创建一个新的 Nest.js 项目：

npm @nestjs/cli new project-nest

安装相应的依赖

npm install @nestjs/websockets socket.io @nestjs/platform-socket.io

2.创建WebSocket Gateway

创建一个名为 websocket.gateway.ts 的文件。

// websocket.gateway.ts
import {  WebSocketGateway, WebSocketServer, OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: 'http://localhost:8080', // 允许的前端地址，这里要注意配置跨域问题
  },
})
export class WebsocketGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  currentUsers = 0;

  // 当 WebSocket Gateway 初始化完成时，我们向所有客户端广播当前的用户人数。
  afterInit() {
    this.server.emit('usersCount', this.currentUsers);
  }

  // 当有新的 WebSocket 连接时，我们增加当前用户人数并广播更新。
  handleConnection(socket: Socket) {
    this.incrementUsersCount();
    this.server.emit('usersCount', this.currentUsers);
  }

  // 当 WebSocket 连接断开时，我们减少当前用户人数并广播更新。
  handleDisconnect(socket: Socket) {
    this.decrementUsersCount();
    this.server.emit('usersCount', this.currentUsers);
  }

  incrementUsersCount() {
    this.currentUsers++;
  }

  decrementUsersCount() {
    this.currentUsers--;
  }
}

3.配置Websocket Module

创建一个名为 websocket.module.ts 的文件。

// websocket.module.ts
import { Module } from '@nestjs/common';
import { WebsocketGateway } from './websocket.gatway';

@Module({
  providers: [WebsocketGateway],
})
export class WebsocketModule {}

4.app.mudule.ts

import { Module } from '@nestjs/common';
import { WebsocketGateway } from './websocket.gateway'; // 导入 WebSocket Gateway
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    WebsocketGateway, // 添加 WebSocket Gateway 到 imports 数组中
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Vue部分

1.创建Vue3前端

打开命令行终端，执行以下命令来创建一个新的 Vue 3 项目：

vue create project-vue

安装依赖

npm install socket.io-client

2.创建Vue组件

在 src/components 目录下创建一个名为 UsersCount.vue 的文件。

<!-- src/components/UsersCount.vue -->
<template>
  <div>
    <p>当前访问人数：{{ onlineNumber }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import io from 'socket.io-client';

let onlineNumber=ref(0)
const socket = io('ws://localhost:3000'); // 替换为您的Nest.js服务器地址
onMounted(()=>{
  // 监听 'usersCount' 事件，并更新用户数
  socket.on('usersCount', (count) => {
    onlineNumber.value = count;
    console.log(onlineNumber.value)
  });

})
</script>

3.使用组件

<!-- src/App.vue -->
<template>
  <div id="app">
    <UsersCount />
  </div>
</template>

<script setup>
import UsersCount from './components/UsersCount.vue';
</script>

测试功能

现在你可以分别启动你Nest和Vue来测试功能了

启动Nest

npm run start

启动Vue

npm run serve

现在可以在浏览器中访问 Vue 3 应用的地址（通常是 http://localhost:8080）） 多打开几个前端网页，就可以注意到onlineNumber的变化啦

总结

通过使用 Vue 3 和 Nest.js，以及 WebSocket 技术，我们实现了一个实时获取网站当前访问人数的功能。WebSocket Gateway 在 Nest.js 后端负责跟踪用户的连接和断开，并通过 WebSocket 在前端实时更新访问人数。

感谢你看到了最后，如果你觉得文章对你有帮助欢迎点赞收藏评论👍。