Nestjs与Vue实现多人聊天[简易版]

本项目是一个小demo,帮助各位理清一点开发思路，作为一个小参考，虽然技术栈是nodejs。但是其他语言也是相通的。

准备环境：

• Nodejs version >=18.13.0
• Vue3
• Nestjs
• soket.io

一、初始化

打开一个路径启动cmd窗口，初始化前后端项目，并安装依赖。

# 后端
nest new app
# 安装完依赖后再安装这个@nestjs/websockets包

# 前端
pnpm create vite 
# 选择vue模板，然后安装依赖，最后安装socket.io-client 和 socket.io

  

二、写逻辑

1.后端逻辑

先写后端，nestjs相关的。

1. 首先进入demo的src目录
2. 在src目录创建getway目录
3. 在getway中创建两个文件，分别是gatet.module.ts和enent.gateway.ts

# gatet.module.ts
import { Module } from '@nestjs/common';
import { EventGateway } from './enent.gateway';
 
@Module({
    providers: [EventGateway]
})
 
export class GatewayModule { }

# enent.gateway.ts
// 网关文件
import { WebSocketGateway, SubscribeMessage, MessageBody, ConnectedSocket, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'http';
 
@WebSocketGateway({ cors: { origin: '*' } })
export class EventGateway {
    // 服务端
    @WebSocketServer()
    serve: Server;
 
    // 订阅消息
    @SubscribeMessage('sayMessage')
    handleMessage(@MessageBody() body: any, @ConnectedSocket() client: any) {
        // 监听一个自定义事件来发布消息
        // client.emit('onMessage')
        const { origin } = client.handshake.headers
        this.serve.emit('onMessage', {
            time: new Date().toLocaleString(),
            msg: body,
            ip: origin
        })
    }
}

最后一步就是app.modules.ts中imports导入 GatewayModule 

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GatewayModule } from './getway/gatet.module';
 
@Module({
  imports: [GatewayModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

2.前端逻辑

 

<template>
  <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span style="color:red;font-size: 0.9vw;">IP:{{ showIp(item.ip) }}</span>&nbsp;&nbsp;
          <span>{{ item.msg }}</span>&nbsp;&nbsp;
          <span style="color:#888;font-size: 0.9vw;">{{ item.time }}</span>
        </li>
      </ul>
     <input type="text" v-model="value">
     <button @click="handleSendMsg">发送消息</button>
  </div>
</template>
 
<script setup>
import { io } from "socket.io-client";
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 
/**
 * @name 服务器地址
 */
const socket = io(`http://localhost:3000`)
 
/**
 * @name 消息列表
 */
const list = ref([])
 
/**
 * @name 输入的信息
 */
const value = ref('')
 
/**
 * @name 连接状态
 */
const inside = ref(false)
 
// 发送消息
const handleSendMsg = () => {
  if (value.value != '') {
    socket.emit('sayMessage', value.value, e => { })
    value.value = ''
  } else {
    alert('你输入的信息不能为空')
  }
}
 
// 连接成功
socket.on('connect', () => {
  inside.value = true
})
// 断开连接
socket.on('disconnect', () => {
  inside.value = false
})
 
socket.on('foo', (...args) => {
  console.log("foo", args);
})
 
socket.on('bar', (...args) => {
  console.log("bar", args);
})
 
onMounted(() => {
  // 监听接收消息
  socket.on('onMessage', e => {
    list.value.push(e)
  })
})
 
onUnmounted(() => {
  // 断开连接
  socket.disconnect()
})
 
</ script>

都比较简单，想了解具体用发，可以去官网：https://socket.io/zh-CN/